/* Media Slider plugin styles */
.media-slider{
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 12px 12px 14px;
  background: rgba(0,0,0,0.15);
  margin: 10px 0;
}
.media-slider .ms-title{
  font-weight: 800;
  margin: 0 0 10px;
}
.media-slider .ms-viewport{
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}
.media-slider .ms-stage{
  display:flex;
  width:100%;
  transform: translateX(0);
  transition: transform 260ms ease;
}
.media-slider .ms-slide{
  flex:0 0 100%;
  width:100%;
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.2);
}
.media-slider .ms-slide img,
.media-slider .ms-slide video,
.media-slider .ms-slide iframe{
  width:100%;
  height:100%;
  object-fit: contain;
  border:0;
  border-radius: 12px;
  background: #000;
}
.media-slider .ms-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  font-size:26px;
  line-height:40px;
  cursor:pointer;
}
.media-slider .ms-prev{ left: 10px; }
.media-slider .ms-next{ right: 10px; }
.media-slider.ms-single .ms-nav{ display:none; }

.media-slider .ms-dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:10px;
}
.media-slider .ms-dot{
  width:10px;height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.28);
  background: transparent;
  cursor:pointer;
}
.media-slider .ms-dot.active{
  background: rgba(255,255,255,0.70);
}
.media-slider.ms-single .ms-dots{ display:none; }

.media-slider .ms-fullscreen{
  position:absolute;
  right: 10px;
  bottom: 12px;
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  cursor:pointer;
}
.media-slider.ms-empty .ms-fullscreen{ display:none; }

.plugin-missing{
  border:1px dashed rgba(255,255,255,0.35);
  border-radius:14px;
  padding:12px;
  opacity:0.9;
}

/* Overlay */
#ms-overlay{
  position:fixed;
  inset:0;
  display:none;
  z-index: 9999;
}
#ms-overlay.open{ display:block; }
#ms-overlay .ms-overlay-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.72);
}
#ms-overlay .ms-overlay-inner{
  position:absolute;
  inset: 4% 4%;
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  display:flex;
  flex-direction:column;
}
#ms-overlay .ms-overlay-close{
  align-self:flex-end;
  margin:10px 10px 0 0;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  cursor:pointer;
  font-size:18px;
}
#ms-overlay .ms-overlay-content{
  flex:1;
  padding: 12px;
}
#ms-overlay .ms-overlay-content .ms-slide{
  aspect-ratio: auto;
  height: 100%;
}
#ms-overlay .ms-overlay-content img,
#ms-overlay .ms-overlay-content video,
#ms-overlay .ms-overlay-content iframe{
  width:100%;
  height:100%;
  border-radius: 14px;
}


/* Utility styles used by plugins page (kept lightweight) */
.panel{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,0.12);
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px){
  .grid-2{ grid-template-columns: 1fr; }
}
.row{ display:flex; }
.checkbox{ display:flex; align-items:center; gap:10px; }
.code{
  padding: 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}
.badge{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border:1px solid rgba(255,255,255,0.18);
}
.badge.ok{ color: #34c759; border-color: rgba(52,199,89,0.6); }
.badge.bad{ color: #ff4b81; border-color: rgba(255,75,129,0.6); }


/* Counter + numbered dots */
.media-slider .ms-counter{
  font-size: 13px;
  opacity: .85;
  margin-left: auto;
}
.media-slider .ms-dot{
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

/* Center arrows */
.media-slider .ms-prev, .media-slider .ms-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: .9;
}
.media-slider .ms-prev{ left: 10px; }
.media-slider .ms-next{ right: 10px; }

.media-slider.ms-vertical .ms-stage{
  flex-direction: column;
}


/* Preview overlay modal */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: none;               /* set to flex by JS */
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.overlay .modal{
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(0,255,255,0.25);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  padding: 14px;
}