/* ==========================================================
   📺 STYLE UTAMA — Tampilan dasar halaman dan elemen player
   ========================================================== */
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background-color: black;
}

#player, #fallbackIframe {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
}

/* 🔒 Class untuk menyembunyikan elemen */
.hidden {
  display: none !important;
}

/* ==========================================================
   ⏳ LOADER STYLES — Animasi loading (copy dari JW)
   ========================================================== */
.loader-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: bold;
  color: #FFF;
  z-index: 10002;
}

.loader {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  left: -100px;
  box-sizing: border-box;
  animation: shadowRolling 2s linear infinite;
}

/* ✨ Animasi loader (versi aktif) */
@keyframes shadowRolling {
  0% { box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
  12% { box-shadow: 100px 0 #099, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
  25% { box-shadow: 110px 0 white, 100px 0 #099, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
  36% { box-shadow: 120px 0 white, 110px 0 white, 100px 0 #099, 0px 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 130px 0 #099, 120px 0 white, 110px 0 white, 100px 0 #099; }
  62% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #099, 120px 0 white, 110px 0 white; }
  75% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #099, 120px 0 white; }
  87% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #099; }
  100% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); }
}

/* 💤 Versi lama animasi loader (disimpan untuk referensi)
@keyframes shadowRolling {
  ...
}
*/

/* ==========================================================
   🍞 TOAST & BUTTONS — Notifikasi & tombol interaksi
   ========================================================== */

/* 🔔 Toast notifikasi salin link */
.copy-toast {
  position: fixed; top: 56px; left: 10px;
  z-index: 10003;
  background: rgba(20,20,20,.95);
  color: #eee;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  display: none;
  font-family: 'Roboto', sans-serif;
}

/* 📤 Tombol share halaman */
.page-share-btn {
  display: none !important;
  position: fixed; top: 10px; left: 10px;
  z-index: 10004;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 8px;
  background: rgba(0,0,0,.55);
  color: #FFF;
  cursor: pointer;
}

.page-share-btn:hover { color: #e6e800; }
.page-share-btn i { font-size: 18px; }

/* 🔊 Tombol "Unmute" pada player */
.player-unmute {
  position: absolute; top: 10px; left: 12px;
  z-index: 9999;
  display: none;
  padding: 10px 12px; border: 0; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 13px; line-height: 1;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
}

.player-unmute .mi {
  font-family: 'Material Icons Sharp';
  font-size: 20px;
  margin-right: 6px;
}

.player-unmute:hover { background: rgba(0,0,0,0.9); }

/* ==========================================================
   🎬 CLAPPR PLAYER STYLE — Tampilan elemen bawaan player
   ========================================================== */

/* 💧 Logo watermark Clappr */
div.clappr-watermark[data-watermark] {
  pointer-events: none !important;
  transform: scale(1.2);
}

/* 🖼️ Gaya gambar watermark */
div.clappr-watermark[data-watermark] img {
  opacity: 1;
  background-color: rgba(51, 51, 51, 0.098);
  backdrop-filter: blur(1.2px);
  border-radius: 10px;
}

/* 🔄 Warna spinner loading */
.spinner-three-bounce[data-spinner] > div {
  background-color: #20B2AA !important;
  border: 1px solid rgba(255,255,255,.7) !important;
}

/* 🖼️ Ukuran ikon poster utama */
svg.poster-icon { width: 70px !important; }

/* ==========================================================
   🎨 STYLE TAMBAHAN (disimpan untuk referensi)
   ========================================================== */

/*
svg.poster-icon{ padding:10px !important; fill: rgb(32,178,170,.0) !important; border-radius:10px !important;}
.dvr-controls[data-dvr-controls]{ color : #fff !important;}
.media-control.live[data-media-control] ... { background-color: rgb(32,178,170) !important; }
...

div.play-wrapper {
  background-image: url("https://peacetvid.github.io/peacetv/img/Home2.png") !important;
  background-size: cover !important;
  position: fixed !important; top:0!important;bottom:0!important;left:0!important;right:0!important;
  background-position: 50% 50%!important;
  height:100%!important;
  opacity: 100!important; 
}
*/