/* ╭──────────────────────────────────────────────────────────╮
   │  POLISHED CONTROLS (desktop + mobile)                   │
   ╰──────────────────────────────────────────────────────────╯ */

/* -- unified colours -------------------------------------- */
:root{
    --cftc-accent:#0ab6ff;      /* << change once to re-brand */
    --cftc-control-size:52px;
  }
  
  /* Fade controls in/out with hover or focus */
  .cftc-video-container .plyr__controls{
      opacity:0; transition:opacity .25s;
  }
  .cftc-video-container:hover .plyr__controls,
  .cftc-video-container .plyr--full-ui.plyr--hover .plyr__controls,
  .cftc-video-container .plyr__controls:focus-within{
      opacity:1;
  }
  
  /* keep buttons bottom corners */
  .cftc-video-container .plyr__controls{
      justify-content:space-between;
      padding:1.25rem 1.75rem;
  }
  
  /* round outlined buttons */
  .plyr__controls button{
      background:#0000!important;
      border:2px solid #fff!important;
      width:var(--cftc-control-size);
      height:var(--cftc-control-size);
      border-radius:50%!important;
      color:#fff!important;
      transition:border-color .25s,background .25s;
  }
  .plyr__controls button:hover{
      background:#ffffff22!important;
      border-color:var(--cftc-accent)!important;
  }
  .plyr__controls button svg{width:24px;height:24px;}
  
  /* play button bottom-left, mute next to it */
  .plyr__controls > button[data-plyr="play"]{order:1;margin-right:.5rem;}
  .plyr__controls > button[data-plyr="mute"]{order:2;}
  /* fullscreen bottom-right */
  .plyr__controls > button[data-plyr="fullscreen"]{margin-left:auto;order:3;}
  
  /* progress bar – thin, brand accent on fill */
  .plyr__progress{
      flex:1 1 auto; order:2; margin:0 .75rem;
  }
  .plyr__progress input[type="range"]{
      height:4px;
      background:#ffffff33!important;
  }
  .plyr__progress .plyr__progress--played,
  .plyr__progress .plyr__progress--buffer{
      background:var(--cftc-accent)!important;
  }
  .plyr__progress .plyr__tooltip{
      background:var(--cftc-accent);
      border-radius:4px;
      font-size:.75rem;
  }
  
  /* centred play-large button – brand colour fill */
  .plyr__control.plyr__control--overlaid{
      background:var(--cftc-accent)!important;
      width:90px;height:90px;
      border-radius:50%;
      box-shadow:0 4px 12px #000a;
  }
  .plyr__control.plyr__control--overlaid svg{width:40px;height:40px;}
  
  /* mobile – bump hit-area */
  @media(max-width:767px){
    :root{--cftc-control-size:64px;}
    .plyr__control.plyr__control--overlaid{width:110px;height:110px;}
  }