/* Finsinder – kierunek „jasny fintech”: biel, mięta, zieleń jako akcent, granatowy tekst. Mobile-first, bez animacji. */

/* :root:root – wyższa specyficzność niż :root w CSS wtyczki, niezależnie od kolejności ładowania. */
:root:root {
	--fs-green: var(--wp--preset--color--akcent);
	--fs-green-dark: var(--wp--preset--color--akcent-ciemny);
	--fs-mint: var(--wp--preset--color--akcent-jasny);
	--fs-mint-bg: var(--wp--preset--color--tlo-sekcji);
	--fs-shadow-soft: 0 1px 2px rgb(11 31 58 / 4%), 0 10px 30px rgb(11 31 58 / 7%);

	/* Zmienne wtyczki Finsinder Core. */
	--fs-on-accent: #fff;
	--fs-accent-hover: var(--wp--preset--color--akcent-ciemny);
	--fs-bonus-bg: #fff8eb;
	--fs-bonus-border: #f5d9a8;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--link);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

.fs-btn {
	border-radius: 999px;
}

.fs-btn--cta:hover {
	background: var(--fs-green-dark);
	color: #fff;
}

.fs-card__bonus-label {
	color: #8a5a0b;
}

.fs-card__bonus-icon {
	background: #ef9f27;
}

/* ---------- Nagłówek ---------- */

.fs-header {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--wp--preset--color--ramka);
	box-shadow: 0 2px 12px rgb(11 31 58 / 5%);
}

.admin-bar .fs-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .fs-header {
		top: 32px;
	}
}

.fs-header .wp-block-site-title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fs-header .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--granat);
	text-decoration: none;
}

/* Znak marki: zielony kwadrat z „✓” – czysty CSS, bez obrazka. */
.fs-header .wp-block-site-title a::before,
.fs-footer .wp-block-site-title a::before {
	content: "✓";
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 8px;
	background: var(--fs-green);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 800;
}

.fs-header .wp-block-navigation a {
	color: var(--wp--preset--color--granat);
	text-decoration: none;
}

.fs-header .wp-block-navigation a:hover,
.fs-header .wp-block-navigation .current-menu-item > a {
	color: var(--fs-green);
}

.fs-header .wp-block-navigation__responsive-container-open,
.fs-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.fs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
}

.fs-header-cta .wp-block-button__link {
	padding: 0.6em 1.15em;
	border-radius: 999px;
	background: var(--fs-green);
	color: #fff;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.fs-header-cta .wp-block-button__link:hover {
	background: var(--fs-green-dark);
	color: #fff;
}

@media (max-width: 400px) {
	.fs-header-cta .wp-block-button__link {
		padding: 0.55em 0.8em;
		font-size: 0.8125rem;
	}
}

/* ---------- Elementy wspólne ---------- */

.fs-tag {
	margin-bottom: 0.5rem !important;
	color: var(--fs-green);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fs-section-title .wp-block-heading {
	margin-top: 0 !important;
	max-width: 720px;
}

.fs-section-lead {
	max-width: 640px;
	color: var(--wp--preset--color--tekst-pomocniczy);
	font-size: 1.0625rem;
}

/* ---------- Zdjęcia ---------- */

.fs-photo {
	margin: 0 !important;
}

.fs-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
}

.fs-photo--tall img {
	aspect-ratio: 4 / 5;
}

.fs-hero__media {
	position: relative;
}

.fs-hero__media .fs-photo img {
	aspect-ratio: 5 / 4;
	box-shadow: 0 20px 50px rgb(11 31 58 / 18%);
}

.fs-float {
	position: absolute;
	z-index: 2;
	padding: 0.7rem 1rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgb(11 31 58 / 18%);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.fs-float p {
	margin: 0;
}

.fs-float strong {
	display: block;
	color: var(--fs-green-dark);
	font-size: 1.25rem;
	font-weight: 800;
}

.fs-float--top {
	top: 8%;
	left: -1.5rem;
}

.fs-float--bottom {
	right: -1rem;
	bottom: 8%;
}

.fs-float--bottom strong {
	color: var(--wp--preset--color--granat);
	font-size: 1rem;
}

@media (max-width: 781px) {
	.fs-float--top {
		left: 0.75rem;
	}

	.fs-float--bottom {
		right: 0.75rem;
	}
}

/* Karty grup 18–26 / 26+. */
.fs-group {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--ramka);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--fs-shadow-soft);
}

.fs-group .fs-photo img {
	aspect-ratio: 16 / 9;
	border-radius: 0;
}

.fs-group__body {
	padding: 1.5rem 1.5rem 1.75rem;
}

.fs-group__body h3 {
	margin-top: 0;
	font-size: 1.5rem;
}

.fs-group__body > p {
	color: var(--wp--preset--color--tekst-pomocniczy);
}

/* Kroki w jednym rzędzie. */
.fs-steps-row .wp-block-column {
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--ramka);
}

.fs-steps-row h3 {
	margin: 0.75rem 0 0.35rem;
}

.fs-steps-row p:not(.fs-step-number) {
	margin: 0;
	color: var(--wp--preset--color--tekst-pomocniczy);
}

.fs-pill .wp-block-button__link {
	padding: 0.95em 1.7em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
}

.fs-pill--green .wp-block-button__link {
	background: var(--fs-green);
	color: #fff;
	box-shadow: 0 6px 18px rgb(15 110 86 / 25%);
}

.fs-pill--green .wp-block-button__link:hover {
	background: var(--fs-green-dark);
	color: #fff;
}

.fs-pill--outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--granat);
	background: #fff;
	color: var(--wp--preset--color--granat);
}

.fs-pill--outline .wp-block-button__link:hover {
	background: var(--fs-mint-bg);
	color: var(--wp--preset--color--granat);
}

.fs-pill--white .wp-block-button__link {
	background: #fff;
	color: var(--fs-green-dark);
}

.fs-pill--white .wp-block-button__link:hover {
	background: var(--fs-mint);
	color: var(--fs-green-dark);
}

/* Lista z zielonymi „ptaszkami” – sygnały zaufania. */
.fs-checklist {
	display: grid;
	gap: 0.6rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.fs-checklist li {
	position: relative;
	padding-left: 2rem;
	color: var(--wp--preset--color--tekst);
}

.fs-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.05rem;
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--fs-mint);
	color: var(--fs-green-dark);
	font-size: 0.8rem;
	font-weight: 800;
}

.fs-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0 0 !important;
	padding: 0 !important;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tekst-pomocniczy);
}

.fs-trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.fs-trust li::before {
	content: "✓";
	color: var(--fs-green);
	font-weight: 800;
}

/* ---------- Hero ---------- */

.fs-hero h1 {
	margin-top: 0;
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.fs-hero h1 .fs-hl {
	color: var(--fs-green);
}

.fs-hero__lead {
	max-width: 560px;
	color: var(--wp--preset--color--tekst-pomocniczy);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.7;
}

.fs-hero__art img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.fs-hero__art {
		max-width: 340px;
		margin-inline: auto;
	}
}

.fs-hero__stats {
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* Bloki wtyczki w kolorach kierunku A. */
.fs-stat {
	border-radius: 16px;
	box-shadow: var(--fs-shadow-soft);
}

.fs-stat .fs-icon {
	color: var(--fs-green);
}

.fs-cat {
	border-radius: 18px;
	box-shadow: var(--fs-shadow-soft);
}

.fs-cat:hover {
	border-color: var(--fs-green);
}

.fs-cat__icon {
	border-radius: 14px;
	background: var(--fs-green);
}

.fs-cat--child .fs-cat__icon {
	background: var(--fs-mint);
	color: var(--fs-green-dark);
}

.fs-cat__bonus {
	color: #8a5a0b;
}

.fs-switcher a[aria-current="page"] {
	background: var(--fs-green);
}

/* Porównywarka: spokojniejsze karty. */
.fs-ranking__list {
	gap: 1.25rem;
}

.fs-card__param dd {
	font-weight: 600;
}

.fs-card__lead {
	font-size: 0.9375rem;
}

.fs-card__logo .fs-logo:not(.fs-logo--text) {
	max-height: 48px;
}

.fs-card {
	border-radius: 20px;
}

.fs-card--wyrozniona {
	border-color: var(--fs-green);
	background: linear-gradient(180deg, var(--fs-mint-bg) 0, #fff 160px);
}

.fs-card__badge {
	background: var(--fs-green);
	color: #fff;
}

.fs-ranking__item:nth-child(-n + 3) .fs-card__pos {
	background: var(--fs-green);
}

.fs-tile {
	border-radius: 20px;
	box-shadow: var(--fs-shadow-soft);
}

.fs-offer-cta {
	border-radius: 24px;
	background: var(--fs-green-dark);
}

/* ---------- Karty sekcji ---------- */

.fs-cards .wp-block-column,
.fs-card-box {
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--wp--preset--color--ramka);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--fs-shadow-soft);
}

.fs-cards h3 {
	margin-top: 0.5rem;
}

.fs-card-img img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin-inline: auto;
}

.fs-step-number {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0.75rem 0 0 !important;
	border-radius: 50%;
	background: var(--fs-green);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
}

.fs-kicker {
	margin: 0 !important;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fs-green-dark);
}

.fs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1rem 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.fs-chips li {
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--fs-mint-bg);
	border: 1px solid var(--fs-mint);
	color: var(--fs-green-dark);
	font-size: 0.8125rem;
	font-weight: 600;
}

.fs-feature h3 {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
}

.fs-feature p {
	margin: 0;
	color: var(--wp--preset--color--tekst-pomocniczy);
}

/* ---------- Pasek CTA ---------- */

.fs-cta-band {
	border-radius: 28px;
}

.fs-cta-band :where(h2, p) {
	color: #fff;
}

.fs-cta-band .fs-section-lead,
.fs-cta-band p {
	color: rgb(255 255 255 / 85%);
}

.fs-cta-band .fs-photo img {
	border-radius: 18px;
}

/* ---------- Nagłówek podstrony ---------- */

.fs-page-head h1,
.fs-page-head .wp-block-query-title {
	margin-top: 0;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	letter-spacing: -0.02em;
}

.fs-page-head__lead,
.fs-page-head .wp-block-term-description {
	max-width: 620px;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--tekst-pomocniczy);
}

.fs-page-head__art .fs-photo img {
	aspect-ratio: 4 / 3;
	border-radius: 20px;
}

@media (max-width: 781px) {
	.fs-page-head__art {
		display: none;
	}
}

.fs-page-head .fs-stats {
	margin-top: 1.5rem;
}

.fs-page-head--light h1 {
	color: var(--wp--preset--color--granat);
}

/* ---------- Sekcje ---------- */

.fs-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.fs-section-head > * {
	margin: 0;
}

.fs-more-link a {
	font-weight: 700;
	text-decoration: none;
	color: var(--fs-green-dark);
}

.fs-more-link a:hover {
	text-decoration: underline;
}

/* ---------- Słowniczek ---------- */

.fs-glossary {
	display: grid;
	gap: 0.75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

@media (min-width: 720px) {
	.fs-glossary {
		grid-template-columns: 1fr 1fr;
	}
}

.fs-glossary li {
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--ramka);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--fs-shadow-soft);
}

.fs-glossary strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--fs-green-dark);
	font-size: 1.0625rem;
}

/* ---------- Poradnik ---------- */

.fs-posts .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--ramka);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--fs-shadow-soft);
}

.fs-posts .wp-block-post-featured-image {
	margin: -1.25rem -1.25rem 0.5rem;
}

.fs-posts .wp-block-post-featured-image img {
	border-radius: 20px 20px 0 0 !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.fs-post-cat a {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: var(--fs-mint);
	color: var(--fs-green-dark);
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}

.fs-posts .wp-block-post-title {
	margin: 0;
	font-size: 1.125rem;
}

.fs-posts .wp-block-post-title a {
	color: var(--wp--preset--color--granat);
	text-decoration: none;
}

.fs-posts .wp-block-post-title a:hover {
	text-decoration: underline;
}

.fs-posts .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--tekst-pomocniczy);
	font-size: 0.9375rem;
}

.fs-posts .wp-block-read-more {
	margin-top: auto;
	color: var(--fs-green-dark);
	font-weight: 700;
	text-decoration: none;
}

.fs-article-meta {
	color: var(--wp--preset--color--tekst-pomocniczy);
	font-size: 0.875rem;
}

.fs-article-meta > * {
	margin: 0;
}

.wp-block-post-content :where(h2, h3) {
	scroll-margin-top: 5rem;
}

/* ---------- Stopka ---------- */

.fs-footer {
	color: rgb(255 255 255 / 72%);
	font-size: 0.9375rem;
}

.fs-footer :where(h2, h3, .wp-block-site-title) {
	color: #fff;
}

.fs-footer .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.fs-footer h2 {
	font-size: 0.875rem !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9fe1cb;
}

.fs-footer a {
	color: #fff;
	text-decoration: none;
}

.fs-footer a:hover {
	color: #9fe1cb;
	text-decoration: underline;
}

.fs-footer .fs-aff-note,
.fs-footer .fs-aff-note a {
	color: rgb(255 255 255 / 65%);
	font-size: 0.875rem;
}

.fs-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-footer-links li {
	margin-bottom: 0.4rem;
}

/* ---------- Różne ---------- */

.wp-block-search__input {
	min-height: 48px;
	border-radius: 8px;
}

.wp-block-query-pagination a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
}