/*
Theme Name: Fabryka Atletów
Theme URI: https://fabrykaatletow.pl
Author: Rafał Kokosiński
Author URI: https://rafalkokosinski.pl
Description: Motyw Fundacji Fabryka Atletów. Ciemny grafit, pomarańcz jako jedyny akcent, kanciaste kształty.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fa
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--fa-ink-900);
	color: var(--fa-text-primary);
	font-family: var(--fa-font-ui);
	font-size: var(--fa-text-16);
	line-height: var(--fa-leading-body);
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--fa-orange-300);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--fa-orange-300);
	outline-offset: 2px;
}

h1,
h2 {
	margin: 0;
	font-family: var(--fa-font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: var(--fa-leading-tight);
}

p {
	margin: 0;
}

.fa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- S0 zaslepka */

.s0 {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.s0__main {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--fa-space-12);
	padding: 72px var(--fa-space-16) 0;
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.s0__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	width: 660px;
	flex-shrink: 0;
}

.s0__logo {
	width: 150px;
	height: auto;
}

.s0__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fa-space-4);
}

.s0__chip {
	background: var(--fa-orange-tint);
	color: var(--fa-orange-300);
	font-size: var(--fa-text-12);
	font-weight: 500;
	letter-spacing: 0.8px;
	line-height: 1;
	text-transform: uppercase;
	padding: 6px 10px;
}

.s0__title {
	font-size: clamp(2.75rem, 5.6vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.5px;
	color: var(--fa-text-primary);
}

.s0__lead {
	max-width: 560px;
	font-size: var(--fa-text-18);
	color: var(--fa-text-secondary);
}

.s0__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
	padding: var(--fa-space-6);
	background: var(--fa-ink-800);
	border: var(--fa-rule);
}

.s0__contact-title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	line-height: var(--fa-leading-heading);
	text-transform: uppercase;
	color: var(--fa-text-primary);
}

.s0__contact-note {
	font-size: var(--fa-text-15);
	line-height: 1.5;
	color: var(--fa-text-secondary);
}

.s0__contact-list,
.s0__social {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.s0__contact-list {
	gap: var(--fa-space-8);
}

.s0__social {
	gap: var(--fa-space-4) 18px;
}

.s0__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1.2;
}

.s0__contact-list .s0__link {
	font-size: var(--fa-text-16);
	font-weight: 500;
	color: var(--fa-text-primary);
}

.s0__contact-list .s0__link svg {
	color: var(--fa-orange-500);
}

.s0__social .s0__link {
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
}

.s0__link:hover {
	color: var(--fa-orange-300);
}

.s0__link svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.s0__art {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}

/* Kadr nie moze konczyc sie widoczna krawedzia — gorna krawedz gasnie w tlo. */
.s0__mascot {
	width: 100%;
	max-width: 612px;
	height: auto;
	mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}

.s0__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--fa-space-6);
	min-height: 132px;
	padding: var(--fa-space-6) var(--fa-space-16);
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	border-top: var(--fa-rule);
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
}

.s0__footer-legal {
	color: var(--fa-text-muted);
}

@media (max-width: 1100px) {
	.s0__main {
		flex-direction: column;
		align-items: center;
		gap: 28px;
		padding: var(--fa-space-12) var(--fa-space-6);
		text-align: center;
	}

	/* Lewa kolumna znika jako pudelko, zeby gepard mogl wejsc miedzy logo a naglowek. */
	.s0__left {
		display: contents;
	}

	.s0__logo {
		order: 1;
	}

	.s0__art {
		order: 2;
		width: 100%;
	}

	.s0__heading {
		order: 3;
		align-items: center;
	}

	.s0__contact {
		order: 4;
		width: 100%;
		margin-inline: auto;
	}

	.s0__social {
		order: 5;
	}

	.s0__mascot {
		max-width: 320px;
	}

	.s0__lead {
		margin-inline: auto;
	}

	.s0__contact-list,
	.s0__social {
		justify-content: center;
	}

	.s0__footer {
		flex-direction: column;
		justify-content: center;
		gap: var(--fa-space-3);
		min-height: 0;
		padding: var(--fa-space-8) var(--fa-space-6);
		text-align: center;
	}
}

@media (max-width: 560px) {
	.s0__lead {
		font-size: var(--fa-text-16);
	}

	.s0__contact-list {
		flex-direction: column;
		gap: var(--fa-space-3);
	}
}

/* ------------------------------------------------------------- S1 wybor sciezki */

.s1 {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.s1__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fa-space-6);
	min-height: 96px;
	padding-inline: var(--fa-space-16);
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.s1__logo img {
	width: 79px;
	height: auto;
}

.s1__login {
	font-size: var(--fa-text-15);
	color: var(--fa-text-secondary);
	text-decoration: none;
}

.s1__login:hover {
	color: var(--fa-orange-300);
}

.s1__main {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-12);
	padding: 72px var(--fa-space-16) 80px;
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.s1__choice {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-8);
	flex: 0 1 620px;
}

.s1__heading {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.s1__eyebrow {
	font-size: var(--fa-text-13);
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--fa-orange-500);
}

.s1__title {
	font-size: clamp(2.75rem, 4.7vw, 4.25rem);
	line-height: 0.98;
	letter-spacing: -0.5px;
}

.s1__lead {
	font-size: var(--fa-text-16);
	color: var(--fa-text-secondary);
}

.s1__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.s1__card {
	display: flex;
	align-items: center;
	gap: var(--fa-space-6);
	padding: 22px var(--fa-space-6);
	background: var(--fa-ink-800);
	border: var(--fa-rule);
	text-decoration: none;
	color: inherit;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.s1__card:hover,
.s1__card:focus-visible {
	background: var(--fa-ink-700);
	border-color: var(--fa-ink-400);
}

.s1__card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.s1__card-title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-32);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	color: var(--fa-text-primary);
}

/* Makieta ma tu 14 px, ale skala z design-system.md zna 13 i 15, nie 14. Trzymamy skale. */
.s1__card-desc {
	font-size: var(--fa-text-15);
	line-height: 1.45;
	color: var(--fa-text-secondary);
}

.s1__card-price {
	font-size: var(--fa-text-15);
	font-weight: 500;
	color: var(--fa-orange-500);
}

/* Ścieżka jeszcze niezbudowana: karta zostaje w komplecie, bo oferta jest realna,
   ale nie udaje odnośnika. Do zdjęcia razem z ekranem S2c. */
.s1__card.is-soon {
	opacity: 0.55;
}

.s1__card-soon {
	flex-shrink: 0;
	padding: 4px 10px;
	border: var(--fa-hairline);
	font-size: var(--fa-text-12);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fa-text-muted);
}

.s1__card-arrow {
	position: relative;
	flex-shrink: 0;
	color: var(--fa-orange-500);
	transition: transform 180ms ease, color 180ms ease;
}

.s1__card-arrow svg {
	width: 24px;
	height: 24px;
}

.s1__card:hover .s1__card-arrow,
.s1__card:focus-visible .s1__card-arrow {
	transform: translateX(6px);
	color: var(--fa-orange-400);
}

.s1__note {
	font-size: var(--fa-text-13);
	line-height: 1.5;
	color: var(--fa-text-muted);
}

.s1__art {
	flex: 1 1 644px;
	display: flex;
	justify-content: center;
	min-width: 0;
}

/*
 * Ramka ma proporcje samego kadru, nie kolumny. Przy `contain` w szerszym pudelku
 * zdjecie konczylo sie 56 px przed krawedzia, wiec winieta liczona od kontenera
 * mijala sie z krawedzia obrazu i ta zostawala widoczna.
 */
.s1__photos {
	position: relative;
	height: 660px;
	aspect-ratio: 928 / 1152;
	max-width: 100%;
}

.s1__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 250ms ease;
}

/* Dzieci to stan domyslny: bez :has() i bez hovera zostaje widoczne to zdjecie. */
.s1__photo--dzieci {
	opacity: 1;
}

.s1__main:has(.s1__card--dorosli:is(:hover, :focus-visible)) .s1__photo--dzieci,
.s1__main:has(.s1__card--personalny:is(:hover, :focus-visible)) .s1__photo--dzieci {
	opacity: 0;
}

.s1__main:has(.s1__card--dorosli:is(:hover, :focus-visible)) .s1__photo--dorosli,
.s1__main:has(.s1__card--personalny:is(:hover, :focus-visible)) .s1__photo--personalny {
	opacity: 1;
}

/*
 * Kadr nie moze konczyc sie widoczna krawedzia (design-system.md). Maski liniowe
 * gasza wszystkie cztery boki na 15–18% szerokosci, winieta zbiera reszte.
 * Wszystko do tego samego hexu co tlo strony, inaczej pojawia sie druga krawedz.
 */
.s1__photos::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, #141517 0%, #14151700 18%, #14151700 82%, #141517 100%),
		linear-gradient(to bottom, #141517 0%, #14151700 15%, #14151700 74%, #141517 100%),
		radial-gradient(ellipse 68% 68% at 50% 45%, #14151700 40%, #14151780 78%, #141517 100%);
}

@keyframes fa-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes fa-fade {
	from {
		opacity: 0;
	}
}

.s1__heading,
.s1__cards-item,
.s1__note {
	animation: fa-rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.s1__cards-item {
	animation-delay: calc(var(--fa-stagger) * 70ms + 90ms);
}

.s1__note {
	animation-delay: 330ms;
}

.s1__art {
	animation: fa-fade 600ms ease 120ms backwards;
}

@media (max-width: 1100px) {
	.s1__nav {
		padding-inline: var(--fa-space-6);
	}

	.s1__main {
		flex-direction: column;
		gap: var(--fa-space-8);
		padding: var(--fa-space-8) var(--fa-space-6) var(--fa-space-12);
	}

	.s1__choice {
		flex: 1 1 auto;
		width: 100%;
	}

	/*
	 * Hovera na dotyku nie ma, wiec kadr schodzi pod karty jako ilustracja.
	 * Baze flexa trzeba wyzerowac: po obrocie na kolumne 644px z wersji desktopowej
	 * staje sie wysokoscia i dokleja pod zdjeciem 200 px pustki.
	 */
	.s1__art {
		flex: 0 0 auto;
		width: 100%;
	}

	.s1__photos {
		height: 420px;
	}
}

@media (max-width: 560px) {
	.s1__card {
		gap: var(--fa-space-4);
		padding: 18px var(--fa-space-4);
	}

	.s1__card-title {
		font-size: var(--fa-text-24);
	}
}

@media (prefers-reduced-motion: reduce) {
	.s1__heading,
	.s1__cards-item,
	.s1__note,
	.s1__art {
		animation: none;
	}

	.s1__card,
	.s1__card-arrow,
	.s1__photo {
		transition-duration: 1ms;
	}
}

/* ------------------------------------------------- strona tresciowa i WooCommerce */

.page__body {
	max-width: 1100px;
	margin-inline: auto;
	padding: var(--fa-space-12) var(--fa-space-16) var(--fa-space-24);
}

.page__title {
	margin-bottom: var(--fa-space-8);
	font-size: clamp(2rem, 3.4vw, 3rem);
}

.page__content h2,
.page__content h3 {
	margin: var(--fa-space-4) 0;
	font-family: var(--fa-font-display);
	font-weight: 800;
	text-transform: uppercase;
}

.page__content p {
	margin-bottom: var(--fa-space-4);
}

.page__content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--fa-space-6);
}

.page__content th,
.page__content td {
	padding: var(--fa-space-3);
	border-bottom: var(--fa-hairline);
	text-align: left;
	vertical-align: top;
}

.page__content input:not([type="checkbox"]):not([type="radio"]),
.page__content select,
.page__content textarea {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--fa-space-4);
	background: var(--fa-ink-700);
	border: var(--fa-hairline);
	border-radius: 0;
	color: var(--fa-text-primary);
	font-family: inherit;
	font-size: var(--fa-text-16);
}

.page__content button,
.page__content .button {
	display: inline-block;
	min-height: 52px;
	padding: 0 28px;
	background: var(--fa-orange-500);
	border: 0;
	color: var(--fa-text-on-accent);
	font-family: inherit;
	font-size: var(--fa-text-15);
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

@media (max-width: 900px) {
	.page__body {
		padding-inline: var(--fa-space-6);
	}
}

/* ------------------------------------------------------- S2 konfigurator zapisu */

[x-cloak] {
	display: none !important;
}

.s2 {
	max-width: 1440px;
	margin-inline: auto;
	padding-bottom: var(--fa-space-24);
}

.s2__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
	padding: var(--fa-space-12) var(--fa-space-16) 0;
}

.s2__title {
	font-family: var(--fa-font-display);
	font-size: clamp(2.25rem, 3.6vw, 3.5rem);
	font-weight: 800;
	line-height: var(--fa-leading-tight);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.s2__lead {
	max-width: 640px;
	color: var(--fa-text-secondary);
}

.s2__steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-8);
	list-style: none;
	margin: var(--fa-space-8) 0 0;
	padding: 0 var(--fa-space-16);
	font-size: var(--fa-text-15);
	color: var(--fa-text-muted);
}

.s2__step-row {
	display: inline-flex;
	align-items: center;
	gap: var(--fa-space-2);
	padding-bottom: var(--fa-space-2);
	border-bottom: 3px solid transparent;
}

.s2__step svg {
	width: 16px;
	height: 16px;
}

.s2__step.is-done {
	color: var(--fa-text-secondary);
}

.s2__step.is-done svg {
	color: var(--fa-orange-500);
}

.s2__step.is-current {
	color: var(--fa-text-primary);
}

.s2__step.is-current .s2__step-row {
	border-bottom-color: var(--fa-orange-500);
}

.s2__step-num {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 800;
}

.s2__alert {
	margin: var(--fa-space-6) var(--fa-space-16) 0;
	padding: var(--fa-space-3) var(--fa-space-4);
	border-left: 3px solid var(--fa-error);
	background: var(--fa-ink-800);
	font-size: var(--fa-text-15);
}

.s2__main {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-12);
	padding: var(--fa-space-12) var(--fa-space-16) 0;
}

.s2__config {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-12);
	flex: 1 1 864px;
	min-width: 0;
}

.s2__block {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-4);
}

.s2__block-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fa-space-3);
}

.s2__block-num {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	color: var(--fa-orange-500);
}

.s2__block-title {
	font-size: var(--fa-text-24);
}

.s2__block-sub {
	font-size: var(--fa-text-15);
	color: var(--fa-text-muted);
}

.s2__block-aside {
	margin-left: auto;
	font-size: var(--fa-text-15);
	color: var(--fa-text-secondary);
}

/* Wyboru nie obsługujemy skryptem — pod spodem siedzi natywne radio. */
.s2__pill input,
.s2__option input,
.s2__pay-option input,
.s2__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.s2__pills {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fa-space-3);
}

.s2__pill-face {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fa-space-2);
	height: 52px;
	background: var(--fa-ink-800);
	border: var(--fa-hairline);
	font-size: var(--fa-text-16);
	font-weight: 500;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.s2__pill-face svg {
	width: 16px;
	height: 16px;
	color: var(--fa-orange-500);
	opacity: 0;
}

.s2__pill:hover .s2__pill-face {
	background: var(--fa-ink-700);
}

.s2__pill input:checked + .s2__pill-face {
	background: var(--fa-orange-tint);
	border: 2px solid var(--fa-orange-500);
}

.s2__pill input:checked + .s2__pill-face svg {
	opacity: 1;
}

.s2__pill input:focus-visible + .s2__pill-face,
.s2__option input:focus-visible + .s2__option-face,
.s2__pay-option input:focus-visible + .s2__pay-face,
.s2__check input:focus-visible + .s2__check-face {
	outline: 2px solid var(--fa-orange-300);
	outline-offset: 2px;
}

.s2__options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fa-space-3);
}

.s2__options--two {
	grid-template-columns: repeat(2, 1fr);
}

.s2__options--four {
	grid-template-columns: repeat(4, 1fr);
}

.s2__option {
	display: block;
}

.s2__option-face {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: var(--fa-space-6);
	background: var(--fa-ink-700);
	border: var(--fa-hairline);
	transition: background-color 160ms ease, border-color 160ms ease;
}

.s2__option:hover .s2__option-face {
	background: var(--fa-ink-600);
}

.s2__option input:checked + .s2__option-face {
	background: var(--fa-orange-tint);
	border: 2px solid var(--fa-orange-500);
	padding: 23px;
}

.s2__option-head {
	display: flex;
	align-items: center;
	gap: var(--fa-space-2);
}

.s2__option-over {
	font-size: var(--fa-text-12);
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fa-text-muted);
}

.s2__option-head svg {
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: var(--fa-orange-500);
	opacity: 0;
}

.s2__option input:checked + .s2__option-face .s2__option-head svg {
	opacity: 1;
}

.s2__option input:checked + .s2__option-face .s2__option-over {
	color: var(--fa-orange-300);
}

.s2__option-title {
	font-family: var(--fa-font-display);
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.3px;
	text-transform: uppercase;
}

.s2__option-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.s2__option-amount {
	font-family: var(--fa-font-display);
	font-size: 2.125rem;
	font-weight: 800;
	line-height: 1;
	color: var(--fa-orange-500);
}

.s2__option-unit {
	font-size: var(--fa-text-15);
	color: var(--fa-text-secondary);
}

.s2__option-was {
	font-size: var(--fa-text-16);
	color: var(--fa-text-muted);
}

.s2__option-note {
	font-size: var(--fa-text-13);
	line-height: 1.45;
	color: var(--fa-text-secondary);
}

.s2__option-note--blocked {
	color: var(--fa-warning);
}

/* Niedostępny wariant przygaszamy z wyjaśnieniem, nie ukrywamy (flow-zapisu.md). */
.s2__option.is-blocked .s2__option-face {
	opacity: 0.5;
}

.s2__option.is-blocked {
	cursor: not-allowed;
}

/* Karta programu (S2b). Ta sama karta wyboru, ale niesie opis i skład zajęć zamiast
   ceny — u dorosłych cena od programu nie zależy i liczba w tym miejscu myliłaby. */
.s2__option--program .s2__option-title {
	font-size: 1.25rem;
}

/* Kolor jest oznaczeniem projektu, tym samym co w grafiku Studia, więc nie może być
   jedynym nośnikiem informacji — nazwa stoi obok. */
.s2__option-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fa-program, var(--fa-orange-500));
}

.s2__option-list {
	font-size: var(--fa-text-13);
	line-height: 1.45;
	color: var(--fa-text-primary);
}

.s2__option-who {
	margin-top: auto;
	font-size: var(--fa-text-12);
	line-height: 1.45;
	color: var(--fa-text-muted);
}

.s2__badge {
	padding: 3px 10px;
	background: var(--fa-orange-500);
	color: var(--fa-text-on-accent);
	font-size: var(--fa-text-12);
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.s2__note {
	font-size: var(--fa-text-13);
	line-height: 1.5;
	color: var(--fa-text-muted);
}

.s2__error {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-13);
	line-height: 1.45;
	color: var(--fa-error);
}

/* Miejsce na komunikat stoi w formularzu na stałe, żeby AJAX miał co wypełnić.
   Dopóki jest puste, nie zajmuje wysokości. */
.s2__error:empty {
	display: none;
}

.s2__hint {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-2);
	align-self: center;
	font-size: var(--fa-text-13);
	line-height: 1.45;
	color: var(--fa-success);
}

.s2__hint svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

.s2__hint-plain {
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
}

/* Akordeon danych dzieci */

.s2__accordion {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-3);
}

.s2__panel {
	background: var(--fa-ink-800);
	border: var(--fa-rule);
}

.s2__panel-head {
	display: flex;
	align-items: center;
	gap: var(--fa-space-3);
	width: 100%;
	padding: var(--fa-space-6) var(--fa-space-6);
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.s2__panel-head svg {
	width: 20px;
	height: 20px;
	color: var(--fa-orange-500);
	transition: transform 180ms ease;
}

.s2__panel.is-open .s2__panel-head svg {
	transform: rotate(90deg);
}

.s2__panel-title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.s2__chip {
	padding: 4px 10px;
	background: var(--fa-orange-tint);
	color: var(--fa-orange-300);
	font-size: var(--fa-text-12);
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.s2__panel-status {
	margin-left: auto;
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
}

.s2__panel-body {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-4);
	padding: 0 var(--fa-space-6) var(--fa-space-6);
}

/* Wybór grupy — tylko tam, gdzie do wieku dziecka pasuje więcej niż jedna
   (Koszalin: dziesięciolatek mieści się i w 7–10, i w 10–14). */
.s2__grupy {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
}

.s2__grupy .s2__hint-plain {
	margin-bottom: var(--fa-space-1);
}

/* Pola */

.s2__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fa-space-4);
	align-items: start;
}

/* Imię, nazwisko i data urodzenia to jedna myśl — „kto to jest” — więc jeden rząd. */
.s2__row--troje {
	grid-template-columns: 1fr 1fr minmax(160px, 0.8fr);
}

/* Kod pocztowy ma stałą długość, więc dostaje tyle miejsca, ile zajmuje —
   reszta idzie na ulicę, bo tam wpisuje się najwięcej. */
.s2__row--adres {
	grid-template-columns: minmax(0, 1.6fr) minmax(120px, 0.5fr) minmax(0, 1fr);
}

/* Warianty stoją nad media query świadomie: mają tę samą wagę co `.s2__row`,
   więc o zejściu do jednej kolumny na wąskim ekranie decyduje kolejność w pliku. */

.s2__field {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
	min-width: 0;
}

.s2__label {
	font-size: var(--fa-text-13);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
}

.s2__field input {
	height: 52px;
	padding: 0 var(--fa-space-4);
	background: var(--fa-ink-700);
	border: var(--fa-hairline);
	border-radius: 0;
	color: var(--fa-text-primary);
	font-family: inherit;
	font-size: var(--fa-text-16);
}

.s2__field input::placeholder {
	color: var(--fa-text-muted);
}

.s2__field input:focus-visible {
	outline: 2px solid var(--fa-orange-500);
	outline-offset: -2px;
}

/* Pole tylko do odczytu ma wyglądać na nieedytowalne, zanim ktoś w nie kliknie. */
.s2__field input:read-only {
	background: var(--fa-ink-800);
	color: var(--fa-text-secondary);
	cursor: default;
}

/* Kod rabatowy: pole i przycisk sprawdzenia w jednym rzędzie, bo to jedna czynność. */
.s2__promo-row {
	display: flex;
	gap: var(--fa-space-2);
}

.s2__promo-row input {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.s2__promo-btn {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 var(--fa-space-4);
	background: transparent;
	border: var(--fa-hairline);
	color: var(--fa-text-primary);
	font-family: inherit;
	font-size: var(--fa-text-14);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}

.s2__promo-btn:hover:not(:disabled) {
	border-color: var(--fa-orange-500);
	color: var(--fa-orange-500);
}

.s2__promo-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.s2__check {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-3);
	font-size: var(--fa-text-13);
	line-height: 1.45;
	color: var(--fa-text-secondary);
	cursor: pointer;
}

.s2__check span:last-child {
	cursor: pointer;
}

.s2__check--standalone {
	padding-top: var(--fa-space-2);
}

/*
 * Kwadrat ma 22 px, a pierwsza linia etykiety 13 × 1,45 ≈ 19 px, więc przy
 * wyrównaniu do góry środki się nie schodzą i tekst czyta się jako podniesiony.
 * Ujemny margines zrównuje środek kwadratu ze środkiem pierwszej linii i działa
 * także wtedy, gdy etykieta zawija się na kilka wierszy.
 */
.s2__check-face {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: -2px;
	background: var(--fa-ink-700);
	border: var(--fa-hairline);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.s2__check:hover .s2__check-face {
	background: var(--fa-ink-600);
	border-color: var(--fa-ink-500);
}

.s2__check:hover {
	color: var(--fa-text-primary);
}

.s2__check-face svg {
	width: 14px;
	height: 14px;
	color: var(--fa-orange-500);
	opacity: 0;
}

.s2__check input:checked + .s2__check-face {
	border-color: var(--fa-orange-500);
}

.s2__check input:checked + .s2__check-face svg {
	opacity: 1;
}

.s2__done {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-4);
	max-width: 720px;
	margin: var(--fa-space-12) var(--fa-space-16) 0;
	padding: var(--fa-space-8);
	background: var(--fa-ink-800);
	border: var(--fa-rule);
	border-left: 3px solid var(--fa-orange-500);
	color: var(--fa-text-secondary);
}

.s2__done-contact {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-3);
	padding-top: var(--fa-space-4);
	border-top: var(--fa-hairline);
	color: var(--fa-text-primary);
}

.s2__done-contact svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	color: var(--fa-orange-500);
}

/* Dialog: modalnosc, pulapka focusa i Esc pochodza z natywnego <dialog>. */

.s2__dialog {
	max-width: 420px;
	padding: var(--fa-space-8);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
	color: var(--fa-text-primary);
	box-shadow: var(--fa-shadow-lift);
}

.s2__dialog::backdrop {
	background: rgb(14 15 17 / 0.72);
}

.s2__dialog-title {
	margin-bottom: var(--fa-space-3);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.s2__dialog-text {
	margin-bottom: var(--fa-space-6);
	font-size: var(--fa-text-15);
	line-height: 1.55;
	color: var(--fa-text-secondary);
}

/* Podsumowanie */

.s2__summary {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-6);
	flex: 0 0 400px;
	position: sticky;
	top: var(--fa-space-6);
}

.s2__card,
.s2__help {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-4);
	padding: var(--fa-space-6);
	background: var(--fa-ink-800);
	border: var(--fa-rule);
}

.s2__card-title,
.s2__help-title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.s2__facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	font-size: var(--fa-text-15);
}

.s2__facts > div {
	display: flex;
	align-items: baseline;
	gap: var(--fa-space-3);
}

.s2__facts dt {
	color: var(--fa-text-muted);
	white-space: nowrap;
}

.s2__facts dd {
	margin: 0;
	margin-left: auto;
	text-align: right;
	color: var(--fa-text-primary);
}

.s2__rule {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--fa-ink-500);
}

.s2__amount {
	display: flex;
	align-items: baseline;
	gap: var(--fa-space-2);
}

.s2__amount-value {
	font-family: var(--fa-font-display);
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--fa-orange-500);
}

.s2__amount-unit {
	font-size: var(--fa-text-16);
	color: var(--fa-text-secondary);
}

.s2__pay {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
}

.s2__pay-face {
	display: flex;
	align-items: center;
	gap: var(--fa-space-3);
	padding: var(--fa-space-3) var(--fa-space-4);
	background: var(--fa-ink-700);
	border: var(--fa-hairline);
	transition: border-color 160ms ease, background-color 160ms ease;
}

.s2__pay-face strong {
	display: block;
	font-size: var(--fa-text-15);
	font-weight: 500;
	color: var(--fa-text-primary);
}

.s2__pay-face small {
	display: block;
	font-size: var(--fa-text-13);
	line-height: 1.4;
	color: var(--fa-text-muted);
}

.s2__pay-face svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--fa-text-secondary);
}

.s2__pay-face svg:last-child {
	width: 16px;
	height: 16px;
	margin-left: auto;
	color: var(--fa-orange-500);
	opacity: 0;
}

.s2__pay-option input:checked + .s2__pay-face {
	background: var(--fa-orange-tint);
	border-color: var(--fa-orange-500);
}

.s2__pay-option input:checked + .s2__pay-face svg:first-child,
.s2__pay-option input:checked + .s2__pay-face svg:last-child {
	color: var(--fa-orange-500);
	opacity: 1;
}

.s2__consents {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-3);
}

.s2__cta {
	height: 52px;
	padding: 14px 28px;
	background: var(--fa-orange-500);
	border: 0;
	color: var(--fa-text-on-accent);
	font-family: inherit;
	font-size: var(--fa-text-15);
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.s2__cta:hover {
	background: var(--fa-orange-400);
}

.s2__cta:active {
	background: var(--fa-orange-600);
}

.s2__payu {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-3);
	font-size: var(--fa-text-13);
	line-height: 1.45;
	color: var(--fa-text-muted);
}

.s2__payu svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--fa-text-secondary);
}


.s2__help p {
	font-size: var(--fa-text-15);
	color: var(--fa-text-secondary);
}

.s2__help .s0__link {
	font-size: var(--fa-text-16);
	font-weight: 500;
	color: var(--fa-text-primary);
}

.s2__help .s0__link svg {
	color: var(--fa-orange-500);
}

@media (max-width: 1200px) {
	.s2__main {
		flex-direction: column;
	}

	.s2__summary {
		position: static;
		flex: 1 1 auto;
		width: 100%;
	}
}

@media (max-width: 900px) {
	.s2__intro,
	.s2__steps,
	.s2__main {
		padding-inline: var(--fa-space-6);
	}

	.s2__alert {
		margin-inline: var(--fa-space-6);
	}

	.s2__pills {
		grid-template-columns: repeat(2, 1fr);
	}

	.s2__options,
	.s2__options--two,
	.s2__options--four {
		grid-template-columns: 1fr;
	}

	.s2__row {
		grid-template-columns: 1fr;
	}

	.s2__steps {
		gap: var(--fa-space-4);
		font-size: var(--fa-text-13);
	}
}

@media (prefers-reduced-motion: reduce) {
	.s2__panel-head svg,
	.s2__pill-face,
	.s2__option-face,
	.s2__pay-face,
	.s2__cta {
		transition-duration: 1ms;
	}
}

/* ==========================================================================
   Modal płatności (fa-pay)

   Płatność dzieje się tutaj, nad formularzem zapisu — bez checkoutu i bez
   opuszczania strony. Wyjątkiem jest przelew, który przenosi do banku.
   ========================================================================== */

.fa-pay {
	width: min(520px, calc(100vw - var(--fa-space-8)));
	max-height: calc(100dvh - var(--fa-space-8));
	padding: var(--fa-space-8);
	overflow-y: auto;
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
	color: var(--fa-text-primary);
	box-shadow: var(--fa-shadow-lift);
}

.fa-pay::backdrop {
	background: rgb(14 15 17 / 0.72);
}

.fa-pay__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fa-space-4);
}

.fa-pay__title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

/* Focus jest tu wyłącznie programowy (autofocus przy otwarciu), a klawiaturą
   nie da się tu wejść — obrys tylko wyglądałby jak błąd. */
.fa-pay__title:focus {
	outline: none;
}

.fa-pay__close {
	padding: var(--fa-space-2);
	font-size: var(--fa-text-24);
	line-height: 1;
	color: var(--fa-text-secondary);
	background: none;
	border: 0;
	cursor: pointer;
}

.fa-pay__close:is(:hover, :focus-visible) {
	color: var(--fa-text-primary);
}

.fa-pay__amount {
	margin-top: var(--fa-space-3);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-32);
	font-weight: 800;
	color: var(--fa-orange-500);
}

.fa-pay__note,
.fa-pay__hint {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-13);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

/* Trzy metody obok siebie; na wąskim ekranie jedna pod drugą, bo nazwy banków
   i opisy nie mieszczą się w trzeciej części szerokości telefonu. */
/* Kolumny liczą się z widocznych kafelków, nie ze sztywnej trójki: wybór z formularza
   ogranicza listę do jednej albo dwóch metod i pusty slot zostawiałby dziurę. */
.fa-pay__methods {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--fa-space-2);
	margin-top: var(--fa-space-6);
}

.fa-pay__method {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
	padding: var(--fa-space-4);
	text-align: left;
	color: var(--fa-text-secondary);
	background: var(--fa-ink-900);
	border: 1px solid var(--fa-ink-500);
	cursor: pointer;
	transition: border-color 150ms, color 150ms;
}

.fa-pay__method:is(:hover, :focus-visible),
.fa-pay__method:has(:focus-visible) {
	color: var(--fa-text-primary);
	border-color: var(--fa-ink-400);
}

/* W modalu metoda to przycisk sterowany przez Alpine, na landingu QR — etykieta z radiem.
   Drugi selektor pozwala tamtemu ekranowi pokazać wybór bez czekania na JavaScript. */
.fa-pay__method.is-on,
.fa-pay__method:has(:checked) {
	color: var(--fa-text-primary);
	border-color: var(--fa-orange-500);
	background: var(--fa-orange-tint);
}

.fa-pay__method-name {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-16);
	font-weight: 700;
	text-transform: uppercase;
}

.fa-pay__method-desc {
	font-size: var(--fa-text-12);
	line-height: var(--fa-leading-tight);
}

.fa-pay__panel {
	margin-top: var(--fa-space-6);
}

/* Pola karty.

   SDK PayU renderuje w iframe wyłącznie tekst — tło, ramka, etykieta i obrys focusa
   są nasze, bo iframe jest przezroczysty i nie da się go ostylować z zewnątrz.
   Stan focusa i błędu przypina JS klasami, na podstawie zdarzeń SDK. */
.fa-pay__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fa-space-3);
}

.fa-pay__field--wide {
	grid-column: 1 / -1;
}

.fa-pay__field {
	padding: var(--fa-space-3) var(--fa-space-4);
	background: var(--fa-ink-900);
	border: 1px solid var(--fa-ink-500);
	transition: border-color 150ms;
}

.fa-pay__field.is-focus {
	border-color: var(--fa-orange-500);
	outline: 2px solid var(--fa-orange-500);
	outline-offset: -1px;
}

/* Także obrys, nie samo obramowanie: przy zaznaczonym polu z błędem
   pomarańczowy outline z `.is-focus` przykrywałby czerwoną ramkę. */
.fa-pay__field.is-invalid {
	border-color: var(--fa-error);
	outline-color: var(--fa-error);
}

.fa-pay__field-brand {
	float: right;
	font-weight: 700;
	color: var(--fa-text-muted);
}

.fa-pay__field-label {
	display: block;
	margin-bottom: var(--fa-space-2);
	font-size: var(--fa-text-12);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
}

/* Iframe PayU nie ma własnej wysokości, więc bez tego zapada się do zera. */
.fa-pay__field-slot {
	height: 24px;
}

.fa-pay__field-slot iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.fa-pay__field-error {
	font-size: var(--fa-text-12);
	line-height: var(--fa-leading-tight);
	color: var(--fa-error);
}

.fa-pay__field-error:not(:empty) {
	margin-top: var(--fa-space-2);
}

.fa-pay__consent {
	margin-top: var(--fa-space-3);
	font-size: var(--fa-text-12);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-muted);
}

/*
 * Zgoda na pobrania cykliczne jest polem wyboru, nie akapitem — PayU nie dopuszcza zgody
 * dorozumianej z kliknięcia „Zapłać". Kwadrat 20 px trafia w środek pierwszej linii,
 * a treść zgody czyta się jaśniej od reszty noty, bo to ona jest oświadczeniem.
 */
.fa-pay__consent--check {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-3);
	color: var(--fa-text-secondary);
	cursor: pointer;
}

.fa-pay__consent--check input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--fa-orange-500);
	cursor: pointer;
}

.fa-pay__consent--check strong {
	color: var(--fa-text-primary);
	font-weight: 600;
}

.fa-pay__label {
	display: block;
	margin-bottom: var(--fa-space-2);
	font-size: var(--fa-text-13);
	font-weight: 600;
}

.fa-pay__blik,
.fa-pay__bank,
.fa-pay__tekst {
	width: 100%;
	padding: var(--fa-space-3) var(--fa-space-4);
	font-family: inherit;
	font-size: var(--fa-text-16);
	color: var(--fa-text-primary);
	background: var(--fa-ink-900);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
}

.fa-pay__blik {
	font-size: var(--fa-text-24);
	letter-spacing: 0.3em;
	text-align: center;
}

.fa-pay__blik:focus-visible,
.fa-pay__bank:focus-visible,
.fa-pay__tekst:focus-visible {
	border-color: var(--fa-orange-500);
	outline: 2px solid var(--fa-orange-500);
	outline-offset: 2px;
}

.fa-pay__error {
	margin-top: var(--fa-space-4);
	font-size: var(--fa-text-13);
	color: var(--fa-error);
}

.fa-pay__submit {
	width: 100%;
	margin-top: var(--fa-space-6);
}

/* Ekran 3DS banku. Wysokość z zapasem, bo challenge bywa dwuekranowy,
   a przewijanie wewnątrz iframe na mobile działa źle. */
.fa-pay__frame {
	width: 100%;
	height: min(420px, 60dvh);
	margin-top: var(--fa-space-4);
	background: #fff;
	border: 0;
}

.fa-pay__wait {
	padding: var(--fa-space-8) 0;
	text-align: center;
}

.fa-pay__ways {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-3);
	margin-top: var(--fa-space-4);
}

/* Druga droga wyjścia jest równie ważna, ale nie może konkurować z CTA o uwagę. */
.fa-pay__link {
	padding: var(--fa-space-2);
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.fa-pay__link:is(:hover, :focus-visible) {
	color: var(--fa-text-primary);
}

@media (max-width: 560px) {
	.fa-pay {
		padding: var(--fa-space-6);
	}

	.fa-pay__methods {
		grid-auto-flow: row;
	}

	.fa-pay__method {
		flex-direction: row;
		align-items: baseline;
		gap: var(--fa-space-3);
	}
}

/* Modal z treścią regulaminu i polityki prywatności.
   Treść pochodzi z edytora WordPressa, więc stylujemy elementy, nie klasy. */

.fa-doc {
	display: flex;
	flex-direction: column;
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100dvh - 64px);
	padding: 0;
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
	box-shadow: var(--fa-shadow-lift);
}

.fa-doc:not([open]) {
	display: none;
}

.fa-doc::backdrop {
	background: rgb(14 15 17 / 0.78);
}

.fa-doc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fa-space-4);
	padding: var(--fa-space-6) var(--fa-space-8);
	border-bottom: 1px solid var(--fa-ink-600);
}

.fa-doc__title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.fa-doc__title:focus {
	outline: none;
}

/* Regulaminy bywają długie — przewija się treść, nie całe okno. */
.fa-doc__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--fa-space-6) var(--fa-space-8);
	font-size: var(--fa-text-15);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.fa-doc__body :is(h1, h2, h3, h4) {
	margin: var(--fa-space-3) 0;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fa-text-primary);
}

.fa-doc__body :is(p, ul, ol) {
	margin: 0 0 var(--fa-space-4);
}

.fa-doc__body :is(ul, ol) {
	padding-left: var(--fa-space-6);
}

.fa-doc__body li {
	margin-bottom: var(--fa-space-2);
}

.fa-doc__body strong {
	color: var(--fa-text-primary);
}

.fa-doc__body table {
	width: 100%;
	margin-bottom: var(--fa-space-4);
	border-collapse: collapse;
}

.fa-doc__body :is(th, td) {
	padding: var(--fa-space-2) var(--fa-space-3);
	text-align: left;
	border: 1px solid var(--fa-ink-600);
}

.fa-doc__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-4);
	align-items: center;
	justify-content: space-between;
	padding: var(--fa-space-4) var(--fa-space-8) var(--fa-space-6);
	border-top: 1px solid var(--fa-ink-600);
}

.fa-doc__ok {
	text-decoration: none;
}

/* Odnośnik w etykiecie zgody: widoczny, ale nie krzyczy nad przyciskiem płatności. */
.s2__check a {
	color: var(--fa-orange-300);
	text-underline-offset: 3px;
}

@media (max-width: 560px) {
	.fa-doc__head,
	.fa-doc__body,
	.fa-doc__foot {
		padding-inline: var(--fa-space-6);
	}
}

/* ==========================================================================
   Modal logowania

   Ekran wp-login.php nie pokazuje się nigdzie — goły WordPress w środku ścieżki
   zapisu wygląda jak inna strona. Modal siedzi na tej samej stronie, więc po
   zalogowaniu rodzic wraca dokładnie tam, gdzie był.
   ========================================================================== */

.fa-login {
	width: min(420px, calc(100vw - 32px));
	padding: var(--fa-space-8);
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
	box-shadow: var(--fa-shadow-lift);
}

.fa-login::backdrop {
	background: rgb(14 15 17 / 0.72);
}

.fa-login__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fa-space-4);
}

.fa-login__title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.fa-login__title:focus {
	outline: none;
}

.fa-login__lead {
	margin: var(--fa-space-3) 0 var(--fa-space-6);
	font-size: var(--fa-text-13);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.fa-login__label {
	display: block;
	margin-bottom: var(--fa-space-2);
	font-size: var(--fa-text-12);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
}

.fa-login__input {
	width: 100%;
	margin-bottom: var(--fa-space-4);
	padding: var(--fa-space-3) var(--fa-space-4);
	font-family: inherit;
	font-size: var(--fa-text-16);
	color: var(--fa-text-primary);
	background: var(--fa-ink-900);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
}

.fa-login__input:focus-visible {
	border-color: var(--fa-orange-500);
	outline: 2px solid var(--fa-orange-500);
	outline-offset: -1px;
}

.fa-login__error:not(:empty) {
	margin-bottom: var(--fa-space-4);
	font-size: var(--fa-text-13);
	color: var(--fa-error);
}

.fa-login__submit {
	width: 100%;
	text-decoration: none;
}

.fa-login__foot {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
	margin-top: var(--fa-space-6);
	padding-top: var(--fa-space-4);
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
	border-top: 1px solid var(--fa-ink-600);
}

/* ---------------------------------------------------------------- S7 wejscie QR */

/*
 * Landing po zeskanowaniu kodu przy recepcji. Jedna kolumna wysrodkowana w oknie,
 * bo caly ekran to kwota i sposob zaplaty — nie ma czego ukladac obok.
 * Pola i przyciski sa wspolne z modalem platnosci (.fa-pay__*), wiec tu zostaje sama rama.
 */

.s7 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--fa-space-6) var(--fa-space-4);
}

.s7__box {
	width: min(440px, 100%);
}

.s7__logo {
	width: 132px;
	height: auto;
	margin: 0 auto var(--fa-space-8);
}

.s7__title {
	font-size: var(--fa-text-40);
}

.s7__lead {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-15);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.s7__waiting {
	margin-top: var(--fa-space-8);
	font-size: var(--fa-text-24);
}

.s7__legal {
	margin-top: var(--fa-space-6);
	font-size: var(--fa-text-12);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-muted);
}

/* Potwierdzenie oglada trener, przez wyciagnieta reke — stad duzy znak i duza kwota. */
.s7__ok {
	text-align: center;
}

.s7__ok-mark {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--fa-space-6);
	background: var(--fa-success);
}

.s7__ok-mark svg {
	width: 40px;
	height: 40px;
	color: var(--fa-ink-950);
}

.s7__facts {
	display: grid;
	gap: 1px;
	margin: var(--fa-space-8) 0 0;
	background: var(--fa-ink-600);
	border: 1px solid var(--fa-ink-600);
}

.s7__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fa-space-4);
	padding: var(--fa-space-3) var(--fa-space-4);
	background: var(--fa-ink-800);
}

.s7__facts dt {
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
}

.s7__facts dd {
	margin: 0;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-20);
	font-weight: 700;
}