/* ========= CCTV Sidokerto — cards, grid, player, spinner ========= */

/* Fallback var (gunakan default jika theme var belum ada) */
:root {
  --cctv-border: var(--border, #e5e7eb);
  --cctv-text: var(--text, #111827);
}

/* Grid kamera (max 3 kolom, responsif) */
#cameraGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px)  { #cameraGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { #cameraGrid { grid-template-columns: repeat(3, 1fr); } }

/* Video & Plyr */
.card .video-wrap video { width: 100%; height: auto; display: block; }
.plyr__video-embed, .plyr--video { border-radius: 10px; overflow: hidden; }

/* Header kartu: kiri = judul; kanan = status+latency */
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.status-wrap {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.badge.status { white-space: nowrap; }
.badge.latency { background: var(--cctv-border); color: var(--cctv-text); opacity: .85; }
.badge, .badge.latency { white-space: nowrap; }

/* Player-card MSE (click-to-load) */
.player-card {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 12px; overflow: hidden; background: #000;
}
.player-card .thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.8);
}
.player-card .play-btn,
.player-card .stop-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 10px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 600;
  color: #fff; background: #0ea5e9; box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.player-card .stop-btn { display: none; background: #ef4444; }
.player-card.active .play-btn { display: none; }
/* Saat aktif, tampilkan tombol Stop di pojok kanan atas */
.player-card.active .stop-btn {
  display: inline-block; top: 12px; right: 12px; left: auto; transform: none;
}

/* Overlay spinner (dipakai main.js) */
.video-wrap { position: relative; }
.video-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  z-index: 3;
}
.spinner-on .video-loading { opacity: 1; pointer-events: auto; }
.video-loading .spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: cctv-spin .8s linear infinite;
}
@keyframes cctv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .video-loading .spinner { animation: none; }
}

/* (Opsional) indikator buffering/prebuffer dari main.js */
.card.is-buffering .player-embed,
.card.is-prebuffering .player-embed { filter: saturate(.9) brightness(.95); }

/* Stream offline: gambar memenuhi card (cover & center) */
.player-offline {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  user-select: none;
}

.player-offline img {
  display: block;
  width: 100%;
  height: 100%;
  /* kunci: penuhi card, tetap center, crop minimal */
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
}


/* (Opsional) jika ingin ada padding ekstra di layar kecil */
@media (max-width: 420px){
  .player-offline img{
    max-width: 94%;
    max-height: 94%;
  }
}

/* Pastikan iframe player mengisi kontainer 16:9 */
.player-card iframe.player-embed {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: #000; border-radius: 12px;
}


/* Akhiran kartu */