/* Mobil/tablet: bez spodnej lišty „Späť na menu“ – návrat do menu potiahnutím doprava (js/swipe-back.js). */
@media (max-width: 1023.98px) {
  [data-action-buttons] { display: none !important; }
  /* Rezerva pod obsahom bola len pre lištu – ostane obyčajný okraj. */
  div:has(+ [data-action-buttons]) { height: var(--viewport-gutter); padding: 0; }
}

/* Indikátor počas ťahania: žltý krúžok so šípkou, vysúva sa zľava. */
.mj-swipe {
  position: fixed;
  top: 50%;
  left: -4.8rem;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-near-black) 85%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  color: var(--color-yellow);
  box-shadow: 0 0.8rem 2.4rem rgb(0 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mj-swipe svg { width: 1.6rem; height: 1.6rem; }
.mj-swipe.is-active { opacity: 1; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.mj-swipe.is-ready { background: var(--color-yellow); color: var(--color-black); }

/* Jednorazová nápoveda pri prvej podstránke v relácii. */
.mj-swipe-hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--viewport-gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 2 * var(--viewport-gutter));
  padding: 1.2rem 1.8rem;
  border-radius: 99rem;
  background: color-mix(in oklab, var(--color-near-black) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  color: var(--color-white);
  font-size: var(--text-xs);
  white-space: nowrap;
  box-shadow: 0 0.8rem 2.4rem rgb(0 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 1.2rem, 0);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mj-swipe-hint.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }
.mj-swipe-hint svg { width: 1.4rem; height: 1.4rem; color: var(--color-yellow); animation: mj-swipe-nudge 1.2s ease-in-out infinite; }

@keyframes mj-swipe-nudge {
  0%, 100% { transform: translateX(-0.3rem); }
  50% { transform: translateX(0.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .mj-swipe, .mj-swipe-hint { transition: opacity 0.2s ease; }
  .mj-swipe-hint svg { animation: none; }
}