.ripro-poster-box {
  margin: 0 0 1.5rem;
}

.ripro-poster-open,
.ripro-poster-download {
  background: linear-gradient(135deg, #171923, #30333d);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .25);
  color: #fff;
  font-weight: 700;
  padding: 11px 24px;
}

.ripro-poster-open:hover,
.ripro-poster-download:hover {
  color: #fff;
  filter: brightness(1.1);
}

.ripro-poster-modal[hidden] {
  display: none !important;
}

.ripro-poster-modal {
  animation: none !important;
  align-items: center;
  background: transparent;
  contain: layout paint style;
  display: flex;
  inset: 0;
  isolation: isolate;
  justify-content: center;
  padding: 20px;
  position: fixed;
  transform: none !important;
  transition: none !important;
  z-index: 100000;
}

.ripro-poster-dialog {
  animation: none !important;
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .2);
  max-height: 92vh;
  max-width: 460px;
  overflow: auto;
  padding: 22px;
  position: relative;
  transform: none !important;
  transition: none !important;
  width: 100%;
}

.ripro-poster-dialog h5 {
  font-weight: 700;
  margin: 0 0 5px;
}

.ripro-poster-close {
  background: #f1f5f9;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  height: 30px;
  line-height: 25px;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 30px;
}

.ripro-poster-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}

.ripro-poster-track.single {
  justify-content: center;
}

.ripro-poster-card {
  aspect-ratio:3/4;
  background: #eef3f8;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  flex: 0 0 min(300px, 76vw);
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
}

.ripro-poster-card.active {
  border-color: #4f86f7;
  box-shadow: 0 7px 20px rgba(79, 134, 247, .2);
}

.ripro-poster-card > .ripro-poster-template {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.poster-qr-card {
  background: #fff;
  border: 1px solid #d4af37;
  border-radius: 4px;
  bottom: 4%;
  box-shadow: 0 7px 18px rgba(212, 175, 55, .28);
  padding: 6px;
  position: absolute;
  right: 4%;
  width: 22%;
}

.poster-qr-card > img {
  background: #fff;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.ripro-poster-download {
  display: block;
  margin: 12px auto 0;
}

.ripro-poster-message {
  color: #64748b;
  display: block;
  margin-top: 10px;
}

@media (max-width: 575px) {
  .ripro-poster-dialog {
    max-width: calc(100vw - 24px);
    padding: 18px;
  }

  .ripro-poster-card {
    flex-basis: 76vw;
  }
}