/* ============================================================
 * AMEFIT VISUAL REFRESH — FAZA 2 (BOLDER)
 * Ładowane PO custom.css (faza 1). Nadbudowuje, nie zastępuje.
 *
 * Sekcje:
 *   1. Tokeny per-kategoria (4 kolory zajęć) + scroll-padding-top
 *   2. Hero podstrony Zajęć Grupowych
 *   3. Zajęcia Grupowe — tabele→karty, grid layout, hover, badge
 *   4. Header — pill button "Strefa Klienta" + shrink po scroll
 *   5. Mobile menu — full-screen drawer, duża typografia
 *   6. Hero strony głównej — dramatyczny overlay + ogromny H1
 *   7. Sekcje oferty — grid kart z mocnym hover
 *   8. Sekcja "Honorujemy karty" — ciemne tło, polish logotypów
 *   9. Karty trenerów — bolder hover, aspect-ratio, line-clamp
 *  10. CTA band „Zaczynamy?"
 *  11. Footer — wzmocnienie kontrastu + grid 4-col
 *  12. Bolder cienie / podniesienia kart globalnie
 *  13. Reduced motion fallback (rozszerzenie)
 * ============================================================ */

/* === 1. TOKENY PER-KATEGORIA + SCROLL PADDING ============== */
:root {
	/* Kolory akcentów per-kategoria — żyją tylko w kontekście strony Zajęć
	   (body.amefit-classes-page). Dla globalnego akcentu zostaje --af-color-accent
	   (#cf0261 z fazy 1). */
	--af-cat-1: #ff6b35; /* TRENINGI WYDOLNOŚCIOWE — energetyczny pomarańcz */
	--af-cat-1-soft: rgba(255, 107, 53, 0.06);
	--af-cat-2: #14a098; /* REGENERACJA — głęboki teal (kontrast do białego tła) */
	--af-cat-2-soft: rgba(20, 160, 152, 0.06);
	--af-cat-3: #e63946; /* TRENINGI CARDIO — głęboka magenta-czerwień */
	--af-cat-3-soft: rgba(230, 57, 70, 0.06);
	--af-cat-4: #7b2cbf; /* TANIEC I FITNESS — electric purple */
	--af-cat-4-soft: rgba(123, 44, 191, 0.06);

	/* Mocniejsze cienie dla fazy 2 (override fazy 1) */
	--af-shadow-card:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 12px 32px -8px rgba(22, 25, 34, 0.12);
	--af-shadow-card-hover:
		0 2px 4px rgba(22, 25, 34, 0.06),
		0 24px 48px -12px rgba(22, 25, 34, 0.2);
}

/* Scroll padding — sticky header nie zasłania kotwic */
html {
	scroll-padding-top: 100px;
}

/* === 2. HERO PODSTRONY ZAJĘĆ GRUPOWYCH ===================== */

.amefit-classes-page .af-classes-hero {
	position: relative;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(207, 2, 97, 0.18) 0%, transparent 55%),
		radial-gradient(120% 140% at 100% 100%, rgba(123, 44, 191, 0.16) 0%, transparent 60%),
		linear-gradient(180deg, #0a0a0a 0%, #14161e 100%);
	color: #ffffff;
	padding: clamp(72px, 12vw, 160px) 24px clamp(72px, 12vw, 160px);
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Subtelna pseudo-noise tekstura — generowana SVG-em jako data-uri.
   Daje filmowy "grain" zamiast płaskiego kolorowego pola. */
.amefit-classes-page .af-classes-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.amefit-classes-page .af-classes-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
}

.amefit-classes-page .af-classes-hero__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--af-color-accent);
	margin-bottom: 1.25rem;
}

.amefit-classes-page .af-classes-hero__title {
	font-size: clamp(3rem, 8vw, 5.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 1.25rem;
}

.amefit-classes-page .af-classes-hero__subtitle {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.78);
	max-width: 56ch;
	margin: 0;
}

/* Ukryj BeTheme'owy Subheader na tej podstronie — hero zastępuje go w pełni */
.amefit-classes-page #Subheader {
	display: none;
}

/* === 3. ZAJĘCIA GRUPOWE — TABELE→KARTY ===================== */

/* Override szerokości kolumn Muffin Buildera tylko na tej podstronie.
   Cele: 3 kolumny desktop, 2 tablet, 1 mobile, niezależnie od one-fifth. */
.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.one-fifth,
.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.tablet-one-fifth,
.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.laptop-one-fifth {
	width: calc(100% / 3);
	max-width: calc(100% / 3);
	flex: 0 0 calc(100% / 3);
}

@media (max-width: 1023px) {
	.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.one-fifth,
	.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.tablet-one-fifth,
	.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.laptop-one-fifth {
		width: 50%;
		max-width: 50%;
		flex: 0 0 50%;
	}
}

@media (max-width: 599px) {
	.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.one-fifth,
	.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.tablet-one-fifth,
	.amefit-classes-page .mcb-section .mcb-section-inner > .mcb-wrap.laptop-one-fifth {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}
}

/* Tabela jako karta — display: flex z resetem table-children */
.amefit-classes-page table.tabela-zajecia {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 160px;
	margin: 0 0 1.5rem;
	padding: 1.75rem 1.5rem 1.5rem 1.75rem;
	background: #ffffff;
	border: 1px solid var(--af-color-border);
	border-left: 4px solid var(--af-color-accent);
	border-radius: var(--af-radius-lg);
	box-shadow: var(--af-shadow-card);
	cursor: pointer;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1),
		border-left-width 250ms cubic-bezier(0.16, 1, 0.3, 1),
		background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
	border-collapse: separate;
}

.amefit-classes-page table.tabela-zajecia tbody,
.amefit-classes-page table.tabela-zajecia tr {
	display: contents;
}

.amefit-classes-page table.tabela-zajecia td.zajecia,
.amefit-classes-page table.tabela-zajecia td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 1rem;
	border: none;
	background: transparent;
	font-size: clamp(1.05rem, 1.4vw, 1.4rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--af-color-text);
	text-align: left;
	line-height: 1.15;
}

/* Pseudo-CTA "Zobacz opis →" pod nazwą zajęć — robione CSS-em żeby
   nie modyfikować HTML-u tabeli (popup mechanika zostaje 1:1). */
.amefit-classes-page table.tabela-zajecia::after {
	content: "Zobacz opis →";
	position: absolute;
	bottom: 1rem;
	left: 1.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--af-color-text-muted);
	transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wielka cyfra kategorii jako outline na tle karty (bardzo subtelna,
   tylko w hover staje się wyraźna — efekt brand-stamp) */
.amefit-classes-page table.tabela-zajecia::before {
	content: "";
	position: absolute;
	right: -8px;
	bottom: -16px;
	width: 80px;
	height: 80px;
	background-image: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.025) 50%);
	border-radius: var(--af-radius-md);
	pointer-events: none;
	transition: background-image 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: wyraźne podniesienie + pogrubienie krawędzi + tinted bg */
.amefit-classes-page table.tabela-zajecia:hover {
	transform: translateY(-6px);
	box-shadow: var(--af-shadow-card-hover);
	border-left-width: 6px;
}

.amefit-classes-page table.tabela-zajecia:hover::after {
	color: var(--af-color-accent);
	transform: translateX(4px);
}

.amefit-classes-page table.tabela-zajecia:focus-visible {
	outline: 2px solid var(--af-color-accent);
	outline-offset: 4px;
}

/* === 3a. KOLORY PER-KATEGORIA ============================== */

.amefit-classes-page table.tabela-zajecia.af-cat-1 { border-left-color: var(--af-cat-1); }
.amefit-classes-page table.tabela-zajecia.af-cat-2 { border-left-color: var(--af-cat-2); }
.amefit-classes-page table.tabela-zajecia.af-cat-3 { border-left-color: var(--af-cat-3); }
.amefit-classes-page table.tabela-zajecia.af-cat-4 { border-left-color: var(--af-cat-4); }

.amefit-classes-page table.tabela-zajecia.af-cat-1:hover { background: var(--af-cat-1-soft); }
.amefit-classes-page table.tabela-zajecia.af-cat-2:hover { background: var(--af-cat-2-soft); }
.amefit-classes-page table.tabela-zajecia.af-cat-3:hover { background: var(--af-cat-3-soft); }
.amefit-classes-page table.tabela-zajecia.af-cat-4:hover { background: var(--af-cat-4-soft); }

.amefit-classes-page table.tabela-zajecia.af-cat-1:hover::after { color: var(--af-cat-1); }
.amefit-classes-page table.tabela-zajecia.af-cat-2:hover::after { color: var(--af-cat-2); }
.amefit-classes-page table.tabela-zajecia.af-cat-3:hover::after { color: var(--af-cat-3); }
.amefit-classes-page table.tabela-zajecia.af-cat-4:hover::after { color: var(--af-cat-4); }

/* === 3b. NAGŁÓWKI KATEGORII (TRENINGI WYDOLNOŚCIOWE etc.) === */

.amefit-classes-page h3 strong {
	font-weight: 800;
}

/* Targetuj nagłówki kategorii przez ich kontekst kolumny.
   Każda kategoria H3 jest w mcb-column-inner-{ID} z naszej mapy. */
.amefit-classes-page .mcb-column-inner-dttvc70cd h3 strong { color: var(--af-cat-1); }
.amefit-classes-page .mcb-column-inner-znqy6qhna h3 strong { color: var(--af-cat-2); }
.amefit-classes-page .mcb-column-inner-magnpxe6f h3 strong { color: var(--af-cat-3); }
.amefit-classes-page .mcb-column-inner-hgnxnyrmj h3 strong { color: var(--af-cat-4); }

.amefit-classes-page .mcb-column-inner-dttvc70cd h3,
.amefit-classes-page .mcb-column-inner-znqy6qhna h3,
.amefit-classes-page .mcb-column-inner-magnpxe6f h3,
.amefit-classes-page .mcb-column-inner-hgnxnyrmj h3 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: clamp(2rem, 4vw, 3.5rem) 0 1.5rem;
	position: relative;
	padding-bottom: 0.75rem;
	display: inline-block;
	width: auto;
}

.amefit-classes-page .mcb-column-inner-dttvc70cd h3::after,
.amefit-classes-page .mcb-column-inner-znqy6qhna h3::after,
.amefit-classes-page .mcb-column-inner-magnpxe6f h3::after,
.amefit-classes-page .mcb-column-inner-hgnxnyrmj h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	border-radius: 4px;
}

.amefit-classes-page .mcb-column-inner-dttvc70cd h3::after { background: var(--af-cat-1); }
.amefit-classes-page .mcb-column-inner-znqy6qhna h3::after { background: var(--af-cat-2); }
.amefit-classes-page .mcb-column-inner-magnpxe6f h3::after { background: var(--af-cat-3); }
.amefit-classes-page .mcb-column-inner-hgnxnyrmj h3::after { background: var(--af-cat-4); }

/* === 3c. POPUP STYLING (wp-popups-lite) ==================== */

/* Backdrop ciemniejszy + blur */
.amefit-modernized .spu-bg {
	background: rgba(10, 10, 12, 0.78) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Panel popupu — ramka lewa w kolorze akcentu, lekki shadow.
   UWAGA: bez własnej animacji wejścia — wp-popups-lite używa jQuery .fadeIn(),
   nasz `animation: af-spu-in` powodował konflikt (popup pojawiał się, znikał
   i pojawiał ponownie ~0.5s po kliknięciu). Zostawiamy fadeIn pluginu. */
.amefit-modernized .spu-box {
	border-radius: var(--af-radius-lg) !important;
	overflow: hidden !important;
	border-left: 4px solid var(--af-color-accent) !important;
	box-shadow: var(--af-shadow-card-hover) !important;
}

.amefit-modernized .spu-content {
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--af-color-text);
}

.amefit-modernized .spu-content h4 {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	margin-bottom: 0.75rem;
	color: var(--af-color-text);
}

.amefit-modernized .spu-close {
	color: var(--af-color-text-muted) !important;
	transition: color var(--af-duration-fast) var(--af-ease-out);
}

.amefit-modernized .spu-close:hover {
	color: var(--af-color-accent) !important;
}

/* === 3d. TOP BAR (utility bar nad headerem) ================ */

/* Ciemny slim-bar z kontaktem (tel + email) po lewej i ikonkami
 * social po prawej. Renderowany przez `mfn_hook_top` w functions.php
 * — siedzi PRZED #Wrapper, więc scrolluje się razem ze stroną i
 * znika gdy user przewinie w dół (sticky #Top_bar zostaje sam). */

.amefit-modernized .af-topbar {
	background: linear-gradient(180deg, #0a0a0a 0%, #14161e 100%);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.8rem;
	line-height: 1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	position: relative;
	z-index: 100;
}

/* Subtelny akcent w kolorze magenta na samym dole paska */
.amefit-modernized .af-topbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--af-color-accent) 50%,
		transparent 100%
	);
	opacity: 0.5;
	pointer-events: none;
}

.amefit-modernized .af-topbar__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.amefit-modernized .af-topbar__contact {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.amefit-modernized .af-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .af-topbar__link:hover,
.amefit-modernized .af-topbar__link:focus-visible {
	color: var(--af-color-accent);
	transform: translateY(-1px);
}

.amefit-modernized .af-topbar__link:focus-visible {
	outline: 2px solid var(--af-color-accent);
	outline-offset: 4px;
	border-radius: 2px;
}

.amefit-modernized .af-topbar__icon {
	flex: 0 0 auto;
	color: var(--af-color-accent);
	transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.amefit-modernized .af-topbar__link:hover .af-topbar__icon {
	transform: scale(1.15) rotate(-6deg);
}

.amefit-modernized .af-topbar__label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.amefit-modernized .af-topbar__value {
	font-weight: 600;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.amefit-modernized .af-topbar__social {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.amefit-modernized .af-topbar__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: background-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .af-topbar__social-link:hover,
.amefit-modernized .af-topbar__social-link:focus-visible {
	background: var(--af-color-accent);
	color: #ffffff;
	transform: translateY(-2px) scale(1.1) rotate(-4deg);
	box-shadow: 0 8px 16px -4px rgba(207, 2, 97, 0.5);
	outline: none;
}

/* Mobile: zwarty 2-rzędowy układ — kontakt nad social, mniejsze fonty */
@media (max-width: 767px) {
	.amefit-modernized .af-topbar__inner {
		padding: 8px 16px;
		gap: 0.5rem;
		justify-content: center;
	}
	.amefit-modernized .af-topbar__contact {
		gap: 1rem;
		font-size: 0.75rem;
	}
	.amefit-modernized .af-topbar__link--email .af-topbar__label {
		display: none;
	}
}

/* Bardzo małe ekrany — schowaj label "Tel.:" i "Email:" całkowicie,
   zostaje tylko ikona + wartość */
@media (max-width: 479px) {
	.amefit-modernized .af-topbar__label {
		display: none;
	}
	.amefit-modernized .af-topbar__value {
		font-size: 0.78rem;
	}
}

/* Reduced motion — zerujemy mikro-overshooty */
@media (prefers-reduced-motion: reduce) {
	.amefit-modernized .af-topbar__link:hover,
	.amefit-modernized .af-topbar__social-link:hover {
		transform: none;
	}
	.amefit-modernized .af-topbar__link:hover .af-topbar__icon {
		transform: none;
	}
}

/* === 4. HEADER — STREFA KLIENTA PILL + SHRINK ============== */

/* Kontener headera — max-width 1320px (spójne z resztą strony, container_attr) */
.amefit-modernized #Top_bar .container {
	max-width: 1320px;
}

/* Menu wyrównane do prawej krawędzi headera (override BeTheme'owego centrowania) */
.amefit-modernized #Top_bar .menu_wrapper {
	float: right;
}

/* Lekki odstęp Headera od krawędzi viewportu (poza szablonami z fullwidth sliderem) */
body.amefit-modernized:not(.template-slider) #Header {
	margin-top: 15px;
}


/* Header shrink — JS dokleja klasę `.af-header-shrunk` do <body>
   po przewinięciu o 80px. Wartości transition + scale. */
.amefit-modernized #Top_bar {
	transition: background-color var(--af-duration-base) var(--af-ease-out),
		box-shadow var(--af-duration-base) var(--af-ease-out),
		backdrop-filter var(--af-duration-base) var(--af-ease-out),
		padding 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amefit-modernized.af-header-shrunk #Top_bar {
	padding-top: 0;
	padding-bottom: 0;
}

.amefit-modernized .logo,
.amefit-modernized #Top_bar .logo,
.amefit-modernized #Top_bar a.logo img {
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		max-height 280ms cubic-bezier(0.16, 1, 0.3, 1);
	transform-origin: left center;
}

.amefit-modernized.af-header-shrunk #Top_bar .logo img {
	transform: scale(0.84);
}

/* (Pill button "Strefa Klienta" usunięty — pozycja menu wraca do
   domyślnego stylowania z fazy 1, identycznego jak inne pozycje menu.) */

/* === 4a. PIĘKNY HOVER MENU ================================= */

/* Symetryczne dwa paski na pozycji menu — top + bottom — odsłaniane
 * clip-pathem z PRZECIWNYCH stron i z lekkim opóźnieniem między sobą.
 * Daje filmowy efekt "ramki obejmującej" pozycję menu, gładki gradient,
 * premium feel.
 *
 *   - Underline (::after na span tekstu): wjeżdża OD LEWEJ, 460ms, gradient
 *     pełny → przyciemniony.
 *   - Top border (::before na <a>): wjeżdża OD PRAWEJ, 460ms z opóźnieniem 60ms,
 *     gradient w lustrzanym kierunku (przyciemniony → pełny).
 *
 * Razem z crossfade koloru tekstu i drobnym translateY(-1px). */

.amefit-modernized #Top_bar #menu > ul > li > a {
	position: relative;
	transition: color 320ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Underline (od dołu, wjeżdża z lewej) */
.amefit-modernized #Top_bar #menu > ul > li > a > span:first-child::after {
	height: 2px;
	left: 16px;
	right: 16px;
	bottom: 8px;
	background: linear-gradient(
		90deg,
		var(--af-color-accent) 0%,
		var(--af-color-accent-hover) 60%,
		rgba(207, 2, 97, 0.25) 100%
	);
	border-radius: 2px;
	transform: none;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 460ms cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 0ms;
}

/* Top border (od góry, wjeżdża z prawej; lustrzany gradient) */
.amefit-modernized #Top_bar #menu > ul > li > a::before {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	top: 8px;
	height: 2px;
	background: linear-gradient(
		90deg,
		rgba(207, 2, 97, 0.25) 0%,
		var(--af-color-accent-hover) 40%,
		var(--af-color-accent) 100%
	);
	border-radius: 2px;
	clip-path: inset(0 0 0 100%);
	transition: clip-path 460ms cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 60ms;
	pointer-events: none;
}

/* Stan otwarty (hover / pozycja aktywna) — odsłonięcie obu pasków */
.amefit-modernized #Top_bar #menu > ul > li:hover > a > span:first-child::after,
.amefit-modernized #Top_bar #menu > ul > li.current-menu-item > a > span:first-child::after,
.amefit-modernized #Top_bar #menu > ul > li.current_page_item > a > span:first-child::after,
.amefit-modernized #Top_bar #menu > ul > li.current-menu-ancestor > a > span:first-child::after,
.amefit-modernized #Top_bar #menu > ul > li:hover > a::before,
.amefit-modernized #Top_bar #menu > ul > li.current-menu-item > a::before,
.amefit-modernized #Top_bar #menu > ul > li.current_page_item > a::before,
.amefit-modernized #Top_bar #menu > ul > li.current-menu-ancestor > a::before {
	clip-path: inset(0 0 0 0);
}

/* Lekkie podniesienie tekstu na hover — drobny "click-feel" */
.amefit-modernized #Top_bar #menu > ul > li:hover > a {
	transform: translateY(-1px);
}

/* Reduced motion: zostawiamy odsłonięte paski, bez animacji wjeżdżania */
@media (prefers-reduced-motion: reduce) {
	.amefit-modernized #Top_bar #menu > ul > li:hover > a {
		transform: none;
	}
	.amefit-modernized #Top_bar #menu > ul > li > a > span:first-child::after,
	.amefit-modernized #Top_bar #menu > ul > li > a::before {
		transition-duration: 1ms;
	}
}

/* === 5. MOBILE MENU — FULL-SCREEN DRAWER =================== */

.amefit-modernized.menu-mobile #Top_bar #menu {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100vh !important;
	background: var(--af-color-dark) !important;
	padding: 96px 32px 48px !important;
	overflow-y: auto !important;
	z-index: 9999;
	box-shadow: none;
}

.amefit-modernized.menu-mobile #Top_bar #menu ul.menu {
	display: flex !important;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li {
	display: block !important;
	width: 100%;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	opacity: 0;
	transform: translateX(20px);
	animation: af-mobile-item-in 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(1) { animation-delay: 60ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(2) { animation-delay: 120ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(3) { animation-delay: 180ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(4) { animation-delay: 240ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(5) { animation-delay: 300ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(6) { animation-delay: 360ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(7) { animation-delay: 420ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(8) { animation-delay: 480ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(9) { animation-delay: 540ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(10) { animation-delay: 600ms; }
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li:nth-child(n+11) { animation-delay: 660ms; }

@keyframes af-mobile-item-in {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}

.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li > a {
	display: block !important;
	width: 100%;
	padding: 1.25rem 0 !important;
	color: #ffffff !important;
	font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
	background: transparent !important;
	border: none !important;
}

.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li > a:hover,
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li > a:active {
	color: var(--af-color-accent) !important;
}

/* Ukryj kreski hover w mobile menu (bez przestrzeni na taką ozdobę) */
.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li > a > span::after {
	display: none !important;
}

/* === 6. HERO STRONY GŁÓWNEJ — DRAMATYCZNIEJ ================ */

/* BeTheme generuje pierwszą sekcję strony głównej jako section.section-page-bg
   albo section z bg-image. Atakujemy konkretnie #Subheader (jeśli jest)
   i pierwszą full-width sekcję. */
.amefit-modernized.home #Subheader {
	display: none;
}

/* Pierwsza sekcja na home: jeśli ma bg-image, dorzuć overlay */
.amefit-modernized.home #Content > .section:first-of-type,
.amefit-modernized.home .section_wrapper.section_wrapper_1,
.amefit-modernized.home .section.has-bg-image:first-of-type {
	position: relative;
	min-height: clamp(60vh, 80vh, 800px);
	display: flex;
	align-items: center;
}

.amefit-modernized.home #Content > .section:first-of-type::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 0%, rgba(10, 10, 16, 0.7) 100%),
		linear-gradient(90deg, rgba(10, 10, 16, 0.55) 0%, rgba(10, 10, 16, 0.15) 60%);
	pointer-events: none;
	z-index: 1;
}

.amefit-modernized.home #Content > .section:first-of-type > .section_wrapper,
.amefit-modernized.home #Content > .section:first-of-type .section_wrapper {
	position: relative;
	z-index: 2;
}

/* Pierwszy H1/H2 w pierwszej sekcji = filmowa skala */
.amefit-modernized.home #Content > .section:first-of-type h1,
.amefit-modernized.home #Content > .section:first-of-type h2 {
	font-size: clamp(2.75rem, 8vw, 6rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 0.95;
	color: #ffffff;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.amefit-modernized.home #Content > .section:first-of-type p {
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	max-width: 56ch;
}

/* === 7. SEKCJE OFERTY (HOME) — BOLDER KARTY ================ */

.amefit-modernized .feature_box,
.amefit-modernized .icon_box,
.amefit-modernized .promo_box,
.amefit-modernized .pricing-box {
	box-shadow: var(--af-shadow-card);
	border-radius: var(--af-radius-lg);
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amefit-modernized .feature_box:hover,
.amefit-modernized .icon_box:hover,
.amefit-modernized .promo_box:hover,
.amefit-modernized .pricing-box:hover {
	transform: translateY(-6px);
	box-shadow: var(--af-shadow-card-hover);
}

.amefit-modernized .feature_box .desc_wrapper,
.amefit-modernized .icon_box .desc_wrapper {
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Większy padding sekcji */
.amefit-modernized .section .section_wrapper,
.amefit-modernized .section_wrapper {
	max-width: 1320px;
}

.amefit-modernized .section {
	padding-top: clamp(3rem, 7vw, 5rem);
	padding-bottom: 0;
}

/* === 8. SEKCJA „HONORUJEMY KARTY" ========================== */

.amefit-modernized .clients,
.amefit-modernized .clients-list {
	padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Logotypy: subtelnie odbarwione w spoczynku, pełen kolor w hover.
   Override fazy 1 dla większej dramy. */
.amefit-modernized .clients .image_frame,
.amefit-modernized .clients .one_third .image_frame,
.amefit-modernized .clients-list .image_frame {
	filter: grayscale(80%) brightness(0.95);
	opacity: 0.7;
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		filter 280ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amefit-modernized .clients .image_frame:hover,
.amefit-modernized .clients .one_third .image_frame:hover,
.amefit-modernized .clients-list .image_frame:hover {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
	transform: translateY(-4px) scale(1.03);
	box-shadow: var(--af-shadow-card-hover);
}

/* === 9. KARTY TRENERÓW (KADRA) — BOLDER ==================== */

.amefit-modernized .team {
	overflow: hidden;
}

.amefit-modernized .team .team-image,
.amefit-modernized .team .image_frame {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--af-color-surface-2);
}

.amefit-modernized .team .team-image img,
.amefit-modernized .team .image_frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amefit-modernized .team:hover .team-image img,
.amefit-modernized .team:hover .image_frame img {
	transform: scale(1.06);
}

.amefit-modernized .team .team-desc p,
.amefit-modernized .team-info p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === 10. CTA BAND „ZACZYNAMY?" ============================= */

.amefit-modernized .af-cta-band {
	display: block;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background:
		linear-gradient(135deg, var(--af-color-accent) 0%, #8c0345 100%);
	color: #ffffff;
	padding: clamp(48px, 8vw, 96px) 24px;
	margin-top: 0;
	margin-bottom: 0;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.amefit-modernized .af-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 100% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 60%),
		radial-gradient(60% 80% at 100% 100%, rgba(0, 0, 0, 0.28) 0%, transparent 60%);
	pointer-events: none;
}

.amefit-modernized .af-cta-band__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 767px) {
	.amefit-modernized .af-cta-band__inner {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

.amefit-modernized .af-cta-band__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #ffffff;
	margin: 0 0 0.5rem;
}

.amefit-modernized .af-cta-band__subtitle {
	font-size: clamp(0.95rem, 1.4vw, 1.125rem);
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 60ch;
}

.amefit-modernized .af-cta-band__action {
	justify-self: end;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1.1rem 2rem;
	background: #ffffff;
	color: var(--af-color-accent);
	border-radius: var(--af-radius-pill);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amefit-modernized .af-cta-band__action::after {
	content: "→";
	font-size: 1.1em;
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amefit-modernized .af-cta-band__action:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.45);
	background: #fff8fb;
	color: var(--af-color-accent-hover);
}

.amefit-modernized .af-cta-band__action:hover::after {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	.amefit-modernized .af-cta-band__action {
		justify-self: start;
	}
}

/* === 11. FOOTER — WZMOCNIENIE ============================== */

.amefit-modernized #Footer {
	background-color: #0a0a0a;
}

.amefit-modernized #Footer .widgets_wrapper {
	padding: clamp(48px, 8vw, 96px) 0 48px;
}

/* Większy gap między kolumnami widgetów */
.amefit-modernized #Footer .widgets_wrapper > .container > .column,
.amefit-modernized #Footer .widgets_wrapper .one_fourth,
.amefit-modernized #Footer .widgets_wrapper .one_third {
	margin-bottom: 2rem;
}

.amefit-modernized #Footer h4,
.amefit-modernized #Footer .widget-title,
.amefit-modernized #Footer .widget_title {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 1.25rem;
	position: relative;
	padding-bottom: 0.75rem;
}

.amefit-modernized #Footer h4::after,
.amefit-modernized #Footer .widget-title::after,
.amefit-modernized #Footer .widget_title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--af-color-accent);
	border-radius: 2px;
}

.amefit-modernized #Footer .widgets_wrapper table.plan {
	width: 100%;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
}

.amefit-modernized #Footer .widgets_wrapper table.plan tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.amefit-modernized #Footer .widgets_wrapper table.plan tr:last-child {
	border-bottom: none;
}

.amefit-modernized #Footer .widgets_wrapper table.plan td,
.amefit-modernized #Footer .widgets_wrapper table.plan th {
	padding: 0.5rem 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
	border: none;
	font-weight: 400;
}

.amefit-modernized #Footer .widgets_wrapper table.plan tbody tr:hover td {
	background: transparent;
	color: #ffffff;
}

/* === 11c. HOVER NA IKONACH SOCIAL MEDIA ==================== */

/* Ikonki FB / IG renderowane są jako <img> wewnątrz <a> z hrefem do
 * facebook.com / instagram.com (oba w jednym anchorze w treści Kontakt).
 * Animację hover zakładamy per-ikonę (img:hover, nie a:hover) — dzięki
 * temu najechanie na FB nie animuje IG i odwrotnie.
 *
 * Efekt: lekki lift + scale + drobny obrót + akcentowy glow magenty,
 * easing z overshoot dla "spring feel". */

.amefit-modernized a[href*="facebook.com"] img,
.amefit-modernized a[href*="instagram.com"] img,
.amefit-modernized a[href*="fb.com"] img,
.amefit-modernized #Footer .social a img {
	display: inline-block;
	transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
		filter 280ms cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform, filter;
	transform-origin: center center;
}

.amefit-modernized a[href*="facebook.com"] img:hover,
.amefit-modernized a[href*="instagram.com"] img:hover,
.amefit-modernized a[href*="fb.com"] img:hover,
.amefit-modernized #Footer .social a img:hover {
	transform: translateY(-4px) scale(1.12) rotate(-4deg);
	filter: drop-shadow(0 10px 20px rgba(207, 2, 97, 0.45))
		drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* Reduced motion — zostaje delikatny lift bez overshoot/rotate */
@media (prefers-reduced-motion: reduce) {
	.amefit-modernized a[href*="facebook.com"] img,
	.amefit-modernized a[href*="instagram.com"] img,
	.amefit-modernized a[href*="fb.com"] img,
	.amefit-modernized #Footer .social a img {
		transition-duration: 1ms;
	}
	.amefit-modernized a[href*="facebook.com"] img:hover,
	.amefit-modernized a[href*="instagram.com"] img:hover,
	.amefit-modernized a[href*="fb.com"] img:hover,
	.amefit-modernized #Footer .social a img:hover {
		transform: scale(1.05);
		filter: none;
	}
}

/* === 11b. WATERMARK LOGO W CIEMNEJ SEKCJI FOOTER-STYLE ===== */

/* Tożsamość sekcji "footer-style" (ta z Godzinami otwarcia / Kontaktem) na
 * stronach — page-builder generuje per-strona unikalny mcb-section-{hash},
 * więc selektor opieramy o stabilną cechę: inline `background-color:#212121`.
 * Wszystkie ciemne sekcje budowane na taki sam kolor dziedziczą watermark.
 *
 * Watermark = duży logotyp AmeFit, w pełni biały (filter: brightness(0)
 * invert(1) konwertuje czarny logotyp z PNG na białą sylwetkę), opacity 0.1,
 * przyklejony do lewej krawędzi, zajmuje ~50% szerokości viewportu.
 *
 * URL względny — żeby ten sam plik działał na produkcji bez zmiany. */

.amefit-modernized section.mcb-section[style*="background-color:#212121"],
.amefit-modernized section.mcb-section[style*="background-color: #212121"] {
	position: relative;
	overflow: hidden;
}

.amefit-modernized section.mcb-section[style*="background-color:#212121"]::before,
.amefit-modernized section.mcb-section[style*="background-color: #212121"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50vw;
	max-width: 50%;
	background-image: url("/wp-content/uploads/2023/05/logo_czarne-biale-przezroczyste.png");
	background-position: left bottom;
	background-size: contain;
	background-repeat: no-repeat;
	filter: brightness(0) invert(1);
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
}

/* Trzymaj content sekcji (wrap z modułami) nad watermarkiem */
.amefit-modernized section.mcb-section[style*="background-color:#212121"] > .section_wrapper,
.amefit-modernized section.mcb-section[style*="background-color: #212121"] > .section_wrapper,
.amefit-modernized section.mcb-section[style*="background-color:#212121"] > .mcb-section-inner,
.amefit-modernized section.mcb-section[style*="background-color: #212121"] > .mcb-section-inner {
	position: relative;
	z-index: 1;
}

/* Mobile: watermark mniej dominujący, przykryty przez treść */
@media (max-width: 767px) {
	.amefit-modernized section.mcb-section[style*="background-color:#212121"]::before,
	.amefit-modernized section.mcb-section[style*="background-color: #212121"]::before {
		width: 80vw;
		max-width: 80%;
		opacity: 0.06;
	}
}

/* === 11a. MODUŁ „GODZINY OTWARCIA" ========================= */

/* Dedykowany styling dla kolumny z godzinami otwarcia. Rozpoznajemy ją
 * STRUKTURALNIE — przez `:has(table.plan)` — bo ID kolumn Muffin Buildera
 * (mcb-column-inner-XXXX) są UNIKALNE PER-STRONA. Pierwotnie targetowaliśmy
 * `mcb-column-inner-817bbae6e` z home, ale na podstronach ten sam widget ma
 * inne hashe (np. 40926b86c na Kontakcie), więc moduł stylował się tylko
 * na froncie. `:has(table.plan)` jest stabilne między stronami — `table.plan`
 * to jedyny wid get używający tej klasy w treści.
 *
 * Wsparcie `:has()` w przeglądarkach: Chrome 105+, Safari 15.4+, Firefox 121+
 * (>95% globalnie w 2026). Fallback dla starszych: domyślny BeTheme styling
 * (białe tekst na ciemnym tle) — nie wygląda zepsuty, tylko mniej ozdobny.
 *
 * Każda komórka <td> z bazy ma inline `style="color:#fff"` — wygrywa nad
 * klasami, więc kolor `td:last-child` (godziny) musi być nadbity przez
 * !important. Reszta dziedziczy biel z inline-stylów (co tu pasuje). */

.amefit-modernized .mcb-column-inner:has(table.plan) {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--af-radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 12px 32px -16px rgba(0, 0, 0, 0.4);
	position: relative;
	overflow: hidden;
}

/* Subtelny accent glow w lewym górnym narożniku — premium feel */
.amefit-modernized .mcb-column-inner:has(table.plan)::before {
	content: "";
	position: absolute;
	top: -40%;
	left: -20%;
	width: 240px;
	height: 240px;
	background: radial-gradient(circle, rgba(207, 2, 97, 0.18) 0%, transparent 70%);
	pointer-events: none;
}

/* Override align_center wymuszanego przez page-builder (dla tej kolumny) */
.amefit-modernized .mcb-column-inner:has(table.plan) .column_attr.align_center {
	text-align: left !important;
}

/* H4 — tytuł z ikoną zegarka (mask SVG, kolor akcentu) */
.amefit-modernized .mcb-column-inner:has(table.plan) h4 {
	display: flex !important;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.25rem !important;
	padding: 0 0 0.85rem !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1 !important;
	color: #ffffff !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
	z-index: 1;
}

/* Override fazy 2 — nie dorzucaj kreski 32×2 pod widget-title (tu mamy
 * pełną kreskę border-bottom, kolejna byłaby zaduplikowana) */
.amefit-modernized .mcb-column-inner:has(table.plan) h4::after {
	display: none;
}

/* Ikona zegarka jako pseudo-element z mask (kolor follow currentColor magenta) */
.amefit-modernized .mcb-column-inner:has(table.plan) h4::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: var(--af-color-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center / contain no-repeat;
	display: inline-block;
}

/* Tabela — kompletny restyle do flex-layout (override inline width: 200px) */
.amefit-modernized .mcb-column-inner:has(table.plan) table.plan {
	display: block;
	width: 100%;
	margin: 0;
	border: none;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	position: relative;
	z-index: 1;
}

.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tbody {
	display: block;
	width: 100%;
}

.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
	transition: padding-left 280ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr:last-child {
	border-bottom: none;
}

/* Lekka mikro-interakcja: hover wiersza przesuwa go w prawo */
.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr:hover {
	padding-left: 6px;
}

/* Reset td (override inline width:200px + spójna typografia) */
.amefit-modernized .mcb-column-inner:has(table.plan) table.plan td {
	width: auto !important;
	max-width: none;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 0.95rem !important;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

/* Lewa kolumna (dzień) — z ikonką kalendarza w kolorze akcentu */
.amefit-modernized .mcb-column-inner:has(table.plan) table.plan td:first-child::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: var(--af-color-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") center / contain no-repeat;
	display: inline-block;
	transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr:hover td:first-child::before {
	transform: scale(1.15) rotate(-6deg);
}

/* Prawa kolumna (godziny) — bold, tabular-nums, biel pełna */
.amefit-modernized .mcb-column-inner:has(table.plan) table.plan td:last-child {
	color: #ffffff !important;
	font-weight: 700 !important;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Mobile — zwartszy odstęp, mniejsza ikona ale czytelnie */
@media (max-width: 599px) {
	.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr {
		flex-wrap: wrap;
		gap: 0.25rem;
	}
	.amefit-modernized .mcb-column-inner:has(table.plan) table.plan td:first-child {
		flex: 1 1 60%;
	}
	.amefit-modernized .mcb-column-inner:has(table.plan) table.plan td:last-child {
		flex: 0 0 auto;
	}
}

/* Reduced motion — zerujemy mikro-interakcje hover */
@media (prefers-reduced-motion: reduce) {
	.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr:hover {
		padding-left: 0;
	}
	.amefit-modernized .mcb-column-inner:has(table.plan) table.plan tr:hover td:first-child::before {
		transform: none;
	}
}

/* === 11d. KADRA — kart trenerów (page_id=2732) ============= */

/* Strona Kadra ma 14 trenerów, każdy w pełnoszerokim Muffin Builder
 * column_attr ze strukturą:
 *   <h4><strong>Imię</strong></h4>     — nazwisko/imię trenera
 *   <p><strong>Instruktor:</strong></p>  — label
 *   <p>...</p>                            — lista zajęć (z <span> font-weight 400)
 *   <p> </p>                              — separator
 *   <p><strong>Doświadczenie:</strong></p>  — label
 *   <p>...bio...</p>                      — wieloparagrafowy bio
 *
 * Cel: zamienić surowy "wall of text" w eleganckie karty trenerów.
 * Skopowane do body.page-id-2732 — pewność że nic poza Kadrą nie
 * dziedziczy ostrego stylowania column_attr. */

body.page-id-2732 .mcb-section .mcb-section-inner > .mcb-wrap.one,
body.page-id-2732 .mcb-section .mcb-section-inner > .mcb-wrap.laptop-one {
	max-width: 980px;
	margin-inline: auto;
}

/* Każdy column_attr na Kadrze, który ma wewnątrz `<h4><strong>` (nazwisko)
 * + `<p><strong>` (label Instruktor) = karta trenera. */
body.page-id-2732 .column_attr:has(> h4 strong):has(> p strong) {
	background: #ffffff;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-radius: var(--af-radius-lg, 16px);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	box-shadow:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 12px 32px -8px rgba(22, 25, 34, 0.1);
	position: relative;
	overflow: hidden;
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Akcent magentowy po lewej stronie karty — bookmark style */
body.page-id-2732 .column_attr:has(> h4 strong):has(> p strong)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: linear-gradient(
		180deg,
		var(--af-color-accent) 0%,
		var(--af-color-accent-hover) 60%,
		transparent 100%
	);
}

body.page-id-2732 .column_attr:has(> h4 strong):has(> p strong):hover {
	transform: translateY(-3px);
	box-shadow:
		0 2px 4px rgba(22, 25, 34, 0.06),
		0 24px 48px -12px rgba(22, 25, 34, 0.18);
}

/* === Nazwisko trenera (h4) ================================ */

body.page-id-2732 .column_attr > h4[style*="text-align: center"],
body.page-id-2732 .column_attr > h4 {
	text-align: left !important;
	margin: 0 0 1.5rem !important;
	padding: 0 0 1rem !important;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: var(--af-color-text, #161922) !important;
	border-bottom: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	position: relative;
}

body.page-id-2732 .column_attr > h4 > strong {
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Drobna kreska akcentowa pod nazwiskiem — subtelny brand stamp */
body.page-id-2732 .column_attr > h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 48px;
	height: 3px;
	background: var(--af-color-accent);
	border-radius: 2px;
}

/* === Labele "Instruktor:" / "Doświadczenie:" ============== */

/* JS dokleja klasę `af-trainer-label` do każdego <p> którego widoczny
 * tekst to "Instruktor:" lub "Doświadczenie:" — niezależnie czy <strong>
 * siedzi bezpośrednio w <p>, czy w <span> (różne warianty edycji
 * page-builderowej). */

body.page-id-2732 .column_attr > p.af-trainer-label {
	margin: 1.5rem 0 0.5rem !important;
	padding: 0 !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--af-color-accent) !important;
	line-height: 1 !important;
}

body.page-id-2732 .column_attr > p.af-trainer-label > *,
body.page-id-2732 .column_attr > p.af-trainer-label strong {
	font-weight: 700 !important;
	color: inherit !important;
	font-size: inherit !important;
}

/* Pierwszy label (Instruktor:) bez górnego marginesu */
body.page-id-2732 .column_attr > h4 + p.af-trainer-label {
	margin-top: 0 !important;
}

/* === Treść paragrafów (lista zajęć + bio) ================= */

body.page-id-2732 .column_attr > p:not(:has(> strong)) {
	margin: 0 0 0.85rem !important;
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: var(--af-color-text, #161922) !important;
}

/* Span'y z inline `font-weight: 400` w bio — zostaje normalna waga */
body.page-id-2732 .column_attr > p > span[style*="font-weight: 400"] {
	font-weight: 400 !important;
}

/* Lista zajęć (po Instruktor:) — JS rozbija ją na chipy `.af-prof`.
 * Domyślny styling dla nieprzetworzonych (np. starszego cache lub gdy JS off). */
body.page-id-2732 .column_attr > p:has(> strong:only-child) + p {
	font-size: 1.05rem !important;
	line-height: 1.6 !important;
	color: var(--af-color-text-muted, #5f6470) !important;
	font-weight: 500;
}

/* === KADRA — chipy zajęć (Instruktor:) — CSS dla af-prof === */

/* Kontener listy chipów — zastępuje plain p z separatorami `|` */
body.page-id-2732 p.af-prof-list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.6rem !important;
	margin: 0 0 0.5rem !important;
	padding: 0 !important;
	font-size: inherit !important;
	color: inherit !important;
	font-weight: inherit !important;
}

/* Pojedynczy chip */
body.page-id-2732 .af-prof {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(207, 2, 97, 0.18);
	border-radius: 999px;
	background: rgba(207, 2, 97, 0.05);
	color: var(--af-color-text, #161922);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	transition: background-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		border-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 220ms cubic-bezier(0.65, 0, 0.35, 1);
	cursor: default;
}

body.page-id-2732 .af-prof:hover {
	background: rgba(207, 2, 97, 0.1);
	border-color: var(--af-color-accent);
	transform: translateY(-1px);
}

body.page-id-2732 .af-prof svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--af-color-accent);
	stroke: currentColor;
	fill: none;
}

/* Wymuszamy kolor stroke na elementach polyline/path/circle —
 * BeTheme czasem nadpisuje currentColor */
body.page-id-2732 .af-prof svg polyline,
body.page-id-2732 .af-prof svg path,
body.page-id-2732 .af-prof svg circle,
body.page-id-2732 .af-prof svg polygon,
body.page-id-2732 .af-prof svg line {
	stroke: var(--af-color-accent);
	fill: none;
}

body.page-id-2732 .af-prof__label {
	display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-2732 .af-prof:hover {
		transform: none;
	}
}

/* "Pusty" paragraf między Instruktor: i Doświadczenie: — schowaj */
body.page-id-2732 .column_attr > p:empty,
body.page-id-2732 .column_attr > p:has(> br:only-child) {
	display: none;
}

/* Paragraf zawierający tylko spację (`<p> </p>`) — niestety browser
 * traktuje go jako niepuste; ukrywam przez heuristikę: zerowa
 * margines + minimalna wysokość + brak treści wizualnej. */
body.page-id-2732 .column_attr > p {
	min-height: 0;
}

/* === Mobile responsywność ================================== */

@media (max-width: 767px) {
	body.page-id-2732 .column_attr:has(> h4 strong):has(> p strong) {
		padding: 1.5rem 1.25rem;
		margin-bottom: 1.25rem;
	}
	body.page-id-2732 .column_attr > h4 {
		font-size: clamp(1.4rem, 5vw, 1.75rem) !important;
	}
}

/* === Reduced motion ======================================== */

@media (prefers-reduced-motion: reduce) {
	body.page-id-2732 .column_attr:has(> h4 strong):has(> p strong):hover {
		transform: none;
	}
}

/* === 11e. CENNIK (page_id=2730) — taby + tabele cen ======== */

/* BeTheme renderuje cennik jako jQuery UI tabs (`.jq-tabs.tabs_wrapper`).
 * Każda zakładka = jedna usługa (Siłownia / Zajęcia / Treningi Personalne /
 * Vacu Activ / Roll Shape / Vacu Activ + Roll Shape / Masaże).
 * Pod każdym tabem tabela `.cennik2kol` z cenami.
 *
 * Cel: spójne z resztą strony — magentowy akcent, miękkie cienie, czytelne
 * ceny, taby jak modern pills. Treść nietknięta (CSS only). */

/* === Wrapper sekcji cennika === */

body.page-id-2730 .jq-tabs.tabs_wrapper {
	max-width: 1100px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: var(--af-radius-lg, 16px);
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	box-shadow:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 16px 40px -12px rgba(22, 25, 34, 0.12);
	overflow: hidden;
}

/* === Tab navigation (7 zakładek) === */

body.page-id-2730 .jq-tabs.tabs_wrapper > ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-bottom: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	background: #fafafa;
}

body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li {
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	list-style: none !important;
	position: relative;
}

body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li::before,
body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li::after {
	display: none !important;
}

body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li > a {
	display: block;
	padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(0.75rem, 1.2vw, 1.4rem);
	background: transparent;
	color: var(--af-color-text-muted, #5f6470);
	font-size: clamp(0.78rem, 1vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: none;
	border-bottom: 3px solid transparent;
	transition: color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		background-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		border-color 220ms cubic-bezier(0.65, 0, 0.35, 1);
	cursor: pointer;
	white-space: nowrap;
	border-radius: 0 !important;
}

body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li > a:hover {
	color: var(--af-color-accent, #cf0261);
	background: rgba(207, 2, 97, 0.04);
}

body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li.ui-tabs-active > a,
body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li.ui-state-active > a,
body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li.active > a {
	color: var(--af-color-accent, #cf0261);
	background: #ffffff;
	border-bottom-color: var(--af-color-accent, #cf0261);
}

body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li > a:focus-visible {
	outline: 2px solid var(--af-color-accent);
	outline-offset: -2px;
}

/* Mobile: poziomy scroll zamiast wrapping.
   BeTheme responsive.css:1215 ma `.ui-tabs .ui-tabs-nav li{width:100%!important}`
   — wymuszamy intrinsic width żeby tabki układały się jak pille. */
@media (max-width: 767px) {
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 6px;
		padding: 10px 16px !important;
		background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
	}
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul::-webkit-scrollbar {
		display: none;
	}
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li {
		flex: 0 0 auto !important;
		width: auto !important;
		float: none !important;
		border: 0 !important;
	}
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li > a {
		padding: 12px 18px !important;
		font-size: 13px !important;
		border-radius: 999px !important;
		border-bottom: 0 !important;
		min-height: 44px;
		background: rgba(0, 0, 0, 0.03) !important;
	}
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li > a:hover {
		background: rgba(207, 2, 97, 0.08) !important;
	}
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li.ui-tabs-active > a,
	body.page-id-2730 .jq-tabs.tabs_wrapper > ul > li.ui-state-active > a {
		background: var(--af-color-accent, #cf0261) !important;
		color: #ffffff !important;
		border-bottom: 0 !important;
		box-shadow: 0 4px 12px -2px rgba(207, 2, 97, 0.35);
	}
}

/* === Tab panel (zawartość zakładki) === */

body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] {
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem);
	background: #ffffff;
	color: var(--af-color-text);
	border: none !important;
}

/* Paragrafy z opisem nad tabelą — schludny intro */
body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] p {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--af-color-text);
}

body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] p:has(strong:only-child),
body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] > h3,
body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] > h4 {
	font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em;
	color: var(--af-color-text) !important;
	margin: 0 0 1rem !important;
}

/* Drobny "info banner" dla paragrafu z linkiem "Pełny opis zalet…" */
body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] p:has(a) a {
	color: var(--af-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] p:has(a) a:hover {
	color: var(--af-color-accent-hover);
	text-decoration-thickness: 2px;
}

/* === Tabela cen .cennik2kol === */

body.page-id-2730 table.cennik2kol {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1.5rem 0 0.5rem;
	background: transparent;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-radius: var(--af-radius-md, 12px);
	overflow: hidden;
}

body.page-id-2730 table.cennik2kol thead tr {
	background: linear-gradient(180deg, #fafafa, #f4f4f6);
}

body.page-id-2730 table.cennik2kol thead tr th,
body.page-id-2730 table.cennik2kol thead tr td {
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: var(--af-color-text-muted, #5f6470) !important;
	background: linear-gradient(180deg, #fafafa, #f4f4f6) !important;
	border-bottom: 2px solid var(--af-color-border, rgba(22, 25, 34, 0.08)) !important;
}

body.page-id-2730 table.cennik2kol td {
	padding: 0.95rem 1.25rem !important;
	border: none !important;
	border-bottom: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.06)) !important;
	background: transparent !important;
	color: var(--af-color-text) !important;
	font-size: 0.98rem;
	line-height: 1.5;
	vertical-align: middle;
	transition: background-color 180ms cubic-bezier(0.65, 0, 0.35, 1);
}

body.page-id-2730 table.cennik2kol tr:last-child td {
	border-bottom: none !important;
}

body.page-id-2730 table.cennik2kol tr:hover td {
	background: rgba(207, 2, 97, 0.025) !important;
}

/* Pierwsza kolumna (Rodzaj/Nazwa) — bold, czytelnie */
body.page-id-2730 table.cennik2kol tbody td:first-child {
	font-weight: 700;
	color: var(--af-color-text) !important;
	white-space: normal;
}

/* Kolumny środkowe (Cena) — magenta, tabular-nums, bold */
body.page-id-2730 table.cennik2kol tbody td:nth-child(2) {
	color: var(--af-color-accent, #cf0261) !important;
	font-weight: 800;
	font-size: 1.05rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* W tabelach z 3 kolumnami (Nazwa | Cena | Opis) trzecia kolumna = opis */
body.page-id-2730 table.cennik2kol tbody td:nth-child(3) {
	color: var(--af-color-text-muted, #5f6470) !important;
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Wiersze "puste" (tylko niełamiące spacje) — schowane */
body.page-id-2730 table.cennik2kol tr:has(td:only-child:empty),
body.page-id-2730 table.cennik2kol tr:not(:has(td)) {
	display: none;
}


/* Mobile — zwarty padding, mniejsza typografia */
@media (max-width: 599px) {
	body.page-id-2730 table.cennik2kol td {
		padding: 0.75rem 0.85rem !important;
		font-size: 0.92rem;
	}
	body.page-id-2730 table.cennik2kol tr:not(:first-child) td:nth-child(2) {
		font-size: 1rem;
	}
}

/* === Listy/wzmocnienie pod tabelami (50% zniżki, opisy) === */

body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] {
	font-size: 1rem;
}

/* Drobny info-banner styling dla paragrafów z "*" / "Karnet ważny" */
body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] p:not(:has(strong)):has(em),
body.page-id-2730 .jq-tabs.tabs_wrapper > div[id^="tab-"] p em {
	color: var(--af-color-text-muted, #5f6470);
	font-size: 0.92rem;
}

/* === 11g. REGULAMINY (page_id=3740) — PDF download cards == */

/* Strona Regulaminy ma 2 linki do PDF-ów (KORZYSTANIE Z SIŁOWNI,
 * SPRZEDAŻ KARNETÓW ONLINE). Stylujemy jako self-contained download-cards
 * z ikonką dokumentu, eyebrowem, tytułem i strzałką pobierania.
 *
 * Scope: body.page-id-3740. */

/* Kontener strony Regulaminy — max-width 1320px wycentrowany */
body.page-id-3740 .mcb-section .mcb-section-inner {
	max-width: 1320px;
	margin-inline: auto;
}

/* mcb-wrap-inner — flex layout zgodnie z prośbą użytkownika.
 * Oba PDF-y siedzą w jednej kolumnie BeTheme (one-second), więc layout
 * 2-kolumnowy realizujemy WEWNĄTRZ kolumny — na poziomie column_attr. */
body.page-id-3740 .mcb-wrap-inner:has(p a[href$=".pdf"]) {
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	align-self: stretch;
	justify-content: center;
}

/* Kolumna BeTheme one-second poszerzona do 100% — bo oba PDF-y są w niej. */
body.page-id-3740 .mcb-wrap-inner:has(p a[href$=".pdf"]) > .column,
body.page-id-3740 .mcb-wrap-inner:has(p a[href$=".pdf"]) > .mcb-column {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

/* Column_attr — flex container z 2 boxami PDF (każdy 50% z gap 50px),
 * wycentrowane na środku strony. */
body.page-id-3740 .column_attr:has(p a[href$=".pdf"]) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 50px;
	padding: 0 1rem;
	box-sizing: border-box;
}

/* Każdy paragraf z PDF-em = flex item; szerokość rośnie naturalnie pod
 * wpływem gap'a i justify-content: center kontenera column_attr. */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) {
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	display: flex;
	height: auto;
}

@media (max-width: 599px) {
	body.page-id-3740 .column_attr:has(p a[href$=".pdf"]) {
		gap: 1rem;
		flex-direction: column;
	}
}

/* Ukryj duplikat H2 "Regulaminy" — page-header już go pokazuje */
body.page-id-3740 .column_attr > h2 {
	display: none;
}

/* Schowaj puste paragrafy (<p>&nbsp;</p> separator z page-buildera) */
body.page-id-3740 .column_attr > p:empty,
body.page-id-3740 .column_attr > p:has(> br:only-child) {
	display: none;
}

/* Karta PDF — paragraf zawierający link do PDF-a staje się klikalną kartą.
 * Z grid layoutem (2 cols) margin-bottom redundantny — kasujemy. */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit;
	background: transparent;
	border: none;
	height: 100%;
	display: flex;
}

/* Sam link rozciągnięty na całą szerokość karty + flexbox layout */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"] {
	display: flex !important;
	width: 100%;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2rem);
	background: #ffffff;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-left: 4px solid var(--af-color-accent, #cf0261);
	border-radius: var(--af-radius-lg, 16px);
	color: var(--af-color-text, #161922) !important;
	text-decoration: none !important;
	box-shadow:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 12px 32px -8px rgba(22, 25, 34, 0.1);
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
		border-left-width 280ms cubic-bezier(0.16, 1, 0.3, 1),
		background-color 280ms cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.3;
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	text-transform: none;
}

/* Override wewnętrznych span'ów które miały inline color */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"] > span,
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) > span > a {
	color: inherit !important;
	text-decoration: inherit !important;
}

/* Ikona dokumentu PDF — pseudo-element ::before */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]::before {
	content: "";
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	background-color: var(--af-color-accent, #cf0261);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><path d='M9 13h6'/><path d='M9 17h6'/></svg>") center / 28px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><path d='M9 13h6'/><path d='M9 17h6'/></svg>") center / 28px no-repeat;
	background-image: var(--mask-fallback, none);
	border-radius: 12px;
	background-color: var(--af-color-accent, #cf0261);
	box-shadow:
		0 6px 16px -4px rgba(207, 2, 97, 0.4),
		inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Strzałka pobierania — ::after */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]::after {
	content: "";
	margin-left: auto;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background-color: var(--af-color-text-muted, #5f6470);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center / contain no-repeat;
	transition: background-color 280ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover karty */
body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]:hover {
	transform: translateY(-3px);
	box-shadow:
		0 2px 4px rgba(22, 25, 34, 0.06),
		0 24px 48px -12px rgba(22, 25, 34, 0.18);
	border-left-width: 6px;
	background-color: rgba(207, 2, 97, 0.02);
}

body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]:hover::before {
	background-color: var(--af-color-accent-hover, #b00254);
}

body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]:hover::after {
	background-color: var(--af-color-accent, #cf0261);
	transform: translateY(2px);
}

body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]:focus-visible {
	outline: 3px solid var(--af-color-accent);
	outline-offset: 4px;
}

/* Mobile — zwartszy padding, mniejsze ikony */
@media (max-width: 599px) {
	body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"] {
		padding: 1rem 1.1rem;
		gap: 0.85rem;
	}
	body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]::before {
		width: 38px;
		height: 38px;
		mask-size: 22px;
		-webkit-mask-size: 22px;
	}
	body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]::after {
		width: 22px;
		height: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]:hover {
		transform: none;
	}
	body.page-id-3740 .column_attr > p:has(a[href$=".pdf"]) a[href$=".pdf"]:hover::after {
		transform: none;
	}
}

/* === 11h. KONTAKT (page_id=2746) — custom layout ============ */

/* Ukryj oryginalną sparse treść z page-buildera (H3 + 4 paragrafy
 * z adresem/tel/emailem) — nasz custom contact-layout zastępuje ją w pełni. */
body.page-id-2746 #Content > .content_wrapper > .sections_group > .entry-content > .mfn-builder-content,
body.page-id-2746 #Content .mfn-builder-content > section.mcb-section:not(:has(.af-contact)),
body.page-id-2746 .section.the_content.no_content {
	display: none !important;
}

/* Override: nasza sekcja af-contact siedzi PRZED .mfn-builder-content (przez
 * mfn_hook_content_before priorytet 8); builder-content jest globalnie ukryty
 * dla tej strony żeby nie pokazywał ani sparse treści ani dark widgets */
body.page-id-2746 #Content .mfn-builder-content {
	display: none !important;
}

/* === Custom contact section layout === */

.amefit-modernized .af-contact {
	background: #fafafa;
	padding-block: clamp(3rem, 6vw, 5rem);
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.amefit-modernized .af-contact__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.amefit-modernized .af-contact__intro {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.amefit-modernized .af-contact__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--af-color-accent);
	margin-bottom: 1rem;
}

.amefit-modernized .af-contact__title {
	font-size: clamp(2rem, 4vw, 3.25rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	color: var(--af-color-text, #161922) !important;
	margin: 0 0 1rem !important;
}

.amefit-modernized .af-contact__lead {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--af-color-text-muted, #5f6470);
	line-height: 1.6;
	margin: 0;
	white-space: nowrap;
}

/* Mobile/tablet: zezwalamy na zawijanie żeby nie wystawał poza viewport */
@media (max-width: 1023px) {
	.amefit-modernized .af-contact__lead {
		white-space: normal;
	}
}

/* === 2-column grid (info | form) === */

.amefit-modernized .af-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 899px) {
	.amefit-modernized .af-contact__grid {
		grid-template-columns: 1fr;
	}
}

/* === LEFT: info column === */

.amefit-modernized .af-contact__info {
	background: #ffffff;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-radius: var(--af-radius-lg, 16px);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 12px 32px -8px rgba(22, 25, 34, 0.1);
}

/* Lista kontaktów: adres, telefon, email */
.amefit-modernized .af-contact-list {
	list-style: none !important;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.amefit-modernized .af-contact-list__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.85rem 0.75rem;
	border-radius: var(--af-radius-md, 12px);
	transition: background-color 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .af-contact-list__item:hover {
	background-color: rgba(207, 2, 97, 0.04);
}

.amefit-modernized .af-contact-list__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(207, 2, 97, 0.08);
	color: var(--af-color-accent);
}

.amefit-modernized .af-contact-list__icon svg {
	color: var(--af-color-accent);
	stroke: currentColor;
}

.amefit-modernized .af-contact-list__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.amefit-modernized .af-contact-list__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--af-color-text-muted, #5f6470);
}

.amefit-modernized .af-contact-list__value {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--af-color-text, #161922) !important;
	text-decoration: none !important;
	transition: color 180ms cubic-bezier(0.65, 0, 0.35, 1);
	word-break: break-word;
}

.amefit-modernized .af-contact-list__value:hover {
	color: var(--af-color-accent) !important;
}

.amefit-modernized .af-contact-list__value--mono {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* === Godziny otwarcia w info-card === */

.amefit-modernized .af-contact-hours {
	margin-top: 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
}

.amefit-modernized .af-contact-hours__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.amefit-modernized .af-contact-hours__icon {
	display: inline-flex;
	color: var(--af-color-accent);
}

.amefit-modernized .af-contact-hours__title {
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: var(--af-color-text) !important;
	margin: 0 !important;
}

.amefit-modernized .af-contact-hours__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.amefit-modernized .af-contact-hours__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px dashed rgba(22, 25, 34, 0.08);
}

.amefit-modernized .af-contact-hours__row:last-child {
	border-bottom: none;
}

.amefit-modernized .af-contact-hours__row dt {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--af-color-text);
	margin: 0;
}

.amefit-modernized .af-contact-hours__row dd {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--af-color-text);
	margin: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* === Akcje (Grafik, FB, IG) === */

.amefit-modernized .af-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
}

.amefit-modernized .af-contact-action,
.amefit-modernized a.af-contact-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	border-radius: var(--af-radius-pill, 999px);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		color 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .af-contact-action--primary,
.amefit-modernized a.af-contact-action--primary {
	background: var(--af-color-accent);
	color: #ffffff !important;
	box-shadow: 0 6px 16px -4px rgba(207, 2, 97, 0.45);
}

.amefit-modernized .af-contact-action--primary:hover {
	background: var(--af-color-accent-hover);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -4px rgba(207, 2, 97, 0.55);
}

.amefit-modernized .af-contact-action--secondary,
.amefit-modernized a.af-contact-action--secondary {
	background: rgba(22, 25, 34, 0.05);
	color: var(--af-color-text) !important;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
}

.amefit-modernized .af-contact-action--secondary:hover {
	background: var(--af-color-text);
	color: #ffffff !important;
	transform: translateY(-2px);
	border-color: var(--af-color-text);
}

/* === RIGHT: form column === */

.amefit-modernized .af-contact__form {
	background: #ffffff;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-radius: var(--af-radius-lg, 16px);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 12px 32px -8px rgba(22, 25, 34, 0.1);
}

.amefit-modernized .af-contact__form-head {
	margin-bottom: 1.5rem;
}

.amefit-modernized .af-contact__form-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--af-color-accent);
	margin-bottom: 0.75rem;
}

.amefit-modernized .af-contact__form-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.1 !important;
	color: var(--af-color-text) !important;
	margin: 0 0 0.5rem !important;
}

.amefit-modernized .af-contact__form-lead {
	font-size: 0.95rem;
	color: var(--af-color-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* CF7 form override - tylko w obrębie naszego layoutu */

.amefit-modernized .af-contact__form .wpcf7 {
	margin: 0;
}

.amefit-modernized .af-contact__form .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1rem;
}

.amefit-modernized .af-contact__form .wpcf7-form > .column,
.amefit-modernized .af-contact__form .wpcf7-form > div.column {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	padding: 0 !important;
}

.amefit-modernized .af-contact__form .wpcf7-form > .column.one {
	grid-column: span 2;
}

.amefit-modernized .af-contact__form .wpcf7-form .hidden-fields-container {
	display: none;
}

.amefit-modernized .af-contact__form .wpcf7-form p {
	margin: 0 !important;
}

.amefit-modernized .af-contact__form .wpcf7 input[type="text"],
.amefit-modernized .af-contact__form .wpcf7 input[type="email"],
.amefit-modernized .af-contact__form .wpcf7 input[type="tel"],
.amefit-modernized .af-contact__form .wpcf7 textarea {
	width: 100%;
	padding: 0.85rem 1rem !important;
	border: 1px solid var(--af-color-border-strong, rgba(22, 25, 34, 0.16)) !important;
	border-radius: var(--af-radius-sm, 8px);
	background: #ffffff !important;
	color: var(--af-color-text) !important;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 180ms cubic-bezier(0.65, 0, 0.35, 1),
		box-shadow 180ms cubic-bezier(0.65, 0, 0.35, 1);
	box-shadow: none;
}

.amefit-modernized .af-contact__form .wpcf7 textarea {
	min-height: 130px;
	resize: vertical;
}

.amefit-modernized .af-contact__form .wpcf7 input:focus,
.amefit-modernized .af-contact__form .wpcf7 textarea:focus {
	border-color: var(--af-color-accent) !important;
	box-shadow: 0 0 0 4px rgba(207, 2, 97, 0.12) !important;
	outline: none;
}

.amefit-modernized .af-contact__form .wpcf7 input::placeholder,
.amefit-modernized .af-contact__form .wpcf7 textarea::placeholder {
	color: var(--af-color-text-soft, #8a8f99);
}

/* Submit button */
.amefit-modernized .af-contact__form .wpcf7-submit,
.amefit-modernized .af-contact__form .wpcf7 input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	width: auto !important;
	padding: 0.95rem 1.75rem !important;
	background: var(--af-color-accent) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--af-radius-sm, 8px);
	font-family: inherit;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	box-shadow: 0 6px 18px -4px rgba(207, 2, 97, 0.45);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background-color 220ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.amefit-modernized .af-contact__form .wpcf7-submit:hover {
	background: var(--af-color-accent-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -8px rgba(207, 2, 97, 0.55);
}

.amefit-modernized .af-contact__form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: var(--af-radius-sm);
	border-width: 1px;
	font-size: 0.92rem;
}

/* Mobile: single column form */
@media (max-width: 599px) {
	.amefit-modernized .af-contact__form .wpcf7-form {
		grid-template-columns: 1fr;
	}
	.amefit-modernized .af-contact__form .wpcf7-form > .column.one {
		grid-column: span 1;
	}
	.amefit-modernized .af-contact__form .wpcf7-form > .column.one-second {
		grid-column: span 1;
	}
}

/* === MAP === */

.amefit-modernized .af-contact__map {
	position: relative;
	border-radius: var(--af-radius-lg, 16px);
	overflow: hidden;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	box-shadow:
		0 1px 2px rgba(22, 25, 34, 0.04),
		0 12px 32px -8px rgba(22, 25, 34, 0.12);
	line-height: 0;
}

.amefit-modernized .af-contact__map iframe {
	display: block;
	width: 100%;
	height: clamp(300px, 50vh, 460px);
	border: 0;
}

.amefit-modernized .af-contact__map-link {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	border-radius: var(--af-radius-pill, 999px);
	background: #ffffff;
	color: var(--af-color-text) !important;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.25);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		color 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

.amefit-modernized .af-contact__map-link:hover {
	background: var(--af-color-accent);
	color: #ffffff !important;
	transform: translateY(-2px);
}

.amefit-modernized .af-contact__map-link svg {
	color: currentColor;
	stroke: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.amefit-modernized .af-contact-action:hover,
	.amefit-modernized .af-contact__form .wpcf7-submit:hover,
	.amefit-modernized .af-contact__map-link:hover {
		transform: none;
	}
}

/* === 11f. RESET legacy BeTheme inset shadow w tabelach ===== */

/* BeTheme'owy `be.css` ma w linii 4074 globalną regułę:
 *   table tr:first-child td { box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.06); }
 * To stary styling z czasów "skewmorphic header gradient", wygląda brzydko
 * w nowoczesnym designie. Resetujemy w obrębie naszych stylizowanych
 * kontekstów. Globalny reset (.amefit-modernized) — bezpieczny, bo we
 * wszystkich naszych tabelach (Zajęcia / Cennik / Godziny / Cennik tab content)
 * mamy własne header rule jeśli go potrzebujemy. */
.amefit-modernized table tr:first-child td,
.amefit-modernized table tr:first-child th {
	box-shadow: none;
}

/* === 12. POLISH GLOBALNY =================================== */

/* Pusta sekcja "page-footer" z BeTheme — kontener dla page-pagera
 * (next/prev page). Na stronach BeTheme'owych prawie zawsze pusty,
 * a strukturalnie zajmuje sporo miejsca (margin-top sekcji + wrapper).
 * Schowaj globalnie — nie używamy paginacji stron. */
.amefit-modernized .section.section-page-footer {
	display: none;
}


/* Hover tabel cennika i innych nieinteraktywnych — niech nie wyglądają
   jak coś klikalnego (faza 1 dawała im hover; tu cofamy dla generycznych
   tabel nie-zajęciowych) */
.amefit-modernized table:not(.tabela-zajecia):not(.plan) tbody tr:hover td {
	background: rgba(22, 25, 34, 0.025);
}

/* Subheader na podstronach (poza Zajęciami) — większa skala tytułu */
.amefit-modernized:not(.amefit-classes-page) #Subheader .title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.amefit-modernized:not(.amefit-classes-page) #Subheader {
	padding: clamp(56px, 10vw, 120px) 0 clamp(40px, 6vw, 72px);
}

/* === 13. REDUCED MOTION (ROZSZERZENIE) ===================== */

@media (prefers-reduced-motion: reduce) {
	.amefit-modernized.menu-mobile #Top_bar #menu ul.menu > li {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.amefit-modernized.home #Content > .section:first-of-type::before {
		/* zostaje overlay — to nie animacja, tylko statyczny gradient */
	}
}

/* === 14. POPRAWKI Z AUDYTU MOBILE (2026-05-06) ============= */

/* 14.1 KRYTYCZNE — hamburger przykrywany przez topbar.
   Przyczyna: BeTheme nadaje #Top_bar z-index:30. To tworzy stacking context,
   w którym hamburger (z:250 fixed) jest "uwięziony". Topbar `.af-topbar`
   ma z-index:100, więc na poziomie root: 100 > 30 → topbar wygrywa.
   Fix: wynieść #Top_bar nad topbar przez z-index:200 (>100). Hamburger w
   środku Top_bar może wtedy normalnie z-indexować się przy potrzebie.
   Zachowujemy BeTheme'owe display/position żeby nie zepsuć desktop layoutu. */
.amefit-modernized #Top_bar {
	z-index: 200;
}

/* Mobile: hamburger w sticky variancie BeTheme'owym domyślnie idzie LEFT,
   przesuwamy go w PRAWO i zostawiamy padding-right w topbar/headerze, żeby
   nie nakładał się na tekst email/logo. */
@media (max-width: 767px) {
	.amefit-modernized #Top_bar a.responsive-menu-toggle.is-sticky {
		top: 30px;
		left: auto;
		right: 10px;
	}
	.amefit-modernized .af-topbar__inner {
		padding-right: 60px;
	}
}

/* 14.2 KRYTYCZNE — kontrast list w Muffin Builder column_attr.
   Lighthouse: foreground #737e86 na białym = ratio 4.15 (poniżej 4.5).
   #5a646b na białym = ratio 5.93 — w granicach AA. */
.amefit-modernized .column_attr ul li,
.amefit-modernized .column_attr ul li strong,
.amefit-modernized .column_attr ol li,
.amefit-modernized .column_attr ol li strong {
	color: #5a646b;
}

/* 14.3 KRYTYCZNE — search_wrapper z width:600px na <412px viewport.
   Element wystawał poza viewport o 188-240 px na mobile. */
.amefit-modernized .search_wrapper {
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
}

/* 14.4 WAŻNE — tap-targety topbara (WCAG 2.5.5 AAA: 44×44 px).
   Padding rozszerza tap-area bez pogrubiania widocznego topbara
   (rozkłada się w obrębie .af-topbar__inner gradient). */
.amefit-modernized .af-topbar__link {
	padding: 15px 4px;
	min-height: 44px;
	margin: -10px 0;
}

.amefit-modernized .af-topbar__social-link {
	width: 44px;
	height: 44px;
	margin: -7px 0;
}

/* Min tap-area tylko gdy hamburger jest faktycznie wyświetlany (mobile).
   BeTheme: be.css ustawia display:none na desktop, włącza go w media query
   <767px. NIE nadpisujemy display tutaj — chroni desktop layout. */
@media (max-width: 767px) {
	.amefit-modernized #Top_bar a.responsive-menu-toggle {
		min-width: 44px;
		min-height: 44px;
		text-align: center;
	}
}

/* 14.5 WAŻNE — cookie bar zasłaniający 17% viewportu na Galaxy S22.
   Mniejsze padding/font tylko na <=480 px — pokazuje 2 wiersze zamiast 4. */
@media (max-width: 480px) {
	#cookie-law-info-bar {
		font-size: 13px !important;
		padding: 10px 14px !important;
		line-height: 1.4 !important;
	}
	#cookie-law-info-bar .cli-bar-message {
		display: inline;
	}
	#cookie-law-info-bar a.cli_action_button,
	#cookie-law-info-bar #cookie_action_close_header {
		padding: 8px 16px !important;
		font-size: 13px !important;
		margin-top: 6px !important;
	}
}

/* 14.6 DROBNE — slider doty <44 px touch-area.
   Padding-around 8 px + box-sizing:content-box → tap-area 40×40
   bez zmiany wyglądu doty (wciąż 24×24 widoczne, 4px core po fazie 4). */
.amefit-modernized .af-slider__dot {
	padding: 8px;
	box-sizing: content-box;
	background-clip: content-box;
	-webkit-background-clip: content-box;
}

/* === 15. SEKCJA "HONORUJEMY KARTY" — 2-kol mobile ============= */

/* JS w visual.js taguje wrap zawierający H4 "Honorujemy karty" klasą
   af-partner-cards. Tu narzucamy 2-kol grid na mobile, równe boxy. */
@media (max-width: 767px) {
	.amefit-modernized .af-partner-cards .mcb-wrap-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 0 12px;
	}

	/* Kolumna z H4 "Honorujemy karty" (jedyny .column_column wśród rodzeństwa)
	   — full width nad wszystkimi obrazkami */
	.amefit-modernized .af-partner-cards .mcb-wrap-inner > .column.column_column {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	/* Kolumny z obrazkami: równe wymiary, biały kontener z lekkim cieniem */
	.amefit-modernized .af-partner-cards .mcb-wrap-inner > .column.column_image {
		margin: 0;
		float: none;
		width: auto;
	}
	.amefit-modernized .af-partner-cards .mcb-wrap-inner > .column.column_image .image_frame {
		margin: 0;
	}
	.amefit-modernized .af-partner-cards .mcb-wrap-inner > .column.column_image .image_wrapper {
		aspect-ratio: 16 / 10;
		background: #ffffff;
		border: 1px solid var(--af-color-border);
		border-radius: var(--af-radius-md, 12px);
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
		width: 100%;
		height: auto;
	}
	.amefit-modernized .af-partner-cards .mcb-wrap-inner > .column.column_image .image_wrapper > img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
	}
}

/* === 16. KONTAKT — pille akcji 1+2 layout na mobile ============ */

/* Mobile (<480px): pierwszy rząd "Sprawdź grafik" full-width;
   drugi rząd Facebook + Instagram obok siebie. */
@media (max-width: 480px) {
	.amefit-modernized .af-contact-actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.amefit-modernized .af-contact-action--primary {
		grid-column: 1 / -1;
	}
}

/* === 17a. MOBILE DRAWER MENU (#Side_slide) — premium look ====== */

/* Tło kontenera: dark glass z subtelnym akcentem magenta od góry.
   UWAGA: nie zmieniamy `width` ani `right` — BeTheme'owy JS używa
   `data-width="250"` do animacji slidera. Zmiana szerokości łamie pozycję. */
#Side_slide {
	background:
		radial-gradient(900px 320px at 100% -10%, rgba(207, 2, 97, 0.18), transparent 60%),
		linear-gradient(180deg, #0e1014 0%, #0a0a0a 60%, #050505 100%) !important;
	background-color: #0a0a0a !important;
	box-shadow: -16px 0 48px -8px rgba(0, 0, 0, 0.55);
	border-bottom: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: rgba(255, 255, 255, 0.92);
}

/* Subtelna akcentowa linia pionowa po lewej krawędzi drawera */
#Side_slide::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent 0%, rgba(207, 2, 97, 0.55) 30%, rgba(207, 2, 97, 0.25) 70%, transparent 100%);
	pointer-events: none;
}

/* Overlay (backdrop) — przyciemnienie + blur */
#body_overlay {
	background: rgba(0, 0, 0, 0.55) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* X close — okrągły akcentowy przycisk */
#Side_slide .close-wrapper {
	height: 72px !important;
	padding: 16px 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
}

#Side_slide .close-wrapper a.close {
	float: none !important;
	margin: 0 !important;
	width: 44px !important;
	height: 44px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		border-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#Side_slide .close-wrapper a.close i {
	font-size: 18px !important;
	line-height: 1 !important;
	color: rgba(255, 255, 255, 0.9);
	transition: color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#Side_slide .close-wrapper a.close:hover,
#Side_slide .close-wrapper a.close:focus-visible {
	background: var(--af-color-accent);
	border-color: var(--af-color-accent);
	transform: scale(1.05);
	outline: none;
}

#Side_slide .close-wrapper a.close:hover i,
#Side_slide .close-wrapper a.close:focus-visible i {
	color: #fff;
	transform: rotate(90deg);
}

/* Menu — typografia, spacing, dividers */
#Side_slide #menu {
	margin: 0 !important;
	padding: 8px 0 28px;
}

#Side_slide #menu ul {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

#Side_slide #menu ul li {
	width: 100%;
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding: 0 !important;
	margin: 0 !important;
}

#Side_slide #menu > ul:last-child > li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#Side_slide #menu ul li a {
	display: flex !important;
	align-items: center;
	padding: 18px 24px !important;
	margin-right: 0 !important;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.2 !important;
	text-decoration: none;
	background: linear-gradient(90deg, transparent 0%, transparent 100%);
	transition: background-color 240ms cubic-bezier(0.65, 0, 0.35, 1),
		color 240ms cubic-bezier(0.65, 0, 0.35, 1),
		padding-left 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
}

#Side_slide #menu ul li a::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--af-color-accent);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);
}

#Side_slide #menu ul li a:hover,
#Side_slide #menu ul li a:focus-visible,
#Side_slide #menu ul li.current-menu-item > a,
#Side_slide #menu ul li.current-menu-ancestor > a {
	background: linear-gradient(90deg, rgba(207, 2, 97, 0.16) 0%, rgba(207, 2, 97, 0.04) 100%);
	color: #fff;
	padding-left: 30px !important;
	outline: none;
}

#Side_slide #menu ul li a:hover::before,
#Side_slide #menu ul li a:focus-visible::before,
#Side_slide #menu ul li.current-menu-item > a::before,
#Side_slide #menu ul li.current-menu-ancestor > a::before {
	transform: scaleY(1);
	transform-origin: top;
}

/* Submenu (zagnieżdżone) */
#Side_slide #menu ul li ul {
	background: rgba(255, 255, 255, 0.025) !important;
	padding: 4px 0 !important;
}

#Side_slide #menu ul li ul li a {
	padding-left: 44px !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.7);
}

#Side_slide #menu ul li ul li a:hover,
#Side_slide #menu ul li ul li a:focus-visible {
	padding-left: 50px !important;
	color: #fff;
}

#Side_slide #menu ul li ul li ul li a { padding-left: 60px !important; }

/* Toggle (+) z animacją obrotu — slim 20px wysoki, pionowo wyśrodkowany w pozycji LI */
#Side_slide #menu ul li.submenu .menu-toggle {
	width: 56px !important;
	height: 20px !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 200ms cubic-bezier(0.65, 0, 0.35, 1);
}

#Side_slide #menu ul li.submenu .menu-toggle::after {
	content: "" !important;
	display: block;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
	color: #fff;
	transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1),
		background-size 320ms cubic-bezier(0.65, 0, 0.35, 1);
}

#Side_slide #menu ul li.submenu:hover .menu-toggle,
#Side_slide #menu ul li.submenu .menu-toggle:focus-visible {
	opacity: 1;
}

/* When submenu open: BeTheme dodaje li.hover; my zamieniamy + na linię (-) */
#Side_slide #menu ul li.hover > .menu-toggle {
	opacity: 1;
}

#Side_slide #menu ul li.hover > .menu-toggle::after {
	content: "" !important;
	background-size: 12px 2px, 0 0 !important;
	transform: rotate(180deg);
}

/* Stagger reveal po otwarciu drawera (body.side-slide-is-open) */
#Side_slide #menu > ul > li {
	opacity: 0;
	transform: translateX(24px);
	transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.side-slide-is-open #Side_slide #menu > ul > li {
	opacity: 1;
	transform: translateX(0);
}

body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(1) { transition-delay: 80ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(2) { transition-delay: 130ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(3) { transition-delay: 180ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(4) { transition-delay: 230ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(5) { transition-delay: 280ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(6) { transition-delay: 320ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(7) { transition-delay: 360ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(8) { transition-delay: 400ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(9) { transition-delay: 440ms; }
body.side-slide-is-open #Side_slide #menu > ul > li:nth-child(n+10) { transition-delay: 480ms; }

/* "Stopka" drawera — pasek z magentowym akcentem na samym dole */
#Side_slide::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--af-color-accent) 0%, transparent 100%);
	pointer-events: none;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	#Side_slide #menu > ul > li {
		opacity: 1;
		transform: none;
		transition: none !important;
	}
	#Side_slide #menu ul li a,
	#Side_slide .close-wrapper a.close,
	#Side_slide .close-wrapper a.close i,
	#Side_slide #menu ul li.submenu .menu-toggle::after {
		transition: background-color 0.01ms, color 0.01ms !important;
	}
}

/* === 17c. CF7 PRIVACY CHECKBOX — formularz Kontakt ============ */

.amefit-modernized .cf7-privacy {
	margin-top: 4px;
	margin-bottom: 12px;
}

.amefit-modernized .wpcf7-acceptance .wpcf7-list-item {
	margin: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.amefit-modernized .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 13px;
	line-height: 1.5;
	color: var(--af-color-text-muted, #5a646b);
	flex: 1 1 auto;
}

.amefit-modernized .wpcf7-acceptance .wpcf7-list-item-label a {
	color: var(--af-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.amefit-modernized .wpcf7-acceptance .wpcf7-list-item-label a:hover {
	color: var(--af-color-accent-hover, #b00254);
	text-decoration-thickness: 2px;
}

.amefit-modernized .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	margin-top: 1px;
	accent-color: var(--af-color-accent);
	cursor: pointer;
}

/* === 17e. UKRYJ ZBĘDNE ELEMENTY POSTÓW + ZASIĘG ============== */

/* Page 3759 (Zasięg działania) — listing wpisów. Ukrywamy "Read more"
   bo karty postów są same w sobie klikalne. */
.amefit-modernized.page-id-3759 .post-more {
	display: none !important;
}

/* Single post — ukryj "Share" section i author-box-wrapper z emailem.
   .single odpowiada `is_single()`. */
.amefit-modernized.single .section-post-intro-share,
.amefit-modernized.single .share-simple-wrapper,
.amefit-modernized.single .share-label,
.amefit-modernized.single .author-box-wrapper,
.amefit-modernized.single .author-box {
	display: none !important;
}

/* Ukryj wyświetlanie daty z ikoną zegara (BeTheme post-meta) — na wpisach,
   listingach wpisów, related-posts. Bardzo specyficzny selektor żeby nie
   zepsuć innych elementów .date (np. w cenniku — tam nie ma .date inside
   .post anyway). Dotyczy całej strony żeby capture-all .date z icon-clock. */
.amefit-modernized .single .date:has(> i.icon-clock),
.amefit-modernized .post .date:has(> i.icon-clock),
.amefit-modernized .post-item .date:has(> i.icon-clock),
.amefit-modernized .related-posts .date:has(> i.icon-clock),
.amefit-modernized .blog_wrapper .date:has(> i.icon-clock),
.amefit-modernized.single .date,
.amefit-modernized .blog_wrapper .post-meta .date,
.amefit-modernized .related-posts .post-meta .date {
	display: none !important;
}

/* === 17d. SLIDER + PAGE HEADER TEKST BIAŁY ===================

   `.amefit-modernized h1, h2, ...` w custom.css ustawia kolor na ciemny
   var(--af-color-text). Na page-header oraz na nowych slajdach 2 i 4
   (cardio + strength2) wymuszamy biały, bo zdjęcia mają jasne obszary
   i ciemny tekst się zlewa. Pozostałe slajdy zostawiamy z domyślnym
   kolorem motywu. Na mobile wszystkie slajdy biały — overlay i tak
   przyciemnia całość. */
.amefit-modernized .af-slider__slide:nth-of-type(2) .af-slider__lead,
.amefit-modernized .af-slider__slide:nth-of-type(2) .af-slider__subtitle,
.amefit-modernized .af-slider__slide:nth-of-type(4) .af-slider__lead,
.amefit-modernized .af-slider__slide:nth-of-type(4) .af-slider__subtitle,
.amefit-modernized .af-page-header .af-page-header__title {
	color: #ffffff !important;
}

@media (max-width: 767px) {
	.amefit-modernized .af-slider__slide .af-slider__lead,
	.amefit-modernized .af-slider__slide .af-slider__subtitle {
		color: #ffffff !important;
	}
}

/* === 17. PAGE HEADER IMAGE — wypełnienie mobile =============== */

/* BeTheme `.content_wrapper img { height: auto }` przebijał mój
   `.af-page-header__image { height: 100% }` — obrazek renderował się
   wg natural aspect ratio (390×167 zamiast 390×338).
   Wyższa specyficzność wymusza wypełnienie kontenera. */
.amefit-modernized .af-page-header .af-page-header__image,
.amefit-modernized .content_wrapper .af-page-header__image,
.amefit-modernized .af-page-header__media .af-page-header__image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	display: block;
}

/* === 18. KADRA — toggle "Więcej" pod opisami pracowników ========
   Cel: ukryć dlugie biografie domyślnie, pokazać po kliknięciu "Więcej".
   Animacja: grid-template-rows 0fr → 1fr (płynne rozwijanie do auto-height
   bez konieczności znania docelowej wysokości; działa w Chrome/Safari/FF).
   Reduced-motion: krótszy czas, bez transformacji.
   ============================================================= */
.amefit-kadra-page .af-staff-card {
	position: relative;
}

.amefit-kadra-page .af-staff-more {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s ease 0.05s,
		margin-top 0.4s ease;
	margin-top: 0;
	will-change: grid-template-rows;
}

.amefit-kadra-page .af-staff-more__inner {
	overflow: hidden;
	min-height: 0;
}

.amefit-kadra-page .af-staff-card.is-expanded .af-staff-more {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.5rem;
}

.amefit-kadra-page .af-staff-more__inner > *:first-child {
	margin-top: 0;
}

.amefit-kadra-page .af-staff-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem auto 0;
	padding: 0.6rem 1.4rem;
	background: transparent;
	border: 1.5px solid var(--color-accent, #cf0261);
	border-radius: 999px;
	color: var(--color-accent, #cf0261);
	font: inherit;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		transform 0.15s ease,
		box-shadow 0.25s ease;
	-webkit-tap-highlight-color: transparent;
	left: 50%;
	transform: translateX(-50%);
	position: relative;
}

.amefit-kadra-page .af-staff-more-toggle:hover,
.amefit-kadra-page .af-staff-more-toggle:focus-visible {
	background: var(--color-accent, #cf0261);
	color: #fff;
	border-color: var(--color-accent, #cf0261);
	box-shadow: 0 8px 22px -10px rgba(207, 2, 97, 0.55);
}

.amefit-kadra-page .af-staff-more-toggle:focus-visible {
	outline: 2px solid var(--color-accent, #cf0261);
	outline-offset: 3px;
}

.amefit-kadra-page .af-staff-more-toggle:active {
	transform: translateX(-50%) scale(0.96);
}

.amefit-kadra-page .af-staff-more-toggle__arrow {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.amefit-kadra-page .af-staff-card.is-expanded .af-staff-more-toggle__arrow {
	transform: rotate(180deg);
}

/* Centrujemy guzik w kolumnie BeTheme'owej (column_attr ma text-align inherit) */
.amefit-kadra-page .af-staff-card {
	text-align: inherit;
}

.amefit-kadra-page .af-staff-card > .af-staff-more-toggle {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	left: auto;
	transform: none;
}

.amefit-kadra-page .af-staff-card > .af-staff-more-toggle:active {
	transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
	.amefit-kadra-page .af-staff-more,
	.amefit-kadra-page .af-staff-more-toggle,
	.amefit-kadra-page .af-staff-more-toggle__arrow {
		transition-duration: 0.01ms;
	}
}

/* === 19. STRONA KARNETY (page-id-4362) ============================
   Cel: estetyczna lista karnetów + 2 bannery (CTA "Kup karnet"
   + info o karnetach z karty sportowej). Siatka cards z hoverem.
   ================================================================= */

body.page-id-4362 .af-karnety {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
	color: var(--af-color-text, #161922);
}

/* === Hero CTA banner === */
body.page-id-4362 .af-karnety__hero {
	background:
		linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.05) 100%),
		url("/wp-content/uploads/2026/05/karnety-cta-1.jpg") center right / cover no-repeat,
		#161922;
	color: #ffffff;
	border-radius: var(--af-radius-lg, 18px);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
	text-align: left;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
	position: relative;
	overflow: hidden;
	min-height: clamp(280px, 36vw, 420px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__hero {
		background:
			linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.75) 100%),
			url("/wp-content/uploads/2026/05/karnety-cta-1.jpg") center / cover no-repeat,
			#161922;
		text-align: center;
		min-height: clamp(320px, 70vw, 420px);
	}
}

body.page-id-4362 .af-karnety__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: 0;
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__hero-inner {
		margin: 0 auto;
	}
}

body.page-id-4362 .af-karnety__hero-title {
	color: #ffffff !important;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

body.page-id-4362 .af-karnety__hero-lead {
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.55;
	max-width: 520px;
	margin: 0 0 1.75rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__hero-lead {
		margin: 0 auto 1.75rem;
	}
}

body.page-id-4362 .af-karnety__hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.85rem;
	background: #ffffff;
	color: #161922 !important;
	border-radius: var(--af-radius-sm, 10px);
	font-family: inherit;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background 220ms cubic-bezier(0.65, 0, 0.35, 1),
		color 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

body.page-id-4362 .af-karnety__hero-cta:hover,
body.page-id-4362 .af-karnety__hero-cta:focus-visible {
	background: var(--af-color-accent, #cf0261);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -10px rgba(207, 2, 97, 0.65);
	outline: none;
}

body.page-id-4362 .af-karnety__hero-cta svg {
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-id-4362 .af-karnety__hero-cta:hover svg,
body.page-id-4362 .af-karnety__hero-cta:focus-visible svg {
	transform: translateX(4px);
}

/* === Embedded sport card wewnątrz hero — glassmorphism =====
   Sport card jako wtórna informacja pod głównym CTA, na ciemnym
   tle hero. Półprzezroczyste tło + backdrop-blur dla efektu szkła. */

body.page-id-4362 .af-karnety__hero-sportcard {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2vw, 1.5rem);
	width: 100%;
	margin: 0;
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.75rem);
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-left: 3px solid var(--af-color-accent, #cf0261);
	border-radius: var(--af-radius-md, 14px);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 16px 40px -16px rgba(0, 0, 0, 0.45);
	flex-wrap: wrap;
	color: #ffffff;
}

body.page-id-4362 .af-karnety__hero-sportcard-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(207, 2, 97, 0.92);
	color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 6px 14px -4px rgba(207, 2, 97, 0.5);
}

body.page-id-4362 .af-karnety__hero-sportcard-body {
	flex: 1 1 240px;
	min-width: 220px;
}

body.page-id-4362 .af-karnety__hero-sportcard-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.72);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 0.2rem;
}

body.page-id-4362 .af-karnety__hero-sportcard-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(0.85rem, 1.1vw, 0.95rem);
	line-height: 1.45;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.page-id-4362 .af-karnety__hero-sportcard-text strong {
	color: #ffffff;
	font-weight: 700;
}

/* Button — solid magenta accent #CF0261 (kolor brand) */
body.page-id-4362 .af-karnety__hero-sportcard-btn {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.05rem;
	background: #CF0261;
	border: 1.5px solid #CF0261;
	color: #ffffff !important;
	border-radius: var(--af-radius-sm, 8px);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 8px 20px -8px rgba(207, 2, 97, 0.6);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background 220ms cubic-bezier(0.65, 0, 0.35, 1),
		color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		border-color 220ms cubic-bezier(0.65, 0, 0.35, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-id-4362 .af-karnety__hero-sportcard-btn:hover,
body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible {
	background: var(--af-color-accent-hover, #b00254);
	border-color: var(--af-color-accent-hover, #b00254);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -10px rgba(207, 2, 97, 0.75);
	outline: none;
}

body.page-id-4362 .af-karnety__hero-sportcard-btn svg {
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-id-4362 .af-karnety__hero-sportcard-btn:hover svg:first-of-type,
body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible svg:first-of-type {
	transform: translateX(3px);
}

body.page-id-4362 .af-karnety__hero-sportcard-info {
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.78);
	margin-left: 0.1rem;
	transition: color 180ms cubic-bezier(0.65, 0, 0.35, 1);
}

body.page-id-4362 .af-karnety__hero-sportcard-btn:hover .af-karnety__hero-sportcard-info,
body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible .af-karnety__hero-sportcard-info {
	color: #ffffff;
}

/* Tooltip — dziedziczy ::after z głównego sportcard-btn pattern,
 * ale tutaj scope-uje się dla nowego elementu */
body.page-id-4362 .af-karnety__hero-sportcard-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 240px;
	max-width: 320px;
	padding: 0.75rem 0.95rem;
	background: #161922;
	color: #ffffff;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	text-align: left;
	box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

body.page-id-4362 .af-karnety__hero-sportcard-btn::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 8px solid transparent;
	border-top-color: #161922;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

body.page-id-4362 .af-karnety__hero-sportcard-btn:hover::after,
body.page-id-4362 .af-karnety__hero-sportcard-btn:hover::before,
body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible::after,
body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__hero-sportcard {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	body.page-id-4362 .af-karnety__hero-sportcard-btn {
		width: 100%;
		justify-content: center;
	}
	body.page-id-4362 .af-karnety__hero-sportcard-btn::after {
		left: 0;
		transform: translateX(0) translateY(4px);
		min-width: 220px;
		max-width: calc(100vw - 3rem);
	}
	body.page-id-4362 .af-karnety__hero-sportcard-btn::before {
		left: 24px;
		transform: translateX(0) translateY(4px);
	}
	body.page-id-4362 .af-karnety__hero-sportcard-btn:hover::after,
	body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible::after,
	body.page-id-4362 .af-karnety__hero-sportcard-btn:hover::before,
	body.page-id-4362 .af-karnety__hero-sportcard-btn:focus-visible::before {
		transform: translateX(0) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-4362 .af-karnety__hero-sportcard-btn,
	body.page-id-4362 .af-karnety__hero-sportcard-btn::after,
	body.page-id-4362 .af-karnety__hero-sportcard-btn::before,
	body.page-id-4362 .af-karnety__hero-sportcard-btn svg {
		transition-duration: 0.01ms;
	}
}

/* === Sport card banner (zostawione na wypadek użycia w innych miejscach) === */
body.page-id-4362 .af-karnety__sportcard {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	background: linear-gradient(135deg, #fafafa 0%, #f0f0f3 100%);
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-left: 4px solid var(--af-color-accent, #cf0261);
	border-radius: var(--af-radius-md, 14px);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	flex-wrap: wrap;
}

body.page-id-4362 .af-karnety__sportcard-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--af-color-accent, #cf0261);
	color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 8px 18px -8px rgba(207, 2, 97, 0.6);
}

body.page-id-4362 .af-karnety__sportcard-body {
	flex: 1;
	min-width: 240px;
}

body.page-id-4362 .af-karnety__sportcard-title {
	font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
	font-weight: 800 !important;
	color: var(--af-color-text, #161922) !important;
	margin: 0 0 0.4rem !important;
	letter-spacing: -0.015em;
}

body.page-id-4362 .af-karnety__sportcard-desc {
	font-size: 0.95rem;
	color: var(--af-color-text-muted, #5f6470);
	margin: 0;
	line-height: 1.5;
}

body.page-id-4362 .af-karnety__sportcard-desc strong {
	color: var(--af-color-text, #161922);
	font-weight: 700;
}

body.page-id-4362 .af-karnety__sportcard-price {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 130px;
	border-left: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.1));
	padding-left: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__sportcard-price {
		border-left: none;
		border-top: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.1));
		padding-left: 0;
		padding-top: 1rem;
		margin-top: 0.5rem;
		width: 100%;
		align-items: flex-start;
	}
}

body.page-id-4362 .af-karnety__sportcard-amount {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--af-color-accent, #cf0261);
	letter-spacing: -0.02em;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

body.page-id-4362 .af-karnety__sportcard-meta {
	font-size: 0.8rem;
	color: var(--af-color-text-muted, #5f6470);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 0.15rem;
}

/* === Sport card button + tooltip === */
body.page-id-4362 .af-karnety__sportcard-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.85rem;
	padding: 0.65rem 1.1rem;
	background: var(--af-color-accent, #cf0261);
	color: #ffffff !important;
	border-radius: var(--af-radius-sm, 8px);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 8px 20px -8px rgba(207, 2, 97, 0.55);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
		background 220ms cubic-bezier(0.65, 0, 0.35, 1);
	white-space: nowrap;
}

body.page-id-4362 .af-karnety__sportcard-btn:hover,
body.page-id-4362 .af-karnety__sportcard-btn:focus-visible {
	background: var(--af-color-accent-hover, #b00254);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(207, 2, 97, 0.65);
	outline: none;
}

body.page-id-4362 .af-karnety__sportcard-btn svg {
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-id-4362 .af-karnety__sportcard-btn:hover svg:first-of-type,
body.page-id-4362 .af-karnety__sportcard-btn:focus-visible svg:first-of-type {
	transform: translateX(3px);
}

/* Info icon — wskazuje na obecność tooltipa */
body.page-id-4362 .af-karnety__sportcard-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.78);
	margin-left: 0.15rem;
	transition: color 180ms cubic-bezier(0.65, 0, 0.35, 1);
}

body.page-id-4362 .af-karnety__sportcard-btn:hover .af-karnety__sportcard-info {
	color: #ffffff;
}

/* CSS tooltip — wyświetlany na hover/focus przycisku, oparty
 * o data-tooltip. Native title attr jako fallback. */
body.page-id-4362 .af-karnety__sportcard-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 240px;
	max-width: 320px;
	padding: 0.75rem 0.95rem;
	background: #161922;
	color: #ffffff;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	text-align: left;
	box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

body.page-id-4362 .af-karnety__sportcard-btn::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	border: 8px solid transparent;
	border-top-color: #161922;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(0.65, 0, 0.35, 1),
		transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

body.page-id-4362 .af-karnety__sportcard-btn:hover::after,
body.page-id-4362 .af-karnety__sportcard-btn:hover::before,
body.page-id-4362 .af-karnety__sportcard-btn:focus-visible::after,
body.page-id-4362 .af-karnety__sportcard-btn:focus-visible::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__sportcard-btn::after {
		left: 0;
		transform: translateX(0) translateY(4px);
		min-width: 220px;
		max-width: calc(100vw - 3rem);
	}
	body.page-id-4362 .af-karnety__sportcard-btn::before {
		left: 24px;
		transform: translateX(0) translateY(4px);
	}
	body.page-id-4362 .af-karnety__sportcard-btn:hover::after,
	body.page-id-4362 .af-karnety__sportcard-btn:focus-visible::after {
		transform: translateX(0) translateY(0);
	}
	body.page-id-4362 .af-karnety__sportcard-btn:hover::before,
	body.page-id-4362 .af-karnety__sportcard-btn:focus-visible::before {
		transform: translateX(0) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-4362 .af-karnety__sportcard-btn,
	body.page-id-4362 .af-karnety__sportcard-btn::after,
	body.page-id-4362 .af-karnety__sportcard-btn::before,
	body.page-id-4362 .af-karnety__sportcard-btn svg {
		transition-duration: 0.01ms;
	}
}

/* === Section title === */
body.page-id-4362 .af-karnety__section-title {
	font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
	font-weight: 800 !important;
	color: var(--af-color-text, #161922) !important;
	letter-spacing: -0.02em;
	margin: clamp(2rem, 3.5vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem) !important;
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	padding-bottom: 0.75rem;
}

body.page-id-4362 .af-karnety__section-title span {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--af-color-text-muted, #5f6470);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* === Karnet grid + cards === */
body.page-id-4362 .af-karnety__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

body.page-id-4362 .af-karnet-card {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--af-color-border, rgba(22, 25, 34, 0.08));
	border-radius: var(--af-radius-md, 14px);
	padding: 1.5rem 1.25rem 1.35rem;
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 240ms cubic-bezier(0.65, 0, 0.35, 1);
	overflow: hidden;
	cursor: pointer;
}

/* Stretched link — całe pole karty klikalne, ale jedna semantyka
 * linku (h3 > a) dla screen readera. */
body.page-id-4362 .af-karnet-card__link {
	color: inherit !important;
	text-decoration: none !important;
}

body.page-id-4362 .af-karnet-card .af-karnet-card__name a,
body.page-id-4362 .af-karnet-card .af-karnet-card__name a:hover,
body.page-id-4362 .af-karnet-card .af-karnet-card__name a:focus {
	color: inherit !important;
	text-decoration: none !important;
	background: transparent !important;
}

body.page-id-4362 .af-karnet-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

body.page-id-4362 .af-karnet-card__link:focus-visible::before {
	outline: 3px solid var(--af-color-accent, #cf0261);
	outline-offset: 2px;
}

/* Badge i price wyżej niż link, żeby były niezależnie hoverowalne
 * (akcent wizualny, nie funkcjonalny — kliknięcie i tak prowadzi
 * do tego samego URL). */
body.page-id-4362 .af-karnet-card__badge,
body.page-id-4362 .af-karnet-card__price,
body.page-id-4362 .af-karnet-card__meta {
	position: relative;
	z-index: 0;
}

body.page-id-4362 .af-karnet-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--af-color-accent, #cf0261), transparent 80%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-id-4362 .af-karnet-card:hover {
	transform: translateY(-3px);
	border-color: rgba(207, 2, 97, 0.3);
	box-shadow: 0 18px 36px -16px rgba(22, 25, 34, 0.18);
}

body.page-id-4362 .af-karnet-card:hover::before {
	transform: scaleX(1);
}

body.page-id-4362 .af-karnet-card--featured {
	background: linear-gradient(180deg, #ffffff 0%, #fffafc 100%);
	border-color: rgba(207, 2, 97, 0.35);
	box-shadow: 0 14px 28px -14px rgba(207, 2, 97, 0.25);
}

body.page-id-4362 .af-karnet-card--featured::before {
	transform: scaleX(1);
}

body.page-id-4362 .af-karnet-card__badge {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: inline-block;
	padding: 0.25rem 0.65rem;
	background: var(--af-color-accent, #cf0261);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	box-shadow: 0 6px 14px -6px rgba(207, 2, 97, 0.6);
}

body.page-id-4362 .af-karnet-card__name {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--af-color-text, #161922) !important;
	margin: 0 0 0.85rem !important;
	letter-spacing: -0.01em;
	line-height: 1.3;
	min-height: 2.6rem;
}

body.page-id-4362 .af-karnet-card__price {
	font-size: clamp(1.6rem, 2.6vw, 2rem);
	font-weight: 800;
	color: var(--af-color-accent, #cf0261);
	letter-spacing: -0.02em;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin-bottom: 0.4rem;
}

body.page-id-4362 .af-karnet-card__price-unit {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--af-color-text-muted, #5f6470);
	letter-spacing: 0;
	text-transform: lowercase;
	margin-left: 0.15rem;
}

body.page-id-4362 .af-karnet-card__meta {
	font-size: 0.85rem;
	color: var(--af-color-text-muted, #5f6470);
	margin: 0;
	letter-spacing: 0.01em;
}

/* === CTA bottom — bokser po lewej, tekst po prawej === */
body.page-id-4362 .af-karnety__cta-bottom {
	background:
		linear-gradient(270deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.05) 100%),
		url("/wp-content/uploads/2026/05/karnety-cta-2.jpg") center left / cover no-repeat,
		#161922;
	border-radius: var(--af-radius-lg, 18px);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
	text-align: right;
	margin: clamp(2rem, 4vw, 3rem) 0;
	border: none;
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
	position: relative;
	overflow: hidden;
	min-height: clamp(260px, 32vw, 380px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #ffffff;
}

body.page-id-4362 .af-karnety__cta-bottom > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__cta-bottom {
		background:
			linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.8) 100%),
			url("/wp-content/uploads/2026/05/karnety-cta-2.jpg") center / cover no-repeat,
			#161922;
		text-align: center;
		justify-content: center;
		min-height: clamp(300px, 70vw, 380px);
	}
}

body.page-id-4362 .af-karnety__cta-bottom-inner {
	max-width: 520px;
}

body.page-id-4362 .af-karnety__cta-bottom-title {
	font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin: 0 0 0.5rem !important;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

body.page-id-4362 .af-karnety__cta-bottom-lead {
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 1.5rem;
	max-width: 480px;
	margin-left: auto;
	line-height: 1.55;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 599px) {
	body.page-id-4362 .af-karnety__cta-bottom-lead {
		margin-left: auto;
		margin-right: auto;
	}
}

body.page-id-4362 .af-karnety__cta-bottom .af-karnety__hero-cta {
	background: var(--af-color-accent, #cf0261);
	color: #ffffff !important;
	box-shadow: 0 12px 28px -10px rgba(207, 2, 97, 0.55);
}

body.page-id-4362 .af-karnety__cta-bottom .af-karnety__hero-cta:hover,
body.page-id-4362 .af-karnety__cta-bottom .af-karnety__hero-cta:focus-visible {
	background: #ffffff;
	color: #161922 !important;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	body.page-id-4362 .af-karnet-card,
	body.page-id-4362 .af-karnet-card::before,
	body.page-id-4362 .af-karnety__hero-cta,
	body.page-id-4362 .af-karnety__hero-cta svg {
		transition-duration: 0.01ms;
		transform: none !important;
	}
}