.jaa-frame{
  --jaa-radius:16px;
  --jaa-ratio:16 / 9;
  position: relative;
  border-radius: var(--jaa-radius);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--jaa-ratio);
  background: #f2f2f2;
  margin: 24px 0;
}

.jaa-track{
  display:flex;
  width:100%;
  height:100%;
  transition: transform 300ms ease;
  will-change: transform;
}

.jaa-slide{
  flex: 0 0 100%;
  width:100%;
  height:100%;
}

.jaa-click{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}

.jaa-media{
  width:100%;
  height:100%;
  display:block;
  position:relative;
}

.jaa-img, .jaa-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.jaa-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 4;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 40px;
  font-size: 28px;
  background: rgba(0,0,0,0.45);
  color: #fff;
}
.jaa-prev{ left: 10px; }
.jaa-next{ right: 10px; }

.jaa-dots{
  position:absolute;
  left:0; right:0;
  bottom: 10px;
  display:flex;
  gap: 8px;
  justify-content:center;
  z-index:4;
}
.jaa-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
}
.jaa-dot.is-active{ background: rgba(255,255,255,0.95); }

.jaa-youtube .jaa-yt-play{
  position:absolute;
  inset:0;
  border:0;
  background: transparent;
  cursor:pointer;
}
.jaa-youtube .jaa-yt-play::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 64px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
}
.jaa-youtube .jaa-yt-play::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-35%,-50%);
  width:0;height:0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.jaa-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
}
.jaa-lightbox__inner{
  width: min(960px, 100%);
  background: #000;
  border-radius: 16px;
  overflow:hidden;
  position:relative;
}
.jaa-lightbox__close{
  position:absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 40px;
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.jaa-lightbox__frame{
  aspect-ratio: 16 / 9;
}
.jaa-lightbox__frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-width: 640px){
  .jaa-frame{ border-radius: var(--jaa-radius-mobile, var(--jaa-radius)); }
}

/* Design 2: Header top banner */
.jaa-headerbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999998;
  background: rgba(15, 15, 15, 0.96);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.jaa-headerbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.jaa-headerbar .jaa-frame{ margin: 0; }
.jaa-headerbar__close{
  margin-left: auto;
  border: 0;
  background: rgba(255,255,255,0.14);
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 22px;
  line-height: 34px;
}
.jaa-ticker{ width: 100%; overflow:hidden; }
.jaa-ticker__track{
  display:flex;
  gap: 36px;
  white-space: nowrap;
  animation: jaa-ticker-move 18s linear infinite;
  will-change: transform;
}
.jaa-ticker:hover .jaa-ticker__track{ animation-play-state: paused; }
.jaa-ticker__item{ color:#fff; opacity: 0.95; text-decoration:none; font-weight: 500; }
@keyframes jaa-ticker-move{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (max-width: 640px){
  .jaa-headerbar__inner{ padding: 10px 10px; }
  .jaa-ticker__track{ gap: 22px; }
}