/* =========================
   SANTROVISION ULTRA PLAYER UI
   CINEMATIC IPTV PRO LEVEL
========================= */

/* RESET */
*{
  box-sizing:border-box;
}

/* =========================
   WRAPPER
========================= */
#player-section{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* =========================
   PLAYER BOX (MAIN STAGE)
========================= */
#player-box{
  position:relative;
  width:100%;
  height:100%;
  background:#000;
  border-radius:22px;
  overflow:hidden;

  border:1px solid rgba(0,229,255,0.12);

  box-shadow:
    0 30px 90px rgba(0,0,0,0.85),
    inset 0 0 120px rgba(0,229,255,0.08);

  transition:0.3s ease;
}

/* hover cinematic glow */
#player-box:hover{
  border-color:rgba(0,229,255,0.35);
  box-shadow:
    0 35px 110px rgba(0,0,0,0.9),
    0 0 40px rgba(0,229,255,0.15);
}

/* =========================
   VIDEO
========================= */
#videoPlayer{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

/* =========================
   CINEMATIC VIGNETTE
========================= */
#player-box::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 45%, rgba(0,0,0,0.65)),
    linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 40%);
  pointer-events:none;
}

/* =========================
   STATUS (LIVE BADGE)
========================= */
#statusBox{
  position:absolute;
  top:16px;
  left:16px;

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 12px;
  font-size:12px;
  border-radius:14px;

  background:rgba(10,10,10,0.45);
  backdrop-filter: blur(14px);

  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
}

/* LIVE DOT */
#statusBox::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#00e5ff;
  box-shadow:0 0 15px #00e5ff;
}

/* =========================
   WATERMARK (LOCKED)
========================= */
#watermark{
  position:absolute;
  bottom:16px;
  right:16px;

  font-size:12px;
  color:#00e5ff;

  opacity:0.9;
  letter-spacing:1.2px;

  user-select:none;
  pointer-events:none;

  text-shadow:0 0 25px rgba(0,229,255,0.4);
}

/* =========================
   BRAND TICKER
========================= */
#brandTicker{
  position:absolute;
  bottom:16px;
  left:16px;

  font-size:12px;
  color:rgba(255,255,255,0.75);

  padding:6px 12px;
  border-radius:12px;

  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);

  border:1px solid rgba(255,255,255,0.06);
}

/* =========================
   CONTROLS PANEL
========================= */
#player-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  padding:12px 0;
}

/* BUTTONS + SELECT */
#player-controls button,
#player-controls select{
  padding:10px 14px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.06);
  color:#fff;

  cursor:pointer;

  transition:0.25s ease;

  backdrop-filter: blur(12px);
}

/* HOVER */
#player-controls button:hover{
  background:rgba(0,229,255,0.9);
  color:#000;

  transform:translateY(-2px) scale(1.06);

  box-shadow:0 12px 30px rgba(0,229,255,0.25);
}

/* CLICK FEEL */
#player-controls button:active{
  transform:scale(0.97);
}

/* SELECT FIX (QUALITY ISSUE SOLVED) */
#player-controls select{
  outline:none;
  color:#00e5ff;
}

/* dropdown options */
#player-controls select option{
  background:#0a0a0a;
  color:#fff;
}

/* =========================
   LOADING GLOW
========================= */
@keyframes glowPulse{
  0%{ box-shadow:0 0 10px rgba(0,229,255,0.15); }
  50%{ box-shadow:0 0 30px rgba(0,229,255,0.35); }
  100%{ box-shadow:0 0 10px rgba(0,229,255,0.15); }
}

.loading{
  animation:glowPulse 1.4s infinite;
}

/* =========================
   FULLSCREEN MODE
========================= */
:fullscreen #player-box{
  border-radius:0;
}

/* =========================
   TV OPTIMIZED UI
========================= */
@media (min-width: 1400px){
  #statusBox,
  #brandTicker,
  #watermark{
    font-size:14px;
  }

  #player-controls button{
    padding:12px 16px;
    font-size:14px;
  }
}

/* =========================
   SMOOTH UI FEEL (GLOBAL)
========================= */
button, select{
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}