/* ============================================
   PLYR CUSTOM THEME - Versão Limpa
   ============================================ */

:root {
  --plyr-color-main: #125ffa;
  --plyr-color-dark: #0c2f5a;
  --plyr-color-mid: #124cc0;
  --plyr-color-play: var(--magenta-primary-2);
  --plyr-bg-gray: #14141440;
  --plyr-text-white: var(--white);
  --plyr-color-main: var(--magenta-primary-2);
}

/* ============================================
   CURSOR
   ============================================ */

.custom-video {
  position: relative !important;
}

.plyr {
  cursor: none;
}

  .plyr.native-cursor,
  .plyr.native-cursor .plyr__controls,
  .plyr.native-cursor .plyr__controls * {
    cursor: auto;
  }

/* ============================================
   LAYOUT BASE DOS CONTROLES
   ============================================ */

.plyr--video .plyr__controls {
  padding-inline: 18px;
  padding-bottom: 10px;
  padding-top: 0;
  justify-content: center;
}

  .plyr--video .plyr__controls .plyr__controls__item {
    margin: 0 !important;
  }

    .plyr--video .plyr__controls .plyr__controls__item:first-child {
      margin-right: 10px !important;
    }

    .plyr--video .plyr__controls .plyr__controls__item:last-child {
      margin-right: 0px !important;
      padding-right: 10px !important;
      padding-left: 0 !important;
      width: fit-content;
    }


@media (min-width: 62em) {
  .plyr--video .plyr__controls {
    padding-inline: 36px;
    padding-bottom: 18px;
  }

    .plyr--video .plyr__controls .plyr__controls__item:first-child {
      margin-right: 14px !important;
    }

    .plyr--video .plyr__controls .plyr__controls__item:last-child {
      margin-right: 0px !important;
      padding-right: 14px !important;
    }
}
/* ============================================
   BOTÕES PRINCIPAIS (play, mute, settings, fullscreen)
   ============================================ */

/* Todos os botões de controle principais */
.plyr--video .plyr__controls > .plyr__control,
.plyr--video .plyr__controls .plyr__volume > .plyr__control,
.plyr--video .plyr__controls .plyr__menu > .plyr__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

  /* Hover em botões principais */
  .plyr--video .plyr__controls > .plyr__control:hover,
  .plyr--video .plyr__controls .plyr__volume > .plyr__control:hover,
  .plyr--video .plyr__controls .plyr__menu > .plyr__control:hover {
    cursor: pointer;
  }

@media (min-width: 62em) {
  .plyr--video .plyr__controls > .plyr__control,
  .plyr--video .plyr__controls .plyr__volume > .plyr__control,
  .plyr--video .plyr__controls .plyr__menu > .plyr__control {
    width: 38px;
    height: 38px;
  }
}

/* ============================================
   BOTÃO PLAY (especial — fundo branco, circular)
   ============================================ */

.plyr--video .plyr__controls .plyr__control[data-plyr="play"] {
  background-color: white;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  width: 26px;
  height: 26px;
}

  .plyr--video .plyr__controls .plyr__control[data-plyr="play"] svg {
    display: none !important;
  }

@media (min-width: 62em) {
  .plyr--video .plyr__controls .plyr__control[data-plyr="play"] {
    width: 38px;
    height: 38px;
  }
}

/* ============================================
   BOTÕES DE ÍCONE CUSTOM (mute, settings, fullscreen)
   ============================================ */

.plyr--video .plyr__controls .plyr__control i {
  cursor: pointer;
}

/* Reset de padding/margin para botões com ícone custom */
.plyr--video .plyr__controls .plyr__control[data-plyr="mute"],
.plyr--video .plyr__controls .plyr__control:not(.plyr__control--forward)[data-plyr="settings"] {
  padding: 0 !important;
  margin: 0 !important;
  width: fit-content !important;
}

/* Margem entre botões (exceto o último) */
.plyr--video .plyr__controls .plyr__control[data-plyr="mute"],
.plyr--video .plyr__controls .plyr__control:not(.plyr__control--forward)[data-plyr="settings"] {
  margin-right: 10px !important;
}

@media (min-width: 62em) {
  /* Margem entre botões (exceto o último) */
  .plyr--video .plyr__controls .plyr__control[data-plyr="mute"],
  .plyr--video .plyr__controls .plyr__control:not(.plyr__control--forward)[data-plyr="settings"] {
    margin-right: 22px !important;
  }
}

/* ============================================
   HOVER / FOCUS DOS BOTÕES CUSTOM
   ============================================ */

.plyr--video .plyr__controls .plyr__control[data-plyr="mute"]:hover,
.plyr--video .plyr__controls .plyr__control[data-plyr="mute"]:focus-visible,
.plyr--video .plyr__controls .plyr__control:not(.plyr__control--forward)[data-plyr="settings"]:hover,
.plyr--video .plyr__controls .plyr__control:not(.plyr__control--forward)[data-plyr="settings"]:focus-visible,
.plyr--video .plyr__controls .plyr__control[data-plyr="fullscreen"]:hover,
.plyr--video .plyr__controls .plyr__control[data-plyr="fullscreen"]:focus-visible,
.plyr--video .plyr__controls .plyr__control:not(.plyr__control--forward)[data-plyr="settings"][aria-expanded="true"] {
  background-color: transparent !important;
}

/* ============================================
   ÍCONES CUSTOM — esconde SVG do Plyr
   ============================================ */

/* Esconde SVGs originais nos botões que usam ícone custom */
.plyr--video .plyr__controls .plyr__control[data-plyr="mute"] svg,
.plyr--video .plyr__controls .plyr__control[data-plyr="settings"] svg,
.plyr--video .plyr__controls .plyr__control[data-plyr="fullscreen"] svg {
  display: none !important;
}

/* ============================================
   FUNDO CINZA (tempo + progresso)
   ============================================ */

.plyr__controls {
  position: relative;
}

  .plyr__controls::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--controls-bg-start);
    right: var(--controls-bg-end);
    height: 26px;
    background: var(--plyr-bg-gray) !important;
    border-radius: 8px;
    backdrop-filter: blur(4px);
  }

@media (min-width: 62em) {
  .plyr__controls::before {
    height: 38px;
  }
}


/* ============================================
   TEMPO ATUAL
   ============================================ */

.plyr__time--current {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: var(--plyr-text-white) !important;
  font-size: 14px !important;
  font-weight: 500;
  padding: 0 10px !important;
  margin-left: 14px !important;
  line-height: 26px;
  flex-shrink: 0;
}

@media (min-width: 62em) {
  .plyr__time--current {
    font-size: 16px !important;
    padding: 0 14px !important;
    line-height: 38px;
  }
}
/* ============================================
   PROGRESSO
   ============================================ */

.plyr__progress__container {
  position: relative;
  z-index: 1;
  background: transparent !important;
  flex: 1;
  padding: 0 8px !important;
  margin: 0 !important;
}

.plyr__progress {
  position: relative;
}

  .plyr__progress input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }

    .plyr__progress input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 0;
      height: 0;
      background: transparent;
    }

    .plyr__progress input[type="range"]::-moz-range-thumb {
      width: 0;
      height: 0;
      background: transparent;
      border: none;
    }

.plyr--full-ui input[type=range] {
  color: var(--magenta-primary-2);
}

@media (min-width: 62em) {
  .plyr__progress__container {
    padding: 0 22px !important;
  }
}

/* ============================================
   CURSOR CUSTOM
   ============================================ */
.video-cursor {
  display: none;
  pointer-events: none !important;
}

.plyr__captions,
.plyr__poster {
  pointer-events: none !important;
}

@media (min-width: 62em) {
  .video-cursor {
    display: flex;
    position: absolute;
    height: 58px;
    width: 58px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transform-origin: top left;
  }
}