#cennik #karnety ul.tickets-list > li,
#cennik #additional-options ul.tickets-list > li{
  list-style:none;
  flex:1 1 0;
  padding:2.2rem;
  border:2px solid color-mix(in srgb, var(--text-red) 65%, transparent);
  border-radius:20px;
  min-width:290px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.060) 100%),
    rgba(0,0,0,.34);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  box-shadow:
    0 12px 32px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.05),
    1px 0 10px var(--text-red);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    border-color .35s ease;
  will-change: transform;
}

#cennik #karnety ul.tickets-list > li > *,
#cennik #additional-options ul.tickets-list > li > *{
  position:relative;
  z-index:1;
}

#cennik #karnety ul.tickets-list > li::before,
#cennik #additional-options ul.tickets-list > li::before{
  content:"";
  position:absolute;
  left:-120%; right:-120%;
  top:-60%; bottom:-60%;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(20deg,
      transparent 36%,
      rgba(255,255,255,.24) 47%,
      rgba(255,255,255,.14) 53%,
      transparent 64%);
  mix-blend-mode: screen;
  opacity:.65;
  transform: translateX(-35%) translateZ(0);
  transition: transform .8s cubic-bezier(.2,.8,0,1), opacity .8s;
  will-change: transform;
}

#cennik #karnety ul.tickets-list > li::after,
#cennik #additional-options ul.tickets-list > li::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.20;
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

#cennik #karnety ul.tickets-list > li:hover,
#cennik #additional-options ul.tickets-list > li:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 46px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.07);
  border-color: color-mix(in srgb, var(--text-red) 85%, transparent);
}

#cennik #karnety ul.tickets-list > li:hover::before,
#cennik #additional-options ul.tickets-list > li:hover::before{
  transform: translateX(35%) translateZ(0);
  opacity:.9;
}

@media (prefers-reduced-motion: reduce){
  #cennik #karnety ul.tickets-list > li,
  #cennik #karnety ul.tickets-list > li::before,
  #cennik #additional-options ul.tickets-list > li,
  #cennik #additional-options ul.tickets-list > li::before{
    transition:none !important;
  }
}