/* Wpis „Konto” (recenzja): nagłówek z oceną, aktualna promocja, spis treści, sekcje treści. */

/* ---------- Nagłówek ---------- */
.account-hero-inner {
	padding-bottom: var(--space-64);
}

.account-hero-text {
	gap: var(--space-20);
}

.account-hero-brand {
	display: flex;
	align-items: center;
	gap: var(--space-20);
}

.account-hero-brand .bank-logo {
	flex-shrink: 0;
}

.account-hero-brand .account-title {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.bank-logo-lg {
	width: var(--size-bank-logo-lg);
	height: var(--size-bank-logo-lg);
	border-radius: var(--radius-2xl);
	border: 0;
	background: var(--color-surface);
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-brand);
}

.account-title {
	font-size: var(--text-hero-lg);
}

/* Ocena */
.rating {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-16);
	margin-top: var(--space-xs);
}

.rating-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-16) var(--space-22);
	border-radius: var(--radius-3xl);
	background: var(--color-brand-strong);
}

.rating-value {
	font-size: var(--text-display-sm);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-tight);
}

.rating-max {
	font-size: var(--text-2xl);
	color: var(--color-on-dark-muted);
}

.stars {
	display: flex;
	gap: var(--space-2xs);
	color: var(--color-cta-hover);
}

.star.is-filled {
	fill: currentColor;
}

.rating-parts {
	flex: 1 1 var(--basis-rating-parts);
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: var(--space-8) var(--space-20);
	margin: 0;
	font-size: var(--text-md);
}

.rating-part {
	flex: 1 1 var(--basis-number);
	display: flex;
	justify-content: space-between;
	gap: var(--space-8);
	padding: var(--space-xs) 0;
	border-bottom: var(--border-width) solid var(--color-brand-soft);
}

.rating-part-label {
	font-weight: var(--weight-semibold);
	color: var(--color-on-dark-muted);
}

.rating-part-value {
	margin: 0;
	font-weight: var(--weight-extrabold);
}

/* Karta „Najważniejsze w liczbach” */
.numbers-card {
	gap: var(--space-16);
	padding: var(--space-24);
}

.numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	font-size: var(--text-md);
}

.numbers .bonus-fact {
	flex: 1 1 var(--basis-number);
}

.numbers-value {
	font-size: var(--text-lg);
}

/* ---------- Aktualna promocja (nachodzi na nagłówek) ---------- */
.account-promo {
	margin-top: calc(var(--space-32) * -1);
}

.account-promo-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-28) var(--space-32);
	border-radius: var(--radius-5xl);
	border: var(--border-width-thick) solid var(--color-cta);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.account-promo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-24) var(--space-40);
}

/* Naklejka „promocja!”: wystaje nad kartę (ujemny margines, bez pozycjonowania). */
.account-promo-sticker {
	display: flex;
	height: 0;
	margin: calc((var(--space-28) + var(--space-18)) * -1) 0 calc(var(--space-28) + var(--space-18) + var(--space-6));
}

.account-promo-sticker .badge-hand {
	height: fit-content;
	transform: rotate(var(--width-rotate-flip));
}

.account-promo-text {
	flex: 1 1 var(--basis-account-promo);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-top: var(--space-6);
}

.account-promo-title {
	font-size: var(--text-6xl);
	line-height: var(--leading-card);
}

.account-promo-amount .amount-value {
	font-size: var(--text-10xl);
	line-height: 1;
}

.account-promo-actions {
	flex: 1 1 var(--basis-sidebar);
	max-width: var(--width-sidebar);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* ---------- Spis treści ---------- */
.toc {
	margin-top: var(--space-32);
}

.toc-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	padding: var(--space-6);
	border-radius: var(--radius-2xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
}

.toc-link {
	display: flex;
	align-items: center;
	min-height: var(--size-touch);
	padding: 0 var(--space-14);
	border-radius: var(--radius-md);
	color: var(--color-brand);
	text-decoration: none;
}

.toc-link:hover {
	background: var(--color-tint);
}

.toc-link[aria-current="true"] {
	background: var(--color-brand);
	color: var(--color-on-dark);
}

/* ---------- Treść recenzji ---------- */
.content-layout-account {
	padding-top: var(--space-40);
}

.content-main-wide {
	gap: var(--space-56);
}

.content-layout-account .entry-content > h2,
.content-layout-account .entry-content > .content-section-head {
	margin-top: var(--space-40);
}

.content-layout-account .entry-content > :first-child {
	margin-top: 0;
}

.content-section-head {
	margin-bottom: 0;
}

.verdict > p:not(.hand-note) {
	color: var(--color-text-body);
}

/* Odznaki „Sprawdzone osobiście…” */
.proof-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
}

.proof {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-6) var(--space-12);
	border-radius: var(--radius-pill);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text-body);
}

.proof-main {
	border-color: var(--color-tint);
	background: var(--color-tint);
	color: var(--color-brand);
}

/* Tabela opłat */
.fee-table {
	border-radius: var(--radius-4xl);
}

.fee-table table {
	min-width: var(--width-fee-table);
}

.fee-table thead th {
	padding: var(--space-14) var(--space-20);
	background: var(--color-tint);
	color: var(--color-brand);
}

.fee-table th,
.fee-table td {
	padding: var(--space-12) var(--space-20);
}

.fee-table thead th,
.fee-table tbody tr:last-child > * {
	border-bottom: 0;
}

.fee-table tbody th {
	background: none;
	font-weight: var(--weight-bold);
}

.fee-cost {
	font-weight: var(--weight-extrabold);
}

.fee-free {
	color: var(--color-success);
}

.fee-paid {
	color: var(--color-accent-text);
}

.fee-note {
	color: var(--color-text-body);
}

/* Baner kalkulatora */
.calc-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16) var(--space-24);
	padding: var(--space-20) var(--space-24);
	border-radius: var(--radius-4xl);
	background: var(--color-ink);
	color: var(--color-on-dark);
}

.calc-banner-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-notice-icon);
	height: var(--size-notice-icon);
	border-radius: var(--radius-xl);
	background: var(--color-dim);
	color: var(--color-cta-hover);
}

.calc-banner-text {
	flex: 1 1 var(--basis-calc-text);
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.calc-banner-title {
	font-size: var(--text-lg);
}

.calc-banner-lead {
	font-size: var(--text-md);
	color: var(--color-on-dark-muted);
}

.entry-content .calc-banner .button-primary {
	padding: 0 var(--space-18);
}

/* Plusy i minusy */
.pros-cons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.pros-cons-box {
	flex: 1 1 var(--basis-eligibility);
	min-width: 0;
	padding: var(--space-22) var(--space-24);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink-soft);
}

.entry-content .pros-cons-box h3 {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin: 0 0 var(--space-12);
	font-size: var(--text-lg);
	color: var(--color-success);
}

.entry-content .pros-cons-box.is-cons h3 {
	color: var(--color-accent-text);
}

.entry-content .pros-cons-box ul {
	gap: var(--space-8);
	padding-left: var(--space-20);
}

/* „Dla kogo”: karty z nagłówkiem H3 (styl Bierz / Odpuść) */
.verdict-option:has(> h3) {
	padding: var(--space-22) var(--space-24);
	border-radius: var(--radius-4xl);
}

.entry-content .verdict-option h3 {
	margin: 0 0 var(--space-10);
	font-size: var(--text-lg);
	color: var(--color-brand);
}

.entry-content .verdict-option + .verdict-option h3 {
	color: var(--color-accent-strong);
}

.entry-content .verdict-option h3 + p {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-ink-soft);
}

/* Kafelki z numerami */
.tile-steps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile-step {
	flex: 1 1 var(--basis-tile);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-18);
	border-radius: var(--radius-3xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.tile-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-tile-number);
	height: var(--size-tile-number);
	border-radius: var(--radius-pill);
	background: var(--color-brand);
	color: var(--color-on-dark);
	font-weight: var(--weight-extrabold);
}

.tile-step-text {
	font-size: var(--text-md);
	color: var(--color-text-body);
}

/* Wskazówka */
.tip {
	display: flex;
	gap: var(--space-12);
	padding: var(--space-16) var(--space-18);
	border-radius: var(--radius-2xl);
	background: var(--color-accent-tint-3);
	color: var(--color-accent-deep);
	font-size: var(--text-base-sm);
}

.tip-icon {
	flex: none;
	margin-top: var(--space-2xs);
	color: var(--color-accent-text);
}

/* Historia promocji: oś czasu z kropkami */
.history {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 0 0 var(--space-10);
	padding: 0;
	list-style: none;
	border-left: var(--border-width-thick) solid var(--color-border-strong);
}

.history-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	padding-bottom: var(--space-18);
}

.history-item:last-child {
	padding-bottom: 0;
}

.history-dot {
	flex: none;
	width: var(--size-dot);
	height: var(--size-dot);
	margin: var(--space-6) 0 0 calc(var(--size-dot) / -2 - var(--border-width));
	border-radius: var(--radius-pill);
	border: var(--border-width-dot) solid var(--color-bg);
	background: var(--color-cta);
}

.history-item.is-ended .history-dot {
	background: var(--color-placeholder-line);
}

.history-card {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-6) var(--space-16);
	padding: var(--space-14) var(--space-18);
	border-radius: var(--radius-2xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
}

.entry-content .history-card {
	color: var(--color-ink);
	text-decoration: none;
}

.history-item.is-ended .history-card {
	border-style: dashed;
	border-color: var(--color-border-strong);
}

.history-card:hover {
	background: var(--color-surface-hover);
}

.history-card-text {
	flex: 1 1 var(--basis-history-text);
	min-width: 0;
}

.history-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6) var(--space-10);
}

.history-card-head .badge {
	padding: var(--space-2xs) var(--space-8);
}

.history-item.is-ended .history-card-title,
.history-item.is-ended .history-card-amount {
	color: var(--color-text-body);
}

.history-card-dates {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.history-card-amount {
	font-size: var(--text-lg);
	color: var(--color-brand);
}

.alert-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-12);
	padding: var(--space-20) var(--space-22);
	border-radius: var(--radius-4xl);
	background: var(--color-tint);
}

.alert-form-field {
	flex: 1 1 var(--basis-reminder-text);
	min-width: 0;
}

.alert-form .label,
.alert-form .form-label-lg {
	font-size: var(--text-base-sm);
}

.alert-form .input {
	padding: 0 var(--space-14);
}

.alert-form .button-brand {
	padding: 0 var(--space-20);
}

/* Karta konta w porównaniu */
.card-account {
	gap: var(--space-10);
}

.card-account .bank-logo {
	width: var(--size-bank-logo-w);
}

.card-account .card-mini-title {
	font-size: var(--text-lg);
}

.card-account-row {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-md);
}

.card-account-label {
	color: var(--color-text-muted);
}

.card-account-rating {
	color: var(--color-brand);
}

.card-account-badge {
	align-self: flex-start;
}

/* O autorze */
.author-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20);
	padding: var(--space-24) var(--space-28);
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.avatar-xl {
	width: var(--size-avatar-xl);
	height: var(--size-avatar-xl);
	font-size: var(--text-7xl);
}

.author-box-text {
	flex: 1 1 var(--basis-author-text);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.author-box-name {
	font-size: var(--text-xl);
}

.author-box-bio {
	margin: 0;
	font-size: var(--text-base-sm);
	color: var(--color-text-body);
}

.author-box-links {
	margin: var(--space-xs) 0 0;
	font-size: var(--text-md);
}

/* Sortowanie komentarzy */
.comments-sort {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-10);
}

/* Na szerszych ekranach sortowanie stoi obok nagłówka „Komentarze” (jak w makiecie). */
@media (min-width: 601px) {
	.comments-sort {
		align-self: flex-end;
		margin: calc((var(--size-touch) + var(--space-12)) * -1) 0 calc(var(--space-12) - var(--space-20));
	}
}

.select {
	min-height: var(--size-touch);
	padding: 0 var(--space-14);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
}

/* Panel boczny: wiersz promocji z logo */
.side-box-head-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-8);
	padding-block: var(--space-8);
}

.side-box-title-icon {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	margin: 0;
}

.side-box-head-row .link-more {
	flex: none;
	font-size: var(--text-sm);
}

.side-box-title-icon .icon-md {
	color: var(--color-accent-text);
}

.side-row-promo {
	align-items: center;
	padding-block: var(--space-14);
}

.side-row-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.side-row-name {
	font-size: var(--text-base-sm);
	line-height: var(--leading-snug);
}

.side-row-meta {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.side-row-urgent {
	font-weight: var(--weight-bold);
	color: var(--color-accent-text);
}

.side-row-amount {
	flex: none;
	color: var(--color-brand);
}

.side-dark-link {
	gap: var(--space-10);
	text-decoration: none;
}

.side-dark-link:hover {
	color: var(--color-on-dark);
}

.side-dark-link .button-primary {
	margin-top: var(--space-xs);
}

@media (max-width: 1023px) {
	.account-title {
		font-size: var(--text-9xl);
	}

	.account-hero-inner {
		padding-bottom: var(--space-56);
	}
}

@media (max-width: 600px) {
	.account-title {
		font-size: var(--text-title);
	}

	.account-promo-card {
		padding: var(--space-22) var(--space-20);
	}

	.account-promo-title {
		font-size: var(--text-4xl);
	}

	.account-promo-amount .amount-value {
		font-size: var(--text-hero-sm);
	}

	.content-layout-account {
		padding-top: var(--space-28);
	}

	.content-main-wide {
		gap: var(--space-28);
	}

	.content-layout-account .entry-content > h2,
	.content-layout-account .entry-content > .content-section-head {
		margin-top: var(--space-12);
	}

	.author-box {
		padding: var(--space-22) var(--space-20);
	}
}