/* Moje oblíbené (assets/js/oblibene.js) – společné pro origami-navody.cz a varimbezlepkumlekavajec.cz.
   Barvy z proměnných webu: --obl-akcent (srdíčko), --obl-plocha, --obl-text, --obl-okraj, --obl-tlumene, --obl-radius. */
.obl-obal { position: relative; }
.obl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.obl-srdce {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .92); color: var(--obl-akcent); cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	transition: transform .15s ease, background-color .15s ease;
}
.obl-srdce svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.obl-srdce.je svg { fill: currentColor; }
.obl-srdce:hover { transform: scale(1.08); }
.obl-srdce:focus-visible { outline: 3px solid var(--obl-akcent); outline-offset: 2px; }
.obl-srdce.bum svg, .obl-ikona.bum svg { animation: obl-bum .35s ease; }
@keyframes obl-bum { 40% { transform: scale(1.35); } }

/* tlačítko s textem pod nadpisem a na konci návodu / receptu */
.obl-srdce--text {
	position: static; width: auto; height: auto; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
	background: var(--obl-plocha); color: var(--obl-text); border: 1px solid var(--obl-okraj); box-shadow: none;
	font: inherit; font-weight: 600;
}
.obl-srdce--text svg { color: var(--obl-akcent); }
.obl-srdce--text:hover { transform: none; border-color: var(--obl-akcent); }
.obl-radek { margin: 8px 0 16px; }
.obl-konec { margin: 24px 0; padding: 16px; border: 1px dashed var(--obl-okraj); border-radius: var(--obl-radius); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.obl-konec p { margin: 0; }
.obl-konec a { color: inherit; }

/* ikona v hlavičce s počtem */
.obl-ikona[hidden], .obl-ikona__pocet[hidden] { display: none !important; }
.obl-ikona__a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--obl-akcent); text-decoration: none; }
.obl-ikona__a svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.obl-ikona__pocet {
	position: absolute; top: 4px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--obl-akcent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* hláška po přidání */
.obl-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 1000; transform: translate(-50%, 20px);
	max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px;
	background: #222; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.obl-toast.vidi { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.obl-toast a { color: #fff; font-weight: 700; margin-left: 8px; }

/* stránka Moje oblíbené */
.obl-hlava { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.obl-hlava p { margin: 0; color: var(--obl-tlumene); }
.obl-razeni select { min-height: 40px; padding: 4px 8px; border: 1px solid var(--obl-okraj); border-radius: 8px; background: var(--obl-plocha); color: var(--obl-text); font: inherit; }
.obl-mrizka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.obl-karta { margin: 0; border: 1px solid var(--obl-okraj); border-radius: var(--obl-radius); background: var(--obl-plocha); overflow: hidden; transition: opacity .2s ease; }
.obl-karta.pryc { opacity: .45; }
.obl-mrizka .obl-karta__a, .obl-mrizka .obl-karta__a:visited { display: flex; flex-direction: column; height: 100%; color: var(--obl-text); text-decoration: none; }
.obl-karta__obr { display: block; aspect-ratio: 4 / 3; background: var(--obl-okraj); }
.obl-karta__obr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.obl-karta__nazev { display: block; padding: 10px 12px 2px; font-weight: 700; line-height: 1.3; }
.obl-karta__kdy { display: block; padding: 0 12px 12px; color: var(--obl-tlumene); font-size: .9em; }
.obl-karta__a:hover .obl-karta__nazev { text-decoration: underline; }
.obl-prazdno { padding: 24px; border: 1px dashed var(--obl-okraj); border-radius: var(--obl-radius); text-align: center; }
@media (max-width: 599px) { .obl-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .obl-srdce, .obl-toast { transition: none; } .obl-srdce.bum svg, .obl-ikona.bum svg { animation: none; } }