/**
 * Favoritter: hjertet på kort og stedside, beskeden nederst og siden med
 * gemte steder. Bruger child-temaets designtokens (theme/style.css).
 *
 * @package gocamp-core
 */

.gc-favoritter [hidden],
.gc-favorit-besked [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Knappen                                                             */
/* ------------------------------------------------------------------ */

/* Nulstil Listifys og child-temaets knapstil. */
button.gc-favorit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: var(--gc-font-tekst);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

button.gc-favorit:hover,
button.gc-favorit:focus {
	transform: none;
}

button.gc-favorit:focus {
	outline: none;
}

button.gc-favorit:focus-visible {
	outline: 3px solid var(--gc-okker);
	outline-offset: 2px;
}

.gc-favorit__svg {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	fill: transparent;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
}

.gc-favorit--gemt .gc-favorit__svg {
	fill: var(--gc-terracotta);
	stroke: var(--gc-terracotta);
}

/* Et lille hop, når et sted bliver gemt. */
@keyframes gc-favorit-pop {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.3);
	}
	65% {
		transform: scale(0.92);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes gc-favorit-ring {
	0% {
		opacity: 0.5;
		transform: scale(0.85);
	}
	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}

.gc-favorit--pop .gc-favorit__svg {
	animation: gc-favorit-pop 0.42s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}

.gc-favorit--pop::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--gc-terracotta);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	animation: gc-favorit-ring 0.5s ease-out;
}

/* På kortene: rundt hjerte øverst til højre, over Listifys klikflade. */
.type-job_listing .content-box > button.gc-favorit--kort {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 22;
	width: 44px;
	height: 44px;
	background: rgba(255, 253, 249, 0.92);
	color: var(--gc-skov-moerk);
	box-shadow: 0 1px 2px rgba(38, 48, 42, 0.12), 0 4px 12px rgba(38, 48, 42, 0.16);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.type-job_listing .content-box > button.gc-favorit--kort:hover {
	background: var(--gc-hvid);
	color: var(--gc-terracotta);
}

.type-job_listing .content-box > button.gc-favorit--kort:hover .gc-favorit__svg {
	transform: scale(1.08);
}

.type-job_listing .content-box > button.gc-favorit--kort.gc-favorit--gemt {
	color: var(--gc-terracotta);
}

/* På stedsiden: pille under titel og bedømmelse, på heroens mørke billede. */
.gc-favorit-sted {
	margin-top: 14px;
}

button.gc-favorit--sted {
	position: relative;
	min-height: 44px;
	padding: 10px 18px 10px 14px;
	border: 1px solid rgba(255, 253, 249, 0.6);
	background: rgba(20, 32, 25, 0.3);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

button.gc-favorit--sted:hover {
	border-color: #fff;
	background: rgba(20, 32, 25, 0.48);
	color: #fff;
}

button.gc-favorit--sted.gc-favorit--gemt {
	border-color: var(--gc-hvid);
	background: var(--gc-hvid);
	color: var(--gc-tekst);
}

button.gc-favorit--sted.gc-favorit--gemt:hover {
	background: var(--gc-creme);
	color: var(--gc-tekst);
}

button.gc-favorit--sted .gc-favorit__svg {
	width: 20px;
	height: 20px;
}

/* Stedsider uden billede: Listify viser toppen lys med mørk tekst. */
.listing-cover.no-image button.gc-favorit--sted {
	border-color: var(--gc-kant);
	background: var(--gc-hvid);
	color: var(--gc-tekst);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.listing-cover.no-image button.gc-favorit--sted:hover {
	border-color: var(--gc-salvie);
	background: var(--gc-creme);
	color: var(--gc-tekst);
}

.listing-cover.no-image button.gc-favorit--sted.gc-favorit--gemt {
	border-color: var(--gc-terracotta);
}

/* ------------------------------------------------------------------ */
/* Besked nederst                                                      */
/* ------------------------------------------------------------------ */

/* Holdes i DOM'en (live-region); skjules visuelt, når den ikke bruges. */
.gc-favorit-besked {
	position: fixed;
	left: 50%;
	bottom: 16px;
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 100050;
	width: min(460px, calc(100% - 32px));
	opacity: 0;
	transform: translate(-50%, 16px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gc-favorit-besked--vis {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.gc-favorit-besked:not(.gc-favorit-besked--vis) .gc-favorit-besked__handling,
.gc-favorit-besked:not(.gc-favorit-besked--vis) .gc-favorit-besked__luk {
	visibility: hidden;
}

.gc-favorit-besked__indre {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px 12px 16px;
	border-radius: var(--gc-radius, 14px);
	background: var(--gc-skov-moerk);
	box-shadow: var(--gc-skygge-loeft);
	color: var(--gc-creme);
	font-family: var(--gc-font-tekst);
	font-size: 15px;
	line-height: 1.4;
}

.gc-favorit-besked__ikon {
	flex: 0 0 auto;
}

.gc-favorit-besked__ikon .gc-favorit__svg {
	width: 20px;
	height: 20px;
	fill: var(--gc-terracotta);
	stroke: var(--gc-terracotta);
}

.gc-favorit-besked__tekst {
	flex: 1 1 auto;
	margin: 0;
}

.gc-favorit-besked a.gc-favorit-besked__handling {
	flex: 0 0 auto;
	color: var(--gc-sand);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.gc-favorit-besked a.gc-favorit-besked__handling:hover,
.gc-favorit-besked a.gc-favorit-besked__handling:focus {
	color: #fff;
}

.gc-favorit-besked button.gc-favorit-besked__luk {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--gc-creme);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.gc-favorit-besked button.gc-favorit-besked__luk:hover,
.gc-favorit-besked button.gc-favorit-besked__luk:focus {
	background: rgba(255, 253, 249, 0.12);
	transform: none;
}

.gc-favorit-besked button.gc-favorit-besked__luk:focus-visible {
	outline: 2px solid var(--gc-sand);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------ */
/* Siden med gemte steder                                              */
/* ------------------------------------------------------------------ */

.gc-favoritter {
	margin: 0 0 40px;
}

.gc-favoritter__login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid var(--gc-kant);
	border-radius: var(--gc-radius, 14px);
	background: var(--gc-salvie-lys);
	color: var(--gc-tekst);
}

.gc-favoritter__login p {
	flex: 1 1 260px;
	margin: 0;
}

.gc-favoritter__login-ikon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--gc-hvid);
	color: var(--gc-terracotta);
}

.gc-favoritter__login .button.gc-favoritter__login-knap {
	flex: 0 0 auto;
	padding: 11px 22px;
}

.gc-favoritter__antal {
	margin: 0 0 16px;
	color: var(--gc-tekst-bloed);
	font-weight: 600;
}

.gc-favoritter__antal:empty {
	display: none;
}

.gc-favoritter__status {
	margin: 0 0 24px;
	color: var(--gc-tekst-bloed);
}

.gc-favoritter__liste ul.job_listings::after {
	content: "";
	display: table;
	clear: both;
}

/* Fjernet her på siden: bliver stående nedtonet (hjertet undtaget, så man
   kan fortryde), indtil siden genindlæses. */
.gc-favorit-kort--fjernet .content-box > :not(.gc-favorit) {
	opacity: 0.5;
	filter: grayscale(0.6);
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.gc-favoritter__tom {
	max-width: 560px;
	margin: 24px auto 48px;
	padding: 40px 24px;
	border: 1px solid var(--gc-kant);
	border-radius: var(--gc-radius, 14px);
	background: var(--gc-hvid);
	box-shadow: var(--gc-skygge);
	text-align: center;
}

.gc-favoritter__tom-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--gc-sand);
	color: var(--gc-terracotta);
}

.gc-favoritter__tom-ikon .gc-favorit__svg {
	width: 30px;
	height: 30px;
}

.gc-favoritter__tom-titel {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.25;
}

.gc-favoritter__tom p {
	max-width: 42ch;
	margin: 0 auto 22px;
	color: var(--gc-tekst-bloed);
}

.gc-favoritter__enkel {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gc-favoritter__enkel li {
	padding: 12px 0;
	border-bottom: 1px solid var(--gc-kant);
}

.gc-favoritter__enkel a {
	color: var(--gc-tekst);
	font-weight: 600;
}

@media (max-width: 600px) {
	.type-job_listing .content-box > button.gc-favorit--kort {
		top: 10px;
		right: 10px;
	}

	.gc-favoritter__login .button.gc-favoritter__login-knap {
		width: 100%;
	}

	.gc-favoritter__tom {
		padding: 32px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	button.gc-favorit,
	.gc-favorit__svg,
	.gc-favorit-besked,
	.gc-favorit-kort--fjernet .content-box > :not(.gc-favorit) {
		transition: none;
	}

	.gc-favorit--pop .gc-favorit__svg,
	.gc-favorit--pop::after {
		animation: none;
	}

	.type-job_listing .content-box > button.gc-favorit--kort:hover .gc-favorit__svg {
		transform: none;
	}
}