/* TradyGo subtitle picker — visual style.
 * Custom CC overlay used on /vps.html and /index.html (hero).
 */

/* ── Button wrapper (positioned over the video, top-left to avoid clashing
   with subtitle cues which render along the bottom of the player) ────── */
.tg-sub-wrap{
  position:absolute;
  left:14px;
  top:14px;
  z-index:5;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  pointer-events:auto;
}

/* On videos with native <video controls> chrome, an additional sibling
   control bar appears at the bottom — keep our overlay safely at the top so
   it never collides with the OS player UI either. */
video[controls] ~ .tg-sub-wrap,
.video-frame .tg-sub-wrap{
  top:14px;
}

/* Hero page : the existing "Activer le son" pill used to sit bottom-right,
   we move it to a stacked layout below the subtitles button — see CSS
   override in index.html (.hero-video-unmute) for the new positioning. */
.hero-video .tg-sub-wrap{
  top:14px;
  left:14px;
}

.tg-sub-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;
  background:rgba(10,15,22,0.78);
  color:#fff;
  border:1px solid rgba(62,207,142,0.35);
  border-radius:999px;
  font:600 12.5px/1 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:0.01em;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
}
.tg-sub-btn:hover{
  background:rgba(15,22,32,0.92);
  border-color:rgba(62,207,142,0.55);
  transform:translateY(-1px);
}
.tg-sub-btn:focus-visible{
  outline:2px solid #3ECF8E;outline-offset:2px;
}
.tg-sub-btn.is-on{
  background:rgba(62,207,142,0.18);
  border-color:#3ECF8E;
  color:#3ECF8E;
}
.tg-sub-btn svg{
  width:14px;height:14px;flex:0 0 14px;color:currentColor;
}
.tg-sub-btn-label{white-space:nowrap}

/* ── Menu dropdown ────────────────────────────────────────────────── */
.tg-sub-menu{
  min-width:160px;
  background:rgba(10,15,22,0.96);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:6px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.4);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:tgSubMenuIn .14s ease-out;
  transform-origin:top left;
}
@keyframes tgSubMenuIn{
  from{opacity:0;transform:translateY(4px) scale(0.97)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
.tg-sub-item{
  appearance:none;
  background:transparent;
  border:0;
  color:rgba(255,255,255,0.82);
  font:500 13px/1.2 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  text-align:left;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.tg-sub-item:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
}
.tg-sub-item.is-active{
  background:rgba(62,207,142,0.14);
  color:#3ECF8E;
  font-weight:600;
}
.tg-sub-item:focus-visible{
  outline:2px solid #3ECF8E;outline-offset:-2px;
}

/* ── Subtitle cue typography (overrides native white-on-shadow) ──── */
::cue{
  background:rgba(8,12,18,0.78);
  color:#ffffff;
  font:600 18px/1.35 'Inter','Helvetica Neue',Arial,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  padding:2px 6px;
  border-radius:4px;
}
/* WebKit-only refinement for nicer kerning on macOS Safari */
@supports (-webkit-touch-callout: none) {
  ::cue{ font-weight:500; }
}

/* ── Mobile tweaks ────────────────────────────────────────────────── */
@media (max-width: 700px){
  .tg-sub-wrap{ left:8px; top:8px; }
  .hero-video .tg-sub-wrap{ left:8px; top:8px; }
  video[controls] ~ .tg-sub-wrap,
  .video-frame .tg-sub-wrap{ top:8px; }
  .tg-sub-btn{ padding:7px 12px 7px 10px; font-size:11.5px; }
  .tg-sub-btn-label{ display:none; }   /* keep just the icon on small screens */
  .tg-sub-btn svg{ width:16px; height:16px; }
  ::cue{ font-size:15px; }
}