/* B13 – „Ulubione kadry”: serduszka przy zdjęciach, licznik, panel i wiersz w formularzu
   (inc/ulubione.php, ulubione.js). Kolory z palety motywu. */

/* ---------- Serduszko na zdjęciu ---------- */

.wp-block-gallery figure.b13-ma-serce {
	position: relative;
}

/* WordPress stylizuje każdy przycisk w .wp-lightbox-container (20×20 px, opacity 0, róg u góry) –
   stąd długie selektory i jawnie podane wartości. */
.wp-block-gallery figure.wp-lightbox-container button.b13-serce,
.b13-serce {
	position: absolute;
	top: auto;
	right: .35rem;
	bottom: .35rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(20 20 18 / .38) !important; /* !important: reguła WordPressa z :not() jest mocniejsza */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	opacity: 1;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .25s, transform .25s var(--b13-ease), opacity .25s;
}

.b13-serce svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linejoin: round;
	transition: fill .2s, stroke .2s;
}

.wp-block-gallery figure.wp-lightbox-container button.b13-serce:hover,
.b13-serce:hover {
	background: rgb(20 20 18 / .6) !important;
	transform: scale(1.08);
}

.b13-serce:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wp-block-gallery figure.wp-lightbox-container button.b13-serce.is-on,
.b13-serce.is-on {
	background: var(--wp--preset--color--paper) !important;
	opacity: 1;
	color: #b3261e;
}

.b13-serce.is-on svg {
	fill: currentColor;
}

.b13-serce.is-pyk svg {
	animation: b13-serce-pyk .45s var(--b13-ease);
}

@keyframes b13-serce-pyk {
	35% { transform: scale(1.45); }
	70% { transform: scale(.9); }
}

/* Na komputerze serduszko jest dyskretne, dopóki kursor nie wejdzie na zdjęcie. */
@media (hover: hover) {
	.wp-block-gallery figure.wp-lightbox-container button.b13-serce:not(.is-on) {
		opacity: .55;
	}

	.wp-block-gallery figure.wp-lightbox-container:hover > button.b13-serce,
	.wp-block-gallery figure.wp-lightbox-container button.b13-serce:focus-visible {
		opacity: 1;
	}
}

/* ---------- Zdanie nad galerią ---------- */

.b13-ulubione-wstep {
	display: flex;
	align-items: center;
	gap: .9rem;
	max-width: 46rem;
	margin: 0 auto var(--wp--preset--spacing--50) !important;
	padding: .9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: .92rem;
	line-height: 1.5;
}

.b13-ulubione-wstep__ikona {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: #b3261e;
}

.b13-ulubione-wstep__ikona svg {
	fill: currentColor;
}

/* ---------- Licznik w rogu ---------- */

.b13-ulubione-licznik {
	position: fixed;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 95;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.15rem .7rem .9rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	box-shadow: 0 10px 30px rgb(0 0 0 / .28);
	font-family: var(--wp--preset--font-family--body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .25s var(--b13-ease), background-color .25s;
}

.b13-ulubione-licznik[hidden] {
	display: none;
}

.b13-ulubione-licznik:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--accent);
}

.b13-ulubione-licznik:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.b13-ulubione-licznik svg {
	fill: #e0584f;
}

.b13-ulubione-licznik__ile {
	min-width: 1.2em;
	font-size: .95rem;
	letter-spacing: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.b13-ulubione-licznik.is-pyk {
	animation: b13-licznik-pyk .5s var(--b13-ease);
}

@keyframes b13-licznik-pyk {
	40% { transform: scale(1.12); }
}

@media (max-width: 781px) {
	/* Nad dolnym paskiem „Zadzwoń / Sprawdź termin”. */
	.b13-ulubione-licznik {
		right: .8rem;
		bottom: calc(4.3rem + env(safe-area-inset-bottom));
		padding: .65rem .95rem .65rem .8rem;
	}

	.b13-ulubione-licznik__tekst {
		display: none;
	}
}

/* ---------- Komunikat (limit) ---------- */

.b13-ulubione-komunikat {
	position: fixed;
	left: 50%;
	bottom: 5.5rem;
	z-index: 96;
	width: max-content;
	max-width: calc(100vw - 2rem);
	margin: 0;
	padding: .8rem 1.1rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: .88rem;
	line-height: 1.4;
	box-shadow: 0 10px 30px rgb(0 0 0 / .28);
	opacity: 0;
	transform: translate(-50%, 10px);
	pointer-events: none;
	transition: opacity .3s, transform .3s var(--b13-ease);
}

.b13-ulubione-komunikat.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- Panel ---------- */

.b13-ulubione {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(100vw, 30rem);
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	box-shadow: -20px 0 60px rgb(0 0 0 / .25);
}

.b13-ulubione[open] {
	display: flex;
	flex-direction: column;
	animation: b13-ulubione-wjazd .4s var(--b13-ease);
}

.b13-ulubione::backdrop {
	background: rgb(20 20 18 / .55);
	animation: b13-ulubione-tlo .4s ease;
}

@keyframes b13-ulubione-wjazd {
	from { transform: translateX(100%); }
}

@keyframes b13-ulubione-tlo {
	from { opacity: 0; }
}

.b13-ulubione__gora {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.5rem .4rem;
}

.b13-ulubione__nadtytul {
	margin: 0 0 .3rem;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.b13-ulubione__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.1;
}

.b13-ulubione__tytul span {
	color: var(--wp--preset--color--muted);
	font-size: .7em;
}

.b13-ulubione__zamknij {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -.4rem -.6rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.b13-ulubione__zamknij:hover {
	background: var(--wp--preset--color--surface);
}

.b13-ulubione :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.b13-ulubione__opis {
	margin: 0;
	padding: .4rem 1.5rem 1.1rem;
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
	line-height: 1.55;
}

.b13-ulubione__lista {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 6px;
	margin: 0;
	padding: 0 1.5rem 1.5rem;
	list-style: none;
}

.b13-ulubione__lista[hidden],
.b13-ulubione__dol[hidden],
.b13-ulubione__pusto[hidden] {
	display: none;
}

/* Rzędy o równej wysokości, zdjęcia w swoich proporcjach – bez przycinania. */
.b13-ulubione__lista li {
	position: relative;
	flex: calc(var(--r, 1.5) * 100) 1 calc(var(--r, 1.5) * 6.2rem);
	max-width: calc(var(--r, 1.5) * 11rem);
	aspect-ratio: var(--r, 1.5);
	background: var(--wp--preset--color--surface);
}

.b13-ulubione__lista a,
.b13-ulubione__lista img {
	display: block;
	width: 100%;
	height: 100%;
}

.b13-ulubione__lista img {
	object-fit: cover;
}

.b13-ulubione__usun {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(20 20 18 / .6);
	color: #fff;
	cursor: pointer;
}

.b13-ulubione__usun::after {
	content: "";
	position: absolute;
	inset: -8px; /* większe pole dotyku */
}

.b13-ulubione__usun:hover {
	background: #b3261e;
}

.b13-ulubione__pusto {
	flex: 1;
	padding: 1rem 1.5rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

.b13-ulubione__pusto a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.b13-ulubione__dol {
	display: grid;
	justify-items: center;
	gap: .5rem;
	padding: 1rem 1.5rem max(1.2rem, env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.b13-ulubione__dol .b13-ulubione__cta {
	width: 100%;
	text-align: center;
}

.b13-ulubione__wyczysc {
	padding: .5rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: .8rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.b13-ulubione__wyczysc:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Wiersz w formularzu zapytania ---------- */

.b13-ulubione-pole {
	display: grid;
	gap: .6rem;
	margin: .2rem 0 1rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	font-size: .88rem;
	line-height: 1.45;
}

.b13-ulubione-pole[hidden] {
	display: none;
}

.b13-ulubione-pole label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 0;
	cursor: pointer;
}

.b13-ulubione-pole input[type="checkbox"] {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: .1rem 0 0;
	accent-color: var(--wp--preset--color--accent);
}

.b13-ulubione-pole__kadry {
	display: flex;
	align-items: center;
	gap: 4px;
	transition: opacity .25s;
}

.b13-ulubione-pole__kadry.is-off {
	opacity: .35;
}

.b13-ulubione-pole__kadry img {
	width: auto;
	height: 2.6rem;
	border-radius: 0;
}

.b13-ulubione-pole__kadry span {
	padding-left: .4rem;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.b13-ulubione[open],
	.b13-ulubione::backdrop,
	.b13-serce.is-pyk svg,
	.b13-ulubione-licznik.is-pyk {
		animation: none;
	}
}