/* Dolny pasek „Następny krok” na poradnikach (inc/next-step.php, assets/js/next-step.js).
   Wygląd przejęty z dawnego paska kursu z WPCode. */

.fm-bar {
  --fm-bar-bg: #121212;
  --fm-bar-text: #ffffff;
  --fm-bar-muted: #bdbdbd;
  --fm-bar-accent: var(--fm-pink, #b4566b);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  font-family: var(--fm-font-body, "Inter", system-ui, sans-serif);
  color: var(--fm-bar-text);
  line-height: 1.6;
  transform: translateY(0);
  transition: transform .25s ease;
}
.fm-bar[hidden] { display: none; }
.fm-bar.is-entering { transform: translateY(100%); }

.fm-bar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom)) 16px;
  background: var(--fm-bar-bg);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .18);
}

.fm-bar a.fm-bar__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fm-bar-text) !important;
  text-decoration: none !important;
}
.fm-bar a.fm-bar__link:focus-visible {
  outline: 2px solid var(--fm-bar-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.fm-bar__text  { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.fm-bar__label { font-size: 13px; color: var(--fm-bar-muted); white-space: nowrap; }
.fm-bar__sub   {
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-bar__more {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--fm-bar-accent);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fm-bar__more span { transition: transform .2s ease; }
.fm-bar a.fm-bar__link:hover .fm-bar__more span { transform: translateX(3px); }

.fm-bar__close {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--fm-bar-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.fm-bar__close:hover { color: var(--fm-bar-text); }
.fm-bar__close:focus-visible { outline: 2px solid var(--fm-bar-accent); outline-offset: -4px; }

@media (max-width: 520px) {
  .fm-bar__row  { padding-top: 9px; padding-bottom: calc(9px + env(safe-area-inset-bottom)); gap: 8px; }
  .fm-bar__text { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.35; }
  .fm-bar__label { font-size: 12px; }
  .fm-bar__sub  { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 340px) {
  .fm-bar__sub  { font-size: 14px; }
  .fm-bar__more { padding: 6px 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-bar, .fm-bar__more span { transition: none; }
}