/* pa-player.css — custom control bar + subtitle display + settings panel (Phase 2) */

.pa-custom-controls video::-webkit-media-controls { display:none !important; }
.pa-custom-controls video::-webkit-media-controls-enclosure { display:none !important; }

/* ===================== CONTROL BAR ===================== */
.pa-ctrlbar {
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.88));
  z-index:8; opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.pa-controls-visible .pa-ctrlbar { opacity:1; transform:translateY(0); pointer-events:auto; }

.pa-cb-btn { flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; padding:0; border-radius:6px; transition:background .15s; }
.pa-cb-btn:hover { background:rgba(255,255,255,0.12); }
.pa-cb-btn svg { width:22px; height:22px; fill:#fff; }
.pa-cb-cc.pa-off svg { fill:#6b7d8c; } /* subtitles off = dimmed */

.pa-cb-time { flex:0 0 auto; color:#e8f2fb; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; min-width:36px; text-align:center; }

.pa-cb-seek { flex:1 1 auto; position:relative; height:16px; display:flex; align-items:center; cursor:pointer; min-width:60px; }
.pa-cb-seek::before { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; border-radius:99px; background:rgba(255,255,255,0.25); }
.pa-cb-buffered { position:absolute; left:0; top:50%; transform:translateY(-50%); height:4px; border-radius:99px; background:rgba(255,255,255,0.4); width:0; }
.pa-cb-progress { position:absolute; left:0; top:50%; transform:translateY(-50%); height:4px; border-radius:99px; background:#12b8ff; width:0; box-shadow:0 0 8px rgba(18,184,255,0.6); }
.pa-cb-thumb { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#12b8ff; box-shadow:0 0 8px rgba(18,184,255,0.9); opacity:0; transition:opacity .15s; }
.pa-cb-seek:hover .pa-cb-thumb { opacity:1; }

/* volume */
.pa-cb-vol { flex:0 0 auto; display:flex; align-items:center; }
.pa-cb-volslider { width:0; opacity:0; transition:width .2s ease, opacity .2s ease; accent-color:#12b8ff; height:4px; }
.pa-cb-vol:hover .pa-cb-volslider { width:70px; opacity:1; margin-left:4px; }

/* fullscreen player container */
.pa-fs { width:100vw !important; height:100vh !important; max-width:none !important; background:#000; }
.pa-fs video { width:100% !important; height:100% !important; object-fit:contain; }

/* ===================== SUBTITLE DISPLAY ===================== */
.pa-subs-display { position:absolute; left:0; right:0; bottom:14%; display:none; justify-content:center; align-items:flex-end; text-align:center; pointer-events:none; z-index:6; padding:0 6%; line-height:1.3; font-weight:700; transition:bottom .25s ease, opacity .2s ease; }
.pa-controls-visible .pa-subs-display { bottom:18%; }
.pa-subs-display .pa-subs-text { display:inline-block; padding:0.15em 0.5em; border-radius:4px; white-space:pre-wrap; max-width:100%; }

/* ===================== SETTINGS PANEL (over player) ===================== */
.pa-subs-panel {
  position:absolute; right:14px; bottom:64px; width:300px; max-width:calc(100% - 28px);
  background:rgba(10,14,22,0.97); backdrop-filter:blur(14px);
  border:1px solid rgba(18,184,255,0.3); border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6); padding:14px 16px;
  z-index:9999; color:#dce8f5; font-size:13px; display:none; max-height:calc(100% - 80px); overflow-y:auto;
}
.pa-subs-panel.open { display:block; }
.pa-subs-panel-head { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:14px; color:#fff; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(18,184,255,0.2); }
.pa-subs-close { background:none; border:0; color:#9fb8cc; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.pa-subs-close:hover { color:#fff; }
.pa-subs-row { margin-bottom:12px; }
.pa-subs-row label { display:block; font-size:11px; font-weight:700; color:#9fb8cc; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
.pa-subs-row input[type="range"] { width:100%; accent-color:#12b8ff; }
.pa-subs-row select { width:100%; background:rgba(0,0,0,0.4); border:1px solid rgba(18,184,255,0.25); border-radius:6px; color:#dce8f5; padding:6px 8px; font-size:13px; }
.pa-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.pa-swatch { width:28px; height:28px; border-radius:6px; border:2px solid rgba(255,255,255,0.15); cursor:pointer; padding:0; }
.pa-swatch.sel { border-color:#12b8ff; box-shadow:0 0 8px rgba(18,184,255,0.7); }
.pa-subs-reset { width:100%; margin-top:4px; background:rgba(18,184,255,0.12); border:1px solid rgba(18,184,255,0.3); border-radius:7px; color:#cfe9ff; padding:8px; font-weight:700; cursor:pointer; }
.pa-subs-reset:hover { background:rgba(18,184,255,0.22); }

/* ===================== MOBILE ===================== */
@media (max-width:600px) {
  .pa-ctrlbar { gap:4px; padding:8px 8px; }
  .pa-cb-btn { width:30px; height:30px; }
  .pa-cb-btn svg { width:20px; height:20px; }
  .pa-cb-time { font-size:11px; min-width:30px; }
  /* hide volume slider on mobile - tap mute button only */
  .pa-cb-vol:hover .pa-cb-volslider, .pa-cb-volslider { width:0; opacity:0; margin:0; display:none; }
  /* settings panel becomes a bottom sheet over the player */
  .pa-subs-panel { left:8px; right:8px; bottom:56px; width:auto; max-width:none; max-height:70%; }
  /* bigger touch target on seek */
  .pa-cb-seek { height:22px; }
  .pa-cb-thumb { opacity:1; width:15px; height:15px; }
}