/* Opinie Google — karta podsumowania po lewej, przewijane karty opinii po prawej. Kolory z panelu klienta. */
.po { --po-fiolet: #6d28d9; --po-grad: linear-gradient(135deg, #d946ef, #8b5cf6, #6366f1); --po-tekst: #1e293b; --po-szary: #64748b;
	--po-ramka: #e9e5f5; --po-gwiazda: #fbbc04;
	display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; align-items: start;
	max-width: 1180px; margin: 0 auto; color: var(--po-tekst); text-align: left; line-height: 1.5; }
.po *, .po *::before, .po *::after { box-sizing: border-box; }

/* Podsumowanie */
.po-podsumowanie { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
	padding: 28px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--po-ramka);
	box-shadow: 0 18px 40px -22px rgba(76, 29, 149, .35); position: relative; overflow: hidden; }
.po-podsumowanie::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--po-grad); }
.po-zrodlo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--po-szary);
	padding: 5px 12px; border-radius: 999px; background: #f8f7fc; }
.po-g { width: 18px; height: 18px; flex: none; }
.po-srednia { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-top: 8px;
	background: var(--po-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.po-podsumowanie .po-gwiazdki svg { width: 24px; height: 24px; }
.po-liczba { font-size: 14px; color: var(--po-szary); }
.po-liczba b { color: var(--po-tekst); }
.po-firma { font-size: 13px; color: var(--po-szary); margin-top: 2px; }
.po a.po-napisz { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px;
	border-radius: 999px; background: var(--po-grad); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
	box-shadow: 0 10px 22px -10px rgba(139, 92, 246, .8); transition: transform .15s, box-shadow .15s; }
.po a.po-napisz:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(139, 92, 246, .9); color: #fff; }

/* Gwiazdki */
.po-gwiazdki { display: inline-flex; gap: 2px; }
.po-gwiazdki svg { width: 17px; height: 17px; }
.po-gwiazdki .pelna { fill: var(--po-gwiazda); }
.po-gwiazdki .pusta { fill: #e2e8f0; }

/* Karuzela — wygaszenie na krawędziach podpowiada, że da się przewijać */
.po-karuzela { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.po-lista { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 8px 6px 18px; scroll-padding-left: 6px; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%); }
.po-lista::-webkit-scrollbar { display: none; }
.po-lista:focus-visible { outline: 2px solid #a78bfa; outline-offset: 4px; border-radius: 12px; }

.po-karta { position: relative; flex: 0 0 310px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px;
	padding: 22px 22px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--po-ramka);
	box-shadow: 0 10px 28px -18px rgba(15, 23, 42, .35); transition: transform .2s, box-shadow .2s, border-color .2s; }
.po-karta:hover { transform: translateY(-3px); border-color: #d8ccf5; box-shadow: 0 18px 34px -18px rgba(76, 29, 149, .4); }
.po-cytat { position: absolute; top: 16px; right: 18px; width: 30px; height: 30px; fill: #ede9fe; }
.po-naglowek { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.po-inicjaly { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .02em;
	background: linear-gradient(135deg, hsl(var(--po-h) 70% 58%), hsl(calc(var(--po-h) + 40) 70% 48%)); }
.po-kto { min-width: 0; }
.po-autor { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-data { display: block; font-size: 13px; color: var(--po-szary); }
.po-tresc { margin: 0; font-size: 15px; line-height: 1.6; color: #334155; flex: 1 1 auto;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.po-tresc.rozwinieta { display: block; -webkit-line-clamp: unset; }
.po-tresc--pusta { color: var(--po-szary); font-style: italic; }
.po .po-wiecej { align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -4px; color: var(--po-fiolet);
	font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.po .po-wiecej:hover { text-decoration: underline; }
.po-odpowiedz { font-size: 14px; color: #475569; background: #faf8ff; border-radius: 10px; padding: 8px 12px; }
.po-odpowiedz summary { cursor: pointer; font-weight: 600; color: var(--po-fiolet); }
.po-odpowiedz p { margin: 6px 0 0; }
.po-stopka { display: flex; align-items: center; gap: 6px; padding-top: 12px; margin-top: auto; border-top: 1px solid #f1f0f7;
	font-size: 12px; color: var(--po-szary); }
.po-stopka .po-g { width: 14px; height: 14px; }

/* Nawigacja */
.po-nawigacja { display: flex; align-items: center; justify-content: center; gap: 14px; }
.po .po-strzalka { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--po-ramka); background: #fff; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--po-tekst);
	box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .3); transition: background .15s, color .15s, opacity .15s; }
.po .po-strzalka svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.po .po-strzalka:hover:not([disabled]) { background: var(--po-fiolet); border-color: var(--po-fiolet); color: #fff; }
.po .po-strzalka[disabled] { opacity: .35; cursor: default; }
.po-kropki { display: flex; gap: 7px; }
.po .po-kropki button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #ddd6fe; cursor: pointer;
	transition: width .2s, background .2s; }
.po .po-kropki button.aktywna { width: 24px; background: var(--po-fiolet); }

@media (prefers-reduced-motion: reduce) {
	.po-lista { scroll-behavior: auto; }
	.po-karta, .po a.po-napisz { transition: none; }
}
@media (max-width: 820px) {
	.po { grid-template-columns: 1fr; gap: 20px; }
	.po-karta { flex-basis: 84%; }
}