/* =========================================================
   Sticky Menu Bar – frontend (v1.1)
   Premenné --hsmb-* sa nastavujú inline per zariadenie.
   ========================================================= */

#hsmb-bar.hsmb-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--hsmb-offset, 0);
	z-index: 99990;
	background: var(--hsmb-bar-bg, #16242b);
	padding: var(--hsmb-pad, 12px) 14px;
	box-sizing: border-box;
	font-family: var(--hsmb-font, inherit);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: hsmb-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hsmb-up {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

#hsmb-bar .hsmb-inner {
	display: flex;
	align-items: center;
	gap: var(--hsmb-gap, 12px);
	max-width: 1200px;
	margin: 0 auto;
	justify-content: center;
}

#hsmb-bar .hsmb-bar-label {
	font-weight: 600;
	font-size: calc(var(--hsmb-fz, 15px) + 1px);
	white-space: nowrap;
	letter-spacing: 0.2px;
	flex: 0 0 auto;
}

#hsmb-bar .hsmb-buttons {
	display: flex;
	align-items: center;
	gap: var(--hsmb-gap, 12px);
	flex-wrap: wrap;            /* nikdy nepretečie – radšej zalomí */
	justify-content: center;   /* PREDVOLENE VŽDY NA STRED */
	width: 100%;
}

#hsmb-bar .hsmb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	background: var(--b-bg, var(--hsmb-btn-bg, #2b3d47));
	color: var(--b-color, var(--hsmb-btn-color, #fff));
	padding: 0.62em var(--hsmb-btnpad, 18px);
	border-radius: var(--hsmb-radius, 10px);
	font-family: var(--hsmb-font, inherit);
	font-size: var(--hsmb-fz, 15px);
	line-height: 1.2;
	font-weight: var(--hsmb-fw, 600);
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#hsmb-bar .hsmb-btn:hover,
#hsmb-bar .hsmb-btn:focus-visible {
	background: var(--hsmb-btn-hover-bg, #9fc0b8);
	color: var(--hsmb-btn-hover-color, #16242b);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	outline: none;
}

#hsmb-bar .hsmb-icon { display: inline-flex; align-items: center; justify-content: center; }
#hsmb-bar .hsmb-icon svg { width: var(--hsmb-icon, 20px); height: var(--hsmb-icon, 20px); display: block; }
#hsmb-bar .hsmb-emoji { font-size: var(--hsmb-icon, 20px); line-height: 1; }
#hsmb-bar .hsmb-label { display: inline; }

/* ---------- spoločné rozloženia (cez data atribúty per zariadenie) ---------- */
/* používame samostatné media query bloky, lebo každé zariadenie má vlastný atribút */

/* =================== DESKTOP (>=1025px) =================== */
@media (min-width: 1025px) {
	#hsmb-bar.hsmb-hide-desktop { display: none !important; }
	#hsmb-bar .hsmb-btn.hsmb-hide-d { display: none !important; }

	#hsmb-bar[data-dd="icon_only"] .hsmb-label { display: none; }
	#hsmb-bar[data-dd="text_only"] .hsmb-icon  { display: none; }

	#hsmb-bar[data-ld="center"] .hsmb-buttons { justify-content: center; }
	#hsmb-bar[data-ld="left"]   .hsmb-buttons { justify-content: flex-start; }
	#hsmb-bar[data-ld="right"]  .hsmb-buttons { justify-content: flex-end; }
	#hsmb-bar[data-ld="space"]  .hsmb-buttons { justify-content: space-between; }
	#hsmb-bar[data-ld="stretch"] .hsmb-buttons { flex-wrap: nowrap; }
	#hsmb-bar[data-ld="stretch"] .hsmb-btn { flex: 1 1 0; }
}

/* =================== TABLET (768–1024px) =================== */
@media (min-width: 768px) and (max-width: 1024px) {
	#hsmb-bar.hsmb-hide-tablet { display: none !important; }
	#hsmb-bar .hsmb-btn.hsmb-hide-t { display: none !important; }

	#hsmb-bar[data-dt="icon_only"] .hsmb-label { display: none; }
	#hsmb-bar[data-dt="text_only"] .hsmb-icon  { display: none; }

	#hsmb-bar[data-lt="center"] .hsmb-buttons { justify-content: center; }
	#hsmb-bar[data-lt="left"]   .hsmb-buttons { justify-content: flex-start; }
	#hsmb-bar[data-lt="right"]  .hsmb-buttons { justify-content: flex-end; }
	#hsmb-bar[data-lt="space"]  .hsmb-buttons { justify-content: space-between; }
	#hsmb-bar[data-lt="stretch"] .hsmb-buttons { flex-wrap: nowrap; }
	#hsmb-bar[data-lt="stretch"] .hsmb-btn { flex: 1 1 0; }
}

/* =================== MOBIL (<=767px) =================== */
@media (max-width: 767px) {
	#hsmb-bar.hsmb-hide-mobile { display: none !important; }
	#hsmb-bar .hsmb-btn.hsmb-hide-m { display: none !important; }

	#hsmb-bar.hsmb-bar { padding: var(--hsmb-pad, 8px) 10px; }
	#hsmb-bar .hsmb-bar-label { display: none; } /* na mobile schované pre viac miesta */

	#hsmb-bar[data-dm="icon_only"] .hsmb-label { display: none; }
	#hsmb-bar[data-dm="text_only"] .hsmb-icon  { display: none; }

	/* VŽDY NA STRED – aj keď sú zapnuté ikony; pri pretečení sa zalomí do ďalšieho riadku */
	#hsmb-bar .hsmb-buttons { justify-content: center; flex-wrap: wrap; }

	#hsmb-bar[data-lm="center"] .hsmb-buttons { justify-content: center; }
	#hsmb-bar[data-lm="left"]   .hsmb-buttons { justify-content: flex-start; }
	#hsmb-bar[data-lm="right"]  .hsmb-buttons { justify-content: flex-end; }
	#hsmb-bar[data-lm="space"]  .hsmb-buttons { justify-content: space-between; flex-wrap: nowrap; }
	#hsmb-bar[data-lm="stretch"] .hsmb-buttons { flex-wrap: nowrap; }
	#hsmb-bar[data-lm="stretch"] .hsmb-btn { flex: 1 1 0; min-width: 0; }

	/* pri „iba ikona" sú tlačidlá kompaktné a štvorcové */
	#hsmb-bar[data-dm="icon_only"] .hsmb-btn { padding: 0.55em 0.7em; }
}

@media (prefers-reduced-motion: reduce) {
	#hsmb-bar.hsmb-bar { animation: none; }
	#hsmb-bar .hsmb-btn { transition: none; }
}