/* ============================================================
   DORADCA AI — okienko na stronie głównej
   ============================================================

   ⚠ TEN PLIK NIE JEST CZĘŚCIĄ SYSTEMU PROJEKTOWEGO — jeszcze nie. Wygląd sklepu ma
   źródło w „Adrio Design System" na claude.ai/design, a `tokens.css` i `adrio.css` są
   jego odbiciem. Komponent powstał tutaj, bo powstał razem z funkcją; przy najbliższej
   pracy nad systemem trzeba go tam PRZENIEŚĆ i zsynchronizować w dół, jak resztę.

   Do tego czasu obowiązuje jedna zasada, która trzyma go w ryzach: NIE MA TU ANI
   JEDNEGO HEKSA. Wszystkie kolory, odstępy, promienie i kroje pochodzą z tokenów.
   Dzięki temu zmiana palety w systemie obejmie ten komponent sama — inaczej niż maile
   transakcyjne i zaślepki banerów, gdzie kolory są wpisane na sztywno i przemalowuje
   się je ręcznie.
   ============================================================ */

.polecajka {
	margin: var(--space-6) auto var(--space-7);
	max-width: var(--container-max);
	padding-inline: var(--space-4);
}

.polecajka__panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* ---------- nagłówek ---------- */

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

.polecajka__tytul {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	color: var(--color-text);
	margin: 0;
}

.polecajka__lead {
	font-size: var(--text-base);
	line-height: var(--leading-base);
	color: var(--color-text-muted);
	max-width: 62ch;
	margin: 0;
}

/* ---------- pole rozmowy ---------- */

.polecajka__rozmowa {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-height: 30rem;
	overflow-y: auto;
}

.polecajka__dymek {
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	max-width: 46rem;
}

.polecajka__dymek--klient {
	align-self: flex-end;
	background: var(--color-surface-invert);
	color: var(--color-text-invert);
}

.polecajka__dymek--doradca {
	align-self: flex-start;
	background: var(--color-surface-alt);
	color: var(--color-text);
}

.polecajka__dymek--czeka {
	color: var(--color-text-subtle);
}

/* ---------- karty poleceń ---------- */

.polecajka__karty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-4);
}

.polecajka__karta {
	display: flex;
	gap: var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.polecajka__okladka {
	flex: none;
	width: 5rem;
	aspect-ratio: var(--cover-ratio-tile);
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
}

.polecajka__tresc {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.polecajka__ksiazka {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text);
	margin: 0;
}

.polecajka__autor {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Forma tytułu — e-book albo audiobook. To pierwsza rzecz, o którą pyta klient
   patrzący na listę, i dlatego stoi nad ceną, a nie w opisie. */
.polecajka__typ {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	margin-top: var(--space-1);
}

/* Stopka karty: cena i ODNOŚNIK. Odnośnik jest obowiązkowy — polecenie bez drogi
   do karty tytułu jest ślepym zaułkiem, więc nie chowamy go pod obrazkiem. */
.polecajka__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-2);
}

.polecajka__cena {
	font-weight: 700;
	color: var(--color-price);
}

.polecajka__link {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.polecajka__link:hover,
.polecajka__link:focus-visible {
	color: var(--color-link-hover);
}

/* ---------- „zacznij od nowa" ---------- */

/* Rozmowa przeżywa wyjście ze strony (sessionStorage), więc musi być jak ją zamknąć.
   Przycisk jest dyskretny: to droga wyjścia, a nie zaproszenie. */
.polecajka__odnowa-wiersz {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

.polecajka__odnowa {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.polecajka__odnowa:hover,
.polecajka__odnowa:focus-visible {
	color: var(--color-text);
}

.polecajka__odnowa:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ---------- formularz ---------- */

.polecajka__form {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.polecajka__pole {
	flex: 1 1 18rem;
	min-width: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
}

.polecajka__pole::placeholder {
	color: var(--color-text-subtle);
}

.polecajka__wyslij {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 700;
	padding: var(--space-3) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-on-accent);
	cursor: pointer;
}

.polecajka__wyslij:hover {
	background: var(--color-accent-hover);
}

.polecajka__pole:focus-visible,
.polecajka__wyslij:focus-visible,
.polecajka__link:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.polecajka__pole:disabled,
.polecajka__wyslij:disabled {
	background: var(--color-disabled-bg);
	color: var(--color-disabled-text);
	cursor: default;
}

/* ---------- nota ---------- */

.polecajka__nota {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
}

@media (max-width: 480px) {
	.polecajka__panel {
		padding: var(--space-4);
	}

	.polecajka__karta {
		flex-direction: column;
	}

	.polecajka__okladka {
		width: 4rem;
	}
}