/* Közösségi oldalak rendszámtáblaként (views/partials/social_plates.php). A választó és a lábléc is betölti. */
.ba-sp {
	--sp-o: #f58220;
	--sp-o-hi: #ff9a3d;
	--sp-eu: #0b3d91;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
}
.ba-sp__label { margin: 0; color: #fff; }
.ba-sp__label em { font-style: normal; color: var(--sp-o); }
.ba-sp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }
.ba-sp__list li { margin: 0; padding: 0; }

.ba-sp__link { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: #fff; outline: 0; }
.ba-sp__link:hover, .ba-sp__link:focus { text-decoration: none; color: #fff; }

/* A tábla: fehér, fekete szegély, bal oldalt a kék EU-sáv (benne a platform ikonja), két csavar. */
.ba-sp__plate {
	position: relative; display: flex; align-items: stretch;
	height: 40px; background: #fff; color: #111;
	border: 2px solid #111; border-radius: 6px;
	box-shadow: 0 0 0 3px #2a2a2e, 0 10px 24px -12px rgba(0,0,0,.9);
	/* A bal csavar körül billen ki, mintha a jobb oldali csavar kilazult volna. */
	transform-origin: 40px 50%;
	transition: transform .7s cubic-bezier(.34, 1.7, .5, 1), box-shadow .3s;
}
.ba-sp__plate::before, .ba-sp__plate::after {
	content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff, #9a9aa0 70%);
	box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35);
}
.ba-sp__plate::before { left: 38px; }
.ba-sp__plate::after { right: 7px; transition: opacity .2s; }
.ba-sp__eu {
	width: 26px; flex: 0 0 26px; background: var(--sp-eu); color: #fff; border-radius: 3px 0 0 3px;
	display: grid; place-items: center;
}
.ba-sp__eu svg { display: block; width: 15px; height: 15px; }
.ba-sp__text {
	display: flex; align-items: center; padding: 0 20px 0 22px;
	font-weight: 700; font-size: 20px; letter-spacing: .07em; line-height: 1; white-space: nowrap;
	font-stretch: condensed; font-variant-numeric: tabular-nums;
}
.ba-sp__frame { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-o-hi); transition: color .3s; }

.ba-sp__link:hover .ba-sp__plate, .ba-sp__link:focus-visible .ba-sp__plate { transform: rotate(5deg); }
.ba-sp__link:hover .ba-sp__plate::after, .ba-sp__link:focus-visible .ba-sp__plate::after { opacity: 0; }
.ba-sp__link:focus-visible .ba-sp__plate { box-shadow: 0 0 0 3px var(--sp-o), 0 10px 24px -12px rgba(0,0,0,.9); }
.ba-sp__link:hover .ba-sp__frame, .ba-sp__link:focus-visible .ba-sp__frame { color: #fff; }

/* Választó: felirat a táblák felett, középen. */
.ba-sp--choose { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ba-sp--choose .ba-sp__label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a1a1a6; text-align: center; }

/* Lábléc: saját sáv, balra a cím, jobbra a táblák. */
.ba-sp--footer { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.ba-sp--footer .ba-sp__label { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.ba-sp--footer .ba-sp__list { justify-content: flex-end; gap: 14px; }
.ba-sp--footer .ba-sp__plate { height: 34px; transform-origin: 34px 50%; }
.ba-sp--footer .ba-sp__plate::before { left: 32px; }
.ba-sp--footer .ba-sp__eu { width: 22px; flex-basis: 22px; }
.ba-sp--footer .ba-sp__eu svg { width: 13px; height: 13px; }
.ba-sp--footer .ba-sp__text { font-size: 16px; padding: 0 16px 0 18px; }

.bs-footer__social { max-width: var(--bs-max); margin: 0 auto; padding: 0 var(--bs-gutter); box-sizing: border-box; }
.bs-footer__social .ba-sp { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); }

@media (max-width: 680px) {
	.ba-sp--choose { margin-top: 30px; }
	.ba-sp--choose .ba-sp__list { gap: 14px 12px; }
	.ba-sp__plate { height: 36px; transform-origin: 34px 50%; }
	.ba-sp__plate::before { left: 32px; }
	.ba-sp__eu { width: 22px; flex-basis: 22px; }
	.ba-sp__text { font-size: 17px; padding: 0 15px 0 17px; }
	.ba-sp--footer { flex-direction: column; align-items: flex-start; }
	.ba-sp--footer .ba-sp__label { font-size: 20px; }
	.ba-sp--footer .ba-sp__list { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.ba-sp__plate, .ba-sp__plate::after, .ba-sp__frame { transition: none; }
	.ba-sp__link:hover .ba-sp__plate, .ba-sp__link:focus-visible .ba-sp__plate { transform: none; }
	.ba-sp__link:hover .ba-sp__plate::after, .ba-sp__link:focus-visible .ba-sp__plate::after { opacity: 1; }
}