/* ================= SERDUSZKO "DODAJ DO ULUBIONYCH" =================
   Makiety 13 (kafel listingu) i 14 (strona ogloszenia). Kwadratowy
   przycisk-ikona w rzedzie z przyciskiem drugorzednym: ta sama wysokosc
   i obramowanie co on (40 px na kaflu desktop/tablet, 44 px na mobile
   i na stronie ogloszenia). Przycisk niesie klasy przycisku drugorzednego
   danej strony (ot-btn--ghost / rd-btn--ghost), wiec ramke, promien
   i hover dostaje stamtad - tutaj tylko kwadrat, ikona i stan aktywny.

   Markup: classes/helpers/class.Fav_button.php, zachowanie:
   www/js/favourites.js. Osobny plik, bo ?VERSION jest stala - poprawka
   w istniejacym arkuszu nie dotarlaby na serwer bez jej podbicia. */

.fav-btn {
	position: relative;
	cursor: pointer;
}

.fav-btn .fav-ico {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
	transition: fill 150ms var(--ease-out, ease-out);
}

/* Stan aktywny: wypelnione serce i podklad --danger-100 (makieta 13). */
.fav-btn.is-active { color: var(--danger-500, #d24a4a); }
.fav-btn.is-active .fav-ico { fill: currentColor; }

/* Krotkie "pukniecie" tylko po kliknieciu - przy wczytaniu strony serce
   ma sie pokazac bez ruchu, wiec klase dokleja JS wylacznie przy dodaniu. */
.fav-btn.is-popping .fav-ico { animation: fav-pop 260ms var(--ease-out, ease-out); }
@keyframes fav-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.fav-btn.is-popping .fav-ico { animation: none; }
	.fav-btn .fav-ico { transition: none; }
}


/* ============================ KAFEL LISTINGU ============================
   .ot .ot-cta .ot-btn ma padding z !important (patrz offer_tile.css - .dip
   z fix.css), wiec kwadrat przebijamy o jedna klase mocniej. Obrys ghosta
   to tam cien wewnetrzny, nie border - tak samo rysujemy obrys aktywny. */

.ot .ot-cta .ot-btn.ot-fav {
	flex: 0 0 40px;
	width: 40px;
	padding: 0 !important;
}

.ot .ot-cta .ot-btn.ot-fav.is-active,
.ot .ot-cta .ot-btn.ot-fav.is-active:hover {
	background: var(--danger-100, #f8dada);
	color: var(--danger-500, #d24a4a);
	box-shadow: inset 0 0 0 1px #ebaeae;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-500, #d24a4a) 45%, #ffffff);
}

/* Ghost na kaflu nadpisuje cien, wiec bez tego fokus z klawiatury bylby
   niewidoczny. */
.ot .ot-cta .ot-btn.ot-fav:focus-visible {
	box-shadow: inset 0 0 0 1px var(--border-default, #c8d0ce), var(--shadow-focus, 0 0 0 3px rgba(45, 185, 148, .4));
}

@media (max-width: 767px) {
	/* 44 px - cel dotykowy; ghost na mobile rozciaga sie (flex 1 1 0),
	   serduszko zostaje kwadratem. */
	.ot .ot-cta .ot-btn.ot-fav { flex: 0 0 44px; width: 44px; }
	.ot .ot-cta .ot-btn.ot-fav .fav-ico { width: 20px; height: 20px; }
}


/* =========================== STRONA OGLOSZENIA =========================== */

.rd-page .rd-btn.rd-fav {
	flex: 0 0 44px;
	width: 44px;
	padding: 0;
}
.rd-page .rd-btn.rd-fav .fav-ico { width: 20px; height: 20px; }

.rd-page .rd-btn.rd-fav.is-active,
.rd-page .rd-btn.rd-fav.is-active:hover {
	border-color: #ebaeae;
	border-color: color-mix(in srgb, var(--danger-500, #d24a4a) 45%, #ffffff);
	background: var(--danger-100, #f8dada);
	color: var(--danger-500, #d24a4a);
}

.rd-page .rd-btn.rd-fav:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus, 0 0 0 3px rgba(45, 185, 148, .4));
}

/* Sidebar (14a): "Pokaz numer telefonu" + serduszko w jednym rzedzie,
   glowne CTA nad nimi na pelna szerokosc. */
.rd-side-cta-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.rd-side-cta-row > .rd-btn:not(.rd-fav) { flex: 1 1 auto; min-width: 0; }
/* Po odslonieciu numeru przycisk znika, a numer zajmuje jego miejsce. */
.rd-side-cta-row > .rd-phone { flex: 1 1 auto; }

/* fix.css: .dip { position: relative; top: -1px; margin-left: 2px }. Obok
   serduszka to przesuniecie widac (telefon o 1 px wyzej i 2 px dalej niz
   kwadrat obok), wiec w obu rzedach z serduszkiem je zerujemy. */
.rd-page .rd-side-cta-row .dip,
.rd-page .rd-cta-mobile .dip {
	position: static;
	top: auto;
	margin-left: 0;
}

@media (max-width: 767px) {
	/* Pasek CTA (14b/14c): trzeci kwadrat 44 px zabral miejsce "Wyslij
	   wiadomosc". Cena miala sztywne 30% szerokosci, choc potrzebuje mniej -
	   przy 375 i 360 px etykieta wiadomosci ucinala sie w pasku w toku strony
	   (zmierzone na Source Sans 3). Cena bierze teraz tyle, ile ma tresci. */
	.rd-cta-mobile .rd-cta-price { flex: 0 0 auto; }
	.rd-cta-mobile .rd-cta-price b { white-space: nowrap; }
}

@media (max-width: 359px) {
	/* Ponizej 360 px (np. 320) napis i tak sie nie zmiesci - wiadomosc
	   przechodzi na sama koperte, tak jak po odslonieciu numeru
	   (advert_page.css). Etykieta zostaje dla czytnikow ekranu. */
	.rd-cta-mobile .rd-btn--primary .rd-ico { display: block; width: 19px; height: 19px; }
	.rd-cta-mobile .rd-btn--primary .rd-btn-label {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	/* Odsloniety numer potrzebuje ~120 px - przy 320 px pasek wychodzil
	   o 17 px za ekran. Cene uzytkownik juz widzial, wiec na ten moment
	   ustepuje miejsca numerowi. */
	.rd-cta-mobile:has(.rd-phone:not(:empty)) .rd-cta-price { display: none; }
}