/**
 * Reactions bar — emoji-pill row used on single CPT pages (begivenhed, butik, nyhed).
 * Source: extracted from page-begivenhed.css (DRY — was originally only loaded there).
 * Markup: <div class="reactions-bar"><span class="label">Hvad synes du?</span><button class="react-btn">...</button>...</div>
 */

.reactions-bar{
	display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
	padding:16px 18px;
	background:#fff;border-radius:var(--vk-radius-card);
	box-shadow:0 2px 10px rgba(0,0,0,.05);
	margin-bottom:26px;
	overflow-x:auto;
	scrollbar-width:none;
}
.reactions-bar::-webkit-scrollbar{display:none}
.reactions-bar .label{font-size:13px;color:var(--vk-muted);margin-right:6px;font-weight:500;flex-shrink:0;white-space:nowrap}

.react-btn{
	display:inline-flex;align-items:center;gap:7px;
	padding:7px 14px 7px 10px;
	border:1px solid var(--vk-border-strong);
	background:var(--vk-cream);color:var(--vk-dark);
	border-radius:9999px;font-size:13.5px;font-weight:600;
	cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
	flex-shrink:0;white-space:nowrap;
	font-family:inherit;
}
/* Hover-rules use explicit bg/color so they win cascade over hello-elementor
   reset.css' [type="button"]:hover{background:#c36;color:#fff} (specificity 0,1,1).
   .react-btn:hover (0,2,0) without these would silently let pink #c36 leak in. */
.react-btn:hover,
.react-btn:focus{
	background:var(--vk-cream);
	color:var(--vk-dark);
	border-color:var(--vk-dark);
	transform:translateY(-1px);
}
.react-btn.is-picked,
.react-btn.is-picked:hover,
.react-btn.is-picked:focus{
	background:var(--vk-dark);
	color:#fff;
	border-color:var(--vk-dark);
}
.react-btn .emoji{font-size:17px;line-height:1}
.react-btn.is-bump .emoji{animation:emojiBump .45s cubic-bezier(.22,.61,.36,1)}

/* Login-link til højre i bar (når bruger ikke er logget ind) */
.reactions-bar .vk-react-login{flex-shrink:0;margin-left:auto;font-size:.85em;color:var(--vk-sage);text-decoration:underline}

/* Progressive collapse: skjul prefix-label, så button-tekst, hold emoji + count */
@media (max-width: 720px){
	.reactions-bar{gap:6px;padding:12px 14px;justify-content:flex-start}
	.reactions-bar .label{display:none}
	.react-btn{padding:6px 10px;gap:5px;font-size:12.5px}
}

@media (max-width: 520px){
	/* Markup-rækkefølge: <span.emoji> <span>label</span> <span>· count</span>
	   Skjul midter-label på smalle skærme, behold emoji + count-wrap. */
	.react-btn > span:nth-child(2){display:none}
	.react-btn{padding:6px 10px;gap:4px}
}

@keyframes emojiBump{
	0%  {transform:scale(1)}
	30% {transform:scale(.8) rotate(-12deg)}
	60% {transform:scale(1.3) rotate(10deg)}
	100%{transform:scale(1) rotate(0)}
}