/* ZLSP Swipe HUD */
.zlspswipe-hud{
  position: fixed;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: .25rem .5rem;
  font: 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  border-radius: .375rem;
  pointer-events: none;
}

/* During drag, avoid text selection and show intent */
.zlspswipe-dragging{
  user-select: none !important;
  cursor: grabbing !important;
}

/* Swipe hint */
.zlspswipe-hint{
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10vw;
  opacity: 0;
  transition: opacity .25s ease;
}
.zlspswipe-hint.zlsh-animate{ opacity: 1; }
.zlspswipe-hint.zlsh-out{ opacity: 0; transition: opacity .4s ease; }

.zlspswipe-hint .zlsh-left,
.zlspswipe-hint .zlsh-right{
  font-size: 48px;
  line-height: 1;
  opacity: .0;
  transform: translateX(0);
  transition: transform .6s ease, opacity .6s ease;
  color: rgba(0,0,0,.45);
  text-shadow: 0 1px 3px rgba(255,255,255,.4);
}
.zlspswipe-hint.zlsh-animate .zlsh-left{
  opacity: .9;
  transform: translateX(12px);
}
.zlspswipe-hint.zlsh-animate .zlsh-right{
  opacity: .9;
  transform: translateX(-12px);
}
@media (prefers-color-scheme: dark){
  .zlspswipe-hint .zlsh-left, .zlspswipe-hint .zlsh-right{
    color: rgba(255,255,255,.7);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}