/* DGX Reviews
 *
 * Wtyczka ma dzialac na trzech roznych motywach, wiec nic tu nie zaklada
 * niczego o motywie: wlasne zmienne, wlasne prefiksy, zaden selektor nie
 * siega poza kontener .dgxr. Kolor akcentu wstrzykuje PHP z ustawien.
 */

.dgxr {
	--dgxr-accent: #db9b2e;
	--dgxr-star: #f5b301;
	--dgxr-text: #1a1a1a;
	--dgxr-muted: #6b7280;
	--dgxr-line: #e5e7eb;
	--dgxr-bg: #f7f7f8;
	--dgxr-radius: 12px;

	color: var(--dgxr-text);
	font-size: 15px;
	line-height: 1.55;
}

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

/* --- neutralizacja motywu ---------------------------------------------- */

/* Motywy sklepowe formatuja obszar opinii selektorami z identyfikatorami,
   ktorych nie da sie przebic sama klasa. Favou ustawia
   #tab-reviews #reviews > div na 50% szerokosci z float, dokleja ujemny
   margines i rysuje pionowa kreske pseudoelementem - stad kolumna na pol
   ekranu i szara linia na srodku. Zdejmujemy to w obrebie .dgxr, zeby
   wtyczka wygladala tak samo na kazdym sklepie, na ktory trafi. */
.dgxr {
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: visible !important;
}

.dgxr > div,
.dgxr > p {
	width: 100% !important;
	float: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.dgxr > div:before,
.dgxr > div:after {
	content: none !important;
}

/* Karta opinii jest nasza w calosci - kasujemy tlo, oplywanie i zwezenie,
   ktore motyw narzuca elementom listy komentarzy. */
.dgxr .dgxr-review__box,
.dgxr .dgxr-review__text {
	width: auto !important;
	float: none !important;
	overflow: visible !important;
}

.dgxr .dgxr-review__text {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* --- podsumowanie ------------------------------------------------------ */

.dgxr-summary {
	display: grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 460px);
	gap: 32px;
	justify-content: start;
	align-items: center;
	padding: 24px;
	margin: 0 0 24px;
	background: #fff;
	border: 1px solid var(--dgxr-line);
	border-radius: var(--dgxr-radius);
}

.dgxr-summary__score {
	text-align: center;
}

.dgxr-summary__value {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
}

.dgxr-summary__count {
	margin-top: 6px;
	font-size: 13px;
	color: var(--dgxr-muted);
}

.dgxr-stars {
	display: inline-flex;
	gap: 2px;
	font-size: 20px;
	line-height: 1;
}

.dgxr-stars__item {
	color: var(--dgxr-line);
}

.dgxr-stars__item.is-on {
	color: var(--dgxr-star);
}

/* Polowka: druga warstwa przycieta w poziomie, zeby nie potrzebowac
   osobnego glifu ani fontu ikon. */
.dgxr-stars__item.is-half {
	position: relative;
	color: var(--dgxr-line);
}

.dgxr-stars__item.is-half:before {
	content: "\2605";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	overflow: hidden;
	color: var(--dgxr-star);
}

/* --- rozklad ocen ------------------------------------------------------ */

.dgxr-histogram {
	display: grid;
	gap: 6px;
}

.dgxr-histogram__row {
	display: grid;
	grid-template-columns: 42px 1fr 42px;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 2px 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.dgxr-histogram__row:hover .dgxr-histogram__fill {
	filter: brightness(0.92);
}

.dgxr-histogram__label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 13px;
	font-weight: 600;
}

.dgxr-histogram__label .dgxr-star {
	color: var(--dgxr-star);
}

.dgxr-histogram__track {
	height: 8px;
	background: var(--dgxr-line);
	border-radius: 999px;
	overflow: hidden;
}

.dgxr-histogram__fill {
	display: block;
	height: 100%;
	background: var(--dgxr-accent);
	border-radius: 999px;
}

.dgxr-histogram__percent {
	font-size: 12px;
	color: var(--dgxr-muted);
	text-align: right;
}

/* --- pasek narzedzi ---------------------------------------------------- */

.dgxr-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin: 0 0 18px;
}

.dgxr-field {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.dgxr-field__label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--dgxr-muted);
}

/* Motywy potrafia celowac w gole select, wiec podajemy komplet wlasnosci.
 * Strzalka jest tlem, bo motyw zdejmuje natywna (appearance:none) i pole
 * wygladalo jak zwykly input - nie bylo widac, ze sie rozwija. appearance
 * ustawiamy tez sami, zeby bez motywu nie bylo dwoch strzalek. */
.dgxr .dgxr-select {
	height: 42px;
	padding: 0 36px 0 12px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	cursor: pointer;
	border: 1px solid var(--dgxr-line);
	border-radius: 8px;
	color: var(--dgxr-text);
	font-size: 14px;
	line-height: 40px;
}

.dgxr .dgxr-trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: #eef6ff;
	border-radius: 10px;
	color: #1f4e79;
	font-size: 14px;
	line-height: 1.5;
}

.dgxr .dgxr-trust svg {
	flex: 0 0 auto;
}

.dgxr .dgxr-trust a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

.dgxr-hint {
	flex: 1 1 220px;
	align-self: flex-end;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dgxr-muted);
	text-align: right;
}

/* --- lista ------------------------------------------------------------- */

.dgxr-results.is-loading {
	opacity: .55;
	transition: opacity 120ms linear;
}

.dgxr .dgxr-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.dgxr .dgxr-review {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dgxr-review__box {
	padding: 18px 20px;
	background: var(--dgxr-bg);
	border: 1px solid var(--dgxr-line);
	border-radius: var(--dgxr-radius);
}

.dgxr-review__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
}

.dgxr-review__author {
	font-weight: 700;
}

.dgxr-review__date {
	font-size: 13px;
	color: var(--dgxr-muted);
}

/* Autor i plakietka jako wlasny wiersz elastyczny - napis jest teraz dluzszy
   i na waskim ekranie musi moc zejsc pod imie zamiast rozpychac karte. */
.dgxr-review__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.dgxr-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: #e8f5e9;
	border-radius: 999px;
	color: #2e7d32;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.dgxr-review__rating {
	margin-bottom: 8px;
}

.dgxr-review__rating .dgxr-stars {
	font-size: 16px;
}

.dgxr-review__text p:last-child {
	margin-bottom: 0;
}

/* Domyslna metryczka WooCommerce bywa dorysowywana przez inne wtyczki
   wpiete w te same haki - u nas naglowek jest wlasny, wiec ja chowamy. */
.dgxr-review__text .woocommerce-review__author,
.dgxr-review__text .woocommerce-review__dash,
.dgxr-review__text .woocommerce-review__published-date,
.dgxr-review__text > .star-rating {
	display: none;
}

.dgxr-reply {
	margin-top: 12px;
	padding: 12px 14px;
	background: #fff;
	border-left: 3px solid var(--dgxr-accent);
	border-radius: 6px;
	font-size: 14px;
}

.dgxr-reply__author {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
}

/* --- glos "pomocna" ---------------------------------------------------- */

.dgxr-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.dgxr .dgxr-vote {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--dgxr-line);
	border-radius: 999px;
	color: var(--dgxr-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 150ms, color 150ms, background 150ms;
}

.dgxr .dgxr-vote:hover {
	border-color: var(--dgxr-accent);
	color: var(--dgxr-text);
}

.dgxr .dgxr-vote.is-voted {
	background: var(--dgxr-accent);
	border-color: var(--dgxr-accent);
	color: #fff;
}

.dgxr .dgxr-vote[disabled] {
	opacity: .6;
	cursor: default;
}

.dgxr-vote__count {
	min-width: 18px;
	text-align: center;
}

.dgxr-vote__msg {
	font-size: 13px;
	color: #b3261e;
}

/* --- stopka listy ------------------------------------------------------ */

.dgxr-foot {
	margin-top: 18px;
}

.dgxr .dgxr-more {
	display: block;
	width: 100%;
	height: 46px;
	margin: 10px 0 0;
	background: #fff;
	border: 1px solid var(--dgxr-line);
	border-radius: 10px;
	color: var(--dgxr-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.dgxr .dgxr-more:hover {
	border-color: var(--dgxr-accent);
}

.dgxr-counter,
.dgxr-empty {
	margin: 0;
	font-size: 13px;
	color: var(--dgxr-muted);
	text-align: center;
}

/* --- formularz i komunikat --------------------------------------------- */

.dgxr-form {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--dgxr-line);
}

/* --- zdjecia klientow (od 1.0.7) ---------------------------------------- */

/* Galeria nad opiniami. Ramka (odstepy, kreska pod spodem) jak w dawnej
   galerii pp-photo-reviews; tytul czytelny (tam wychodzilo 10 px, bo motyw
   ma 1rem = 10px). */
.dgxr .dgxr-gallery {
	margin: 0 0 32px !important;
	padding: 20px 0 24px !important;
	border-bottom: 1px solid var(--dgxr-line);
}

.dgxr .dgxr-gallery__title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dgxr-text);
	text-transform: none;
	letter-spacing: 0;
}

.dgxr-gallery__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dgxr-gallery__track {
	display: flex;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 2px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.dgxr-gallery__track::-webkit-scrollbar {
	display: none;
}

.dgxr .dgxr-gallery__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid var(--dgxr-line);
	border-radius: 50%;
	box-shadow: none;
	color: var(--dgxr-text);
	cursor: pointer;
	transition: border-color 150ms, opacity 150ms;
}

.dgxr .dgxr-gallery__arrow:hover:not([disabled]) {
	border-color: var(--dgxr-accent);
}

.dgxr .dgxr-gallery__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.dgxr .dgxr-gallery.is-static .dgxr-gallery__arrow {
	display: none;
}

/* Miniatura: przycisk z obrazkiem. Motyw stylizuje gole button, wiec komplet wlasnosci. */
.dgxr .dgxr-thumb {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 88px;
	height: 88px;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--dgxr-bg);
	border: 1px solid var(--dgxr-line);
	border-radius: 8px;
	box-shadow: none;
	cursor: zoom-in;
	scroll-snap-align: start;
	transition: border-color 150ms, transform 150ms;
}

.dgxr .dgxr-thumb:hover,
.dgxr .dgxr-thumb:focus-visible {
	border-color: var(--dgxr-accent);
	transform: translateY(-1px);
	outline: none;
}

.dgxr .dgxr-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Imie autora na miniaturze w galerii. */
.dgxr .dgxr-thumb__who {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 6px 4px;
	background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Miniatury pod trescia opinii. */
.dgxr-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.dgxr .dgxr-thumb--sm {
	width: 76px;
	height: 76px;
}

/* Przelacznik "Tylko ze zdjeciami" w pasku narzedzi, wysokosc jak pola wyboru. */
.dgxr .dgxr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	min-width: 0;
	margin: 0;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--dgxr-line);
	border-radius: 999px;
	box-shadow: none;
	color: var(--dgxr-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 150ms, background 150ms, color 150ms;
}

.dgxr .dgxr-chip:hover {
	border-color: var(--dgxr-accent);
}

.dgxr .dgxr-chip.is-on {
	background: var(--dgxr-accent);
	border-color: var(--dgxr-accent);
	color: #fff;
}

/* Opinia, do ktorej prowadzi "Przeczytaj opinie" z powiekszenia. */
.dgxr .dgxr-review__box {
	transition: box-shadow 400ms;
}

.dgxr .dgxr-review.is-flash .dgxr-review__box,
.dgxr .dgxr-review__box.is-flash {
	box-shadow: 0 0 0 3px var(--dgxr-accent);
}

/* --- powiekszenie zdjecia ------------------------------------------------
   Okno jest doklejane do body, wiec jest poza .dgxr: zmienne i reset
   przyciskow podajemy jeszcze raz. */

.dgxr-lb {
	--dgxr-accent: #db9b2e;
	--dgxr-star: #f5b301;
	--dgxr-text: #1a1a1a;
	--dgxr-muted: #6b7280;
	--dgxr-line: #e5e7eb;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 16px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dgxr-text);
}

.dgxr-lb[hidden] {
	display: none;
}

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

.dgxr-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, .9);
	cursor: zoom-out;
}

.dgxr-lb__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 980px;
	max-height: 100%;
}

.dgxr-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

.dgxr-lb__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 90px);
	max-height: calc(100dvh - 90px);
	margin: 0;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
	background: #222;
	object-fit: contain;
}

.dgxr-lb.has-info .dgxr-lb__img {
	max-height: calc(100vh - 290px);
	max-height: calc(100dvh - 290px);
}

.dgxr-lb .dgxr-lb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: rgba(255, 255, 255, .92);
	color: #1a1a1a;
	cursor: pointer;
	transition: background 150ms, opacity 150ms;
}

.dgxr-lb .dgxr-lb__btn:hover:not([disabled]) {
	background: #fff;
}

.dgxr-lb .dgxr-lb__btn[disabled] {
	opacity: .3;
	cursor: default;
}

.dgxr-lb .dgxr-lb__btn[hidden] {
	display: none;
}

.dgxr-lb .dgxr-lb__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
}

.dgxr-lb .dgxr-lb__nav {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
}

.dgxr-lb .dgxr-lb__nav.is-prev {
	left: 8px;
}

.dgxr-lb .dgxr-lb__nav.is-next {
	right: 8px;
}

.dgxr-lb__info {
	width: 100%;
	max-width: 640px;
	padding: 14px 18px;
	background: #fff;
	border-radius: 12px;
}

.dgxr-lb__info[hidden] {
	display: none;
}

.dgxr-lb__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.dgxr-lb__who {
	font-weight: 700;
}

.dgxr-lb__who:empty,
.dgxr-lb__date:empty,
.dgxr-lb__stars:empty {
	display: none;
}

.dgxr-lb__stars .dgxr-stars {
	font-size: 15px;
}

.dgxr-lb__date {
	font-size: 13px;
	color: var(--dgxr-muted);
}

.dgxr-lb .dgxr-lb__text {
	margin: 6px 0 0;
	max-height: 7.5em;
	overflow-y: auto;
	font-size: 14px;
}

.dgxr-lb__text[hidden] {
	display: none;
}

.dgxr-lb__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.dgxr-lb__foot:empty {
	display: none;
}

.dgxr-lb .dgxr-lb__read {
	display: inline;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--dgxr-text);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.dgxr-lb__count {
	margin-left: auto;
	font-size: 13px;
	color: var(--dgxr-muted);
	white-space: nowrap;
}

/* Licznik pod zdjeciem bez opisu (wspolna galeria bez podpisu): na ciemnym tle, bez karty. */
.dgxr-lb__solo {
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .8);
	text-align: center;
}

.dgxr-lb__solo[hidden] {
	display: none;
}

/* Otwarte okno: strona stoi, a plywajace widzety (TrustMate, czat Tidio) maja
   wieksze z-index niz cokolwiek innego - chowamy je na czas powiekszenia. */
html.dgxr-lb-open,
html.dgxr-lb-open body {
	overflow: hidden;
}

html.dgxr-lb-open .tm-muskrat2__sticker,
html.dgxr-lb-open #tidio-chat {
	visibility: hidden !important;
}

/* --- mobile ------------------------------------------------------------ */

@media ( max-width: 700px ) {

	.dgxr-summary {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 18px;
	}

	/* Dwa akapity zamiast jednego bloku - na waskim ekranie zdanie o logowaniu
	 * gubilo sie w piecio-liniowej scianie tekstu. */
	.dgxr .dgxr-trust__line {
		display: block;
	}

	.dgxr .dgxr-trust__line + .dgxr-trust__line {
		margin-top: 6px;
	}

	.dgxr-toolbar {
		gap: 10px;
	}

	/* Pola pod soba. Obok siebie "Najbardziej pomocne" miesci sie dopiero
	 * od ~330px szerokosci paska, a przy flex-basis 140px pola i tak
	 * spadaly pod siebie tylko na czesci telefonow (375px tak, 390px nie). */
	.dgxr-field {
		flex: 1 1 100%;
		min-width: 0;
	}

	.dgxr-hint {
		flex: 1 1 100%;
		margin: 4px 0 0;
		text-align: left;
	}

	.dgxr-review__box {
		padding: 16px;
	}

	.dgxr .dgxr-gallery {
		padding-top: 16px !important;
	}

	.dgxr .dgxr-gallery__title {
		font-size: 17px;
	}

	.dgxr .dgxr-thumb {
		width: 76px;
		height: 76px;
	}

	.dgxr .dgxr-thumb--sm {
		width: 68px;
		height: 68px;
	}

	.dgxr .dgxr-chip {
		flex: 0 0 auto;
	}

	.dgxr-lb {
		padding: 52px 8px 8px;
	}

	.dgxr-lb.has-info .dgxr-lb__img {
		max-height: calc(100vh - 300px);
		max-height: calc(100dvh - 300px);
	}

	.dgxr-lb .dgxr-lb__nav {
		width: 38px;
		height: 38px;
		margin-top: -19px;
	}

	.dgxr-lb__info {
		padding: 12px 14px;
	}
}