/**
 * Enhanced Plyr controls layout — inline progress bar with grouped left/right controls.
 * Overrides absolute positioning from staging newPlyr2.css.
 * Deploy: append this file to https://staging.shofha.com/Files/newPlyr2.css
 */
.fa-step-backward:before{
  font-size: 1.1rem !important;
}
:root {
  --plyr-color-main: #910045;
  --plyr-video-control-color: #fff;
  --plyr-range-track-height: 3px;
  --plyr-range-thumb-height: 12px;
  --plyr-range-fill-background: #910045;
  --plyr-video-controls-background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  --plyr-font-size-time: 13px;
  --plyr-progress-marker-background: #910045;
  --plyr-progress-marker-width: 2px;
  --shofha-menu-bg: #515151;
  --shofha-menu-hover: rgba(95, 95, 95, 1);
  --shofha-menu-active: #910045;
  --shofha-audio-menu-bg: rgba(13, 13, 25, 0.74);
  --shofha-audio-menu-hover: rgba(255, 255, 255, 0.06);
  --shofha-audio-menu-active: rgba(255, 255, 255, 0.08);
  --shofha-check-color: #910045;
}

.plyr--video .plyr__controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 10px 14px 14px !important;
  transform: none !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)) !important;
}

.plyr--video .plyr__controls > .plyr__control,
.plyr--video .plyr__controls > .plyr__controls__item {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 2px !important;
  flex-shrink: 0;
}

.plyr--video .plyr__control[data-plyr="rewind"]        { order: 1; }
.plyr--video .plyr__control[data-plyr="play"]          { order: 2; }
.plyr--video .plyr__control[data-plyr="fast-forward"]  { order: 3; }
.plyr--video .plyr__control[data-plyr="plyr-next"]    { order: 4; }
.plyr--video .plyr__controls__item.plyr__volume        { order: 5; }
.plyr--video .plyr__controls__item.plyr__time--current { order: 6; }

.plyr--video .plyr__controls__item.plyr__progress__container {
  order: 10 !important;
  position: static !important;
  flex: 1 1 auto !important;
  min-width: 60px !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 10px !important;
  transform: none !important;
  left: auto !important;
}

.plyr--video .plyr__controls__item.plyr__time--duration { order: 11; }
.plyr--video .plyr__control[data-plyr="captions"]        { order: 12; }
.plyr--video .plyr__control.custom-audio-btn             { order: 13; }
.plyr--video .plyr__controls__item.plyr__menu              { order: 14; }
.plyr--video .plyr__control[data-plyr="fullscreen"]      { order: 15; }

.plyr--video .plyr__control[data-plyr="plyr-prev"],
.plyr--video .plyr__control[data-plyr="restart"] {
  display: none !important;
}

.plyr--video .plyr__control[data-plyr="play"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: rgba(35, 35, 35, 0.72) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.plyr--video .plyr__control[data-plyr="play"]:hover {
  background: rgba(217, 41, 135, 0.85) !important;
  /* transform: scale(1.05) !important; */
}

.plyr--video .plyr__control[data-plyr="play"] svg {
  width: 20px !important;
  height: 20px !important;
}

.plyr--video .plyr__control[data-plyr="rewind"],
.plyr--video .plyr__control[data-plyr="fast-forward"] {
  width: 26px !important;
  height: 26px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.95;
}

/* No hover effect on skip buttons */
.plyr--video .plyr__control[data-plyr="rewind"]:hover,
.plyr--video .plyr__control[data-plyr="rewind"]:focus-visible,
.plyr--video .plyr__control[data-plyr="fast-forward"]:hover,
.plyr--video .plyr__control[data-plyr="fast-forward"]:focus-visible {
  background-color: transparent !important;
  transform: none !important;
  opacity: 0.95 !important;
}

.fa-step-forward:before {
    content: "\f051" !important;
    font-size: 1.1rem !important;
    /* padding: 0; */
}
.plyr--video .plyr__control[data-plyr="plyr-next"] {
    order: 4;
    position: relative !important;
    top: 2px !important;
}
.plyr--video .plyr__time {
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 0 4px !important;
  min-width: 42px;
}

.plyr--video .plyr__time + .plyr__time::before {
  display: none !important;
  content: none !important;
}

.plyr--video .plyr__progress {
  margin: 0 !important;
  left: 0 !important;
  height: 20px;
  display: flex;
  align-items: center;
}

.plyr--video .plyr__progress input[type="range"] {
  color: #910045 !important;
  height: 13px !important;
}

/* Track: grey base + magenta fill driven by Plyr's --value */
.plyr--video .plyr__progress input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  background-image: linear-gradient(to right, #910045 var(--value, 0%), transparent var(--value, 0%)) !important;
}

.plyr--video .plyr__progress input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #910045 !important;
  border: none !important;
  margin-top: -4.5px !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer;
}

.plyr--video .plyr__progress input[type="range"]::-moz-range-track {
  height: 4px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

.plyr--video .plyr__progress input[type="range"]::-moz-range-progress {
  height: 4px !important;
  border-radius: 4px !important;
  background: #910045 !important;
}

.plyr--video .plyr__progress input[type="range"]::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #910045 !important;
  border: none !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer;
}

/* Buffer (loaded ahead) — subtle light grey */
.plyr--video .plyr__progress__buffer {
  height: 4px !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, 0.18) !important;
  display: none ;
}

.plyr--video .plyr__progress__marker,
.plyr--video .plyr__progress__marker--intro {
  background-color: #910045 !important;
  width: 2px !important;
  height: 14px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1px;
  z-index: 4;
  pointer-events: none;
}

.plyr--video .plyr__progress__marker--intro::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #910045;
}

/* ── Vertical volume: rotated native Plyr input above the speaker icon ── */
.plyr--video .plyr__controls__item.plyr__volume {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
  left: auto !important;
  right: auto !important;
  padding: 0 !important;
}


.plyr--video .plyr__volume [data-plyr="mute"] {
  position: relative !important;
  /* z-index: 2 !important; */
  width: 40px !important;
  height: 40px !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #fff !important;
}

.plyr--video .plyr__volume [data-plyr="mute"] svg {
  width: 22px !important;
  height: 22px !important;
  fill: #fff !important;
}

/* Backing track (unfilled portion) drawn behind the rotated input */
/* .plyr--video .plyr__volume::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  width: 3px;
  height: 80px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1;
  pointer-events: none;
} */

.plyr--video .plyr__volume:hover::before,
.plyr--video .plyr__volume:focus-within::before {
  opacity: 1;
  visibility: visible;
}

/* Native Plyr volume input — rotated to vertical, fill via Plyr --value */
.plyr--video .plyr__volume input[type="range"] {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 33px) !important;
  max-width: 80px !important;
  min-width: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) rotate(-90deg) !important;
  transform-origin: center !important;
  color: #910045 !important;
  background: transparent !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  z-index: 30 !important;
  cursor: pointer;
}

.plyr--video .plyr__volume:hover input[type="range"],
.plyr--video .plyr__volume:focus-within input[type="range"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.plyr--video .plyr__volume input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 3px !important;
  background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)) !important;
}

.plyr--video .plyr__volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -4.5px !important;
  border-radius: 50% !important;
  background: #910045 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer;
}

.plyr--video .plyr__volume input[type="range"]::-moz-range-track {
  height: 3px !important;
  border-radius: 3px !important;
  background: transparent !important;
}

.plyr--video .plyr__volume input[type="range"]::-moz-range-progress {
  height: 3px !important;
  border-radius: 3px !important;
  background: #910045 !important;
}

.plyr--video .plyr__volume input[type="range"]::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #910045 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer;
}

.plyr--video .plyr__control.custom-audio-btn {
  position: static !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px !important;
}

/* ── Right-side group: identical size + equal gaps ── */
.plyr--video .plyr__control[data-plyr="captions"],
.plyr--video .plyr__control.custom-audio-wrapper,
.plyr--video .plyr__controls__item.plyr__menu,
.plyr--video .plyr__control[data-plyr="fullscreen"] {
     width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    padding: 0px !important;
    margin: 0 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* The menu wrapper itself shouldn't add its own box padding/margin twice */
.plyr--video .plyr__controls__item.plyr__menu {
  position: relative !important;
}

.plyr--video .plyr__controls__item.plyr__menu .plyr__control[data-plyr="settings"] {
  margin: 0 !important;
}

/* Uniform icon size across the group */
.plyr--video .plyr__control[data-plyr="captions"] svg,
.plyr--video .plyr__controls__item.plyr__menu .plyr__control[data-plyr="settings"] svg,
.plyr--video .plyr__control[data-plyr="fullscreen"] svg,
.plyr--video .plyr__control.custom-audio-btn svg,
.plyr--video .plyr__control.custom-audio-btn img {
  width: 18px !important;
  height: 18px !important;
}

/* Fullscreen uses a background-image icon — keep it sized like the rest */
.plyr--video .plyr__control[data-plyr="fullscreen"] {
  background-size: 18px 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.plyr--video .plyr__control:focus-visible,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.plyr--video .plyr__control[data-plyr="play"]:hover {
  background: rgba(217, 41, 135, 0.85) !important;
}

@media (max-width: 575px) {

  .plyr--video .plyr__controls {
    padding: 8px 8px 10px !important;
    gap: 0 !important;
    bottom: 30px !important;
  }

  .plyr--video .plyr__control[data-plyr="play"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .plyr--video .plyr__controls__item.plyr__progress__container {
    padding: 0 6px !important;
    min-width: 40px !important;
  }

  .plyr--video .plyr__time {
    font-size: 11px !important;
    min-width: 36px;
  }
}

/* ════════════════════════════════════════════════════════
   SERIES PLAYER — two-row layout (main player page only)
   Row 1: skip · play · skip · volume · time · progress · duration · fullscreen
   Row 2: prev · episodes · captions · dubbing · quality · next
   ════════════════════════════════════════════════════════ */

.plyr--series-layout.plyr--video .plyr__controls {
  flex-wrap: wrap !important;
  align-content: flex-end !important;
  padding: 8px 12px 6px !important;
  gap: 4px 2px !important;
}

.plyr--series-layout.plyr--video .plyr__controls-secondary {
  order: 100 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 0 20px 0 !important;
  margin-top: 0px !important;
  direction: ltr !important;
  gap: 24px !important;
  min-height: 50px !important;
  position: relative !important;
}

.plyr--series-layout.plyr--video .plyr__controls-secondary-center {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: max-content !important;
  max-width: none !important;
  min-width: max-content !important;
  direction: ltr !important;
  pointer-events: none;
  isolation: isolate;
  flex: 0 0 auto !important;
}

.plyr--series-layout.plyr--video .plyr__controls-secondary-center.has-dubbing-and-captions {
  gap: 24px !important;
}

.plyr--series-layout.plyr--video .plyr__controls-secondary-center > * {
  pointer-events: auto;
}

/* newPlyr2.css uses position:absolute + right offsets — reset so flex gap works */
.plyr--series-layout.plyr--video .plyr__controls-secondary-center [data-plyr="captions"],
.plyr--series-layout.plyr--video .plyr__controls-secondary-center .plyr__control--episodes:not(.plyr__control--nav-hidden),
.plyr--series-layout.plyr--video .plyr__controls-secondary-center .custom-audio-btn,
.plyr--series-layout.plyr--video .plyr__controls-secondary-center .plyr__control--quality {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
}

/* Movies: keep Episodes control hidden even inside series-layout flex row */
.plyr--series-layout.plyr--video .plyr__controls-secondary-center .plyr__control--episodes.plyr__control--nav-hidden,
.Cust_plyr.shofha-is-movie .plyr__control--episodes,
.Cust_plyr:not(.shofha-is-series) .plyr__control--episodes {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}

.plyr--series-layout.plyr--video .plyr__controls-secondary-center .captions-settings-wrapper,
.plyr--series-layout.plyr--video .plyr__controls-secondary-center .custom-audio-wrapper {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  overflow: visible !important;
}

.plyr--series-layout.plyr--video .plyr__controls-secondary-center .quality-settings-wrapper {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Every item: [icon] [label] on one line, vertically centered */
.plyr--series-layout.plyr--video .plyr__control--labeled {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

.plyr--series-layout.plyr--video .plyr__control--labeled:not([data-plyr="captions"]) > svg,
.plyr--series-layout.plyr--video .plyr__control--labeled > i,
.plyr--series-layout.plyr--video .plyr__control--labeled > img {
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.plyr--series-layout.plyr--video #plyr-prev,
.plyr--series-layout.plyr--video #plyr-next,
.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-prev"],
.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-next"] {
  display: inline-flex !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  z-index: 2 !important;
  align-self: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  order: unset !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.plyr--series-layout.plyr--video #plyr-prev.plyr__control--nav-hidden,
.plyr--series-layout.plyr--video #plyr-next.plyr__control--nav-hidden,
.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-prev"].plyr__control--nav-hidden,
.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-next"].plyr__control--nav-hidden,
.plyr--series-layout.plyr--video [data-plyr="captions"].plyr__control--nav-hidden,
.plyr--series-layout.plyr--video .plyr__control--episodes.plyr__control--nav-hidden,
.plyr--captions-unavailable [data-plyr="captions"] {
  display: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

.plyr--series-layout.plyr--video #plyr-prev,
.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-prev"] {
  flex: 0 0 auto !important;
  position: relative !important;
  left: auto !important;
}

.plyr--series-layout.plyr--video #plyr-next,
.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-next"] {
  flex: 0 0 auto !important;
  flex-direction: row-reverse !important;
  position: relative !important;
  right: auto !important;
}

.plyr--series-layout.plyr--video .plyr__control-label {
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #fff !important;
  white-space: nowrap !important;
  font-family: 'NewFontBranding', sans-serif !important;
  pointer-events: none;
  text-align: start !important;
}

.plyr--series-layout.plyr--video #plyr-prev i,
.plyr--series-layout.plyr--video #plyr-next i {
  font-size: 13px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* .plyr--series-layout.plyr--video .plyr__controls-secondary-center .plyr__control {

  min-width: 0 !important;
  padding: 3px !important;
  margin: 0 !important;
} */

.plyr--series-layout.plyr--video .plyr__controls-secondary > .plyr__menu {
  display: none !important;
}

/* Quality settings popup — anchored above الجودة button */
.plyr--series-layout.plyr--video .quality-settings-wrapper .plyr__controls__item.plyr__menu {
  position: absolute !important;
  left: 70% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

.plyr--series-layout.plyr--video .quality-settings-wrapper .plyr__menu__container {
  position: absolute !important;
  bottom: calc(100% + 40px) !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-70%) !important;
  margin: 0 !important;
  pointer-events: auto !important;
  z-index: 1000001 !important;
  background: var(--shofha-audio-menu-bg) !important;
  opacity: 1 !important;
  padding: 10px !important;
  min-width: 220px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.plyr--series-layout.plyr--video .quality-settings-wrapper .plyr__menu__container:after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-70%) !important;
  border-top-color: rgba(13, 13, 25, 0.74) !important;
}

.plyr--series-layout.plyr--video .plyr__control[data-plyr="plyr-next"] {
  order: unset !important;
  position: static !important;
  top: auto !important;
}

.plyr--series-layout.plyr--video .plyr__control[data-plyr="captions"],
.plyr--series-layout.plyr--video .captions-settings-wrapper,
.plyr--series-layout.plyr--video .plyr__controls__item.plyr__menu,
.plyr--series-layout.plyr--video .plyr__control.custom-audio-btn,
.plyr--series-layout.plyr--video .plyr__control.custom-audio-wrapper {
  order: unset !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  position: relative !important;
}

.plyr--series-layout.plyr--video .plyr__control--settings-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.plyr--series-layout.plyr--video .plyr__controls__item.plyr__menu {
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

.plyr--series-layout.plyr--video .plyr__control--quality img,
.plyr--series-layout.plyr--video .plyr__control--episodes img,
.plyr--series-layout.plyr--video .plyr__control.custom-audio-btn img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Plyr captions button ships two SVGs — show only the active state */
.plyr--series-layout.plyr--video [data-plyr="captions"] .icon--pressed,
.plyr--series-layout.plyr--video [data-plyr="captions"] .icon--not-pressed {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.plyr__control.plyr__control--labeled.plyr__control--episodes img{
    width: 21px !important;
    height: 25px !important;
    position: relative;
    top: -2px;

}

.plyr--series-layout.plyr--video [data-plyr="captions"].plyr__control--pressed .icon--not-pressed,
.plyr--series-layout.plyr--video [data-plyr="captions"]:not(.plyr__control--pressed) .icon--pressed {
  display: none !important;
}

.plyr--series-layout.plyr--video [data-plyr="captions"].plyr__control--pressed .icon--pressed,
.plyr--series-layout.plyr--video [data-plyr="captions"]:not(.plyr__control--pressed) .icon--not-pressed {
  display: block !important;
}

.plyr--series-layout.plyr--video [data-plyr="captions"].plyr__control--labeled {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
}

.plyr--series-layout.plyr--video [data-plyr="captions"] .plyr__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.Cust_plyr .scrollable {
  display: flex;
}

@media (max-width: 575px) {
  .plyr--series-layout.plyr--video .plyr__controls-secondary {
    padding: 0 6px !important;
    gap: 16px !important;
  }

  .plyr--series-layout.plyr--video .plyr__controls-secondary-center {
    gap: 14px !important;
  }

  .plyr--series-layout.plyr--video .plyr__controls-secondary-center.has-dubbing-and-captions {
    gap: 24px !important;
  }

  .plyr--series-layout.plyr--video .plyr__control--labeled {
    gap: 4px !important;
  }

  .plyr--series-layout.plyr--video .plyr__control-label {
    font-size: 10px !important;
  }

  .plyr--series-layout.plyr--video [data-plyr="captions"] .icon--pressed,
  .plyr--series-layout.plyr--video [data-plyr="captions"] .icon--not-pressed,
  .plyr--series-layout.plyr--video .plyr__control--quality img,
  .plyr--series-layout.plyr--video .plyr__control--episodes img,
  .plyr--series-layout.plyr--video .plyr__control.custom-audio-btn img {
    width: 16px !important;
    height: 16px !important;
  }

  .plyr--series-layout.plyr--video #plyr-prev i,
  .plyr--series-layout.plyr--video #plyr-next i {
    font-size: 11px !important;
  }

  .audio-track-list {
    min-width: 160px !important;
  }

  .audio-track-list__items li {
    padding: 9px 14px !important;
    font-size: 13px !important;
  }

  .plyr__menu__container .plyr__control--back::after {
    left: auto !important;
    right: auto !important;
  }
}

/* ════════════════════════════════════════════════════════
   SETTINGS MENU — dark RTL design (images 3 & 4)
   ════════════════════════════════════════════════════════ */

/* ── Container ── */
.plyr__menu__container {
  background: var(--shofha-audio-menu-bg) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  text-align: right !important;
  min-width: 220px !important;
  animation: none !important;
  padding: 10px !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.plyr__menu__container > div {
  width: auto !important;
  height: auto !important;
  transition: none !important;
  overflow: visible !important;
}

.plyr__menu__container:after {
  border-top-color: rgba(13, 13, 25, 0.74) !important;
}

/* ── Home panel: forward items (Quality, Captions…) ── */
.plyr__menu__container .plyr__control--forward {
  color: #fff !important;
  direction: ltr !important;
  justify-content: space-between !important;
  align-items: center !important;
  /* padding: 11px 34px 11px 16px !important; */
  gap: 12px !important;
}

/* Arrow on the right — rotated 180° (points right, away from label) */
.plyr__menu__container .plyr__control--forward:after {
  border-left-color: transparent !important;
  border-right-color: rgba(255,255,255,0.5) !important;
  left: auto !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

.plyr__menu__container .plyr__control--forward:hover:after,
.plyr__menu__container .plyr__control--forward:focus-visible:after {
  border-right-color: #fff !important;
  border-left-color: transparent !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

.plyr__menu__container .plyr__control--forward:hover,
.plyr__menu__container .plyr__control--forward:focus-visible {
  background: var(--shofha-audio-menu-active) !important;
  color: #fff !important;
}

/* Value label on home rows — right side, clear of arrow */
.plyr__menu__container .plyr__control--forward .plyr__menu__value,
.plyr__menu__container .plyr__control[role=menuitem]:not(.plyr__control--back) .plyr__menu__value {
  color: rgba(255, 255, 255, 0.55) !important;
  margin-left: auto !important;
  margin-right: 8px !important;
  padding-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* HD / SD badge pill */
.plyr__badge {
  background: #910045 !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  margin-inline-start: 4px !important;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ── Back button (quality sub-panel header) ── */
.plyr__menu__container .plyr__control--back {
  display: grid !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 6px !important;
  padding-left: 6px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #fff !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  border-radius: 0;
  margin-bottom: 10px !important;
}

[dir='ltr'] .plyr__menu__container .plyr__control--back,
.plyr__menu__container .plyr__control--back[dir='ltr'],
.plyr__menu__container .plyr__control--back-lang-ltr {
  grid-template-columns: auto 1fr 20px !important;
  padding-inline: 6px !important;
}

[dir='rtl'] .plyr__menu__container .plyr__control--back,
.plyr__menu__container .plyr__control--back[dir='rtl'],
.plyr__menu__container .plyr__control--back-lang-rtl {
  grid-template-columns: 20px 1fr auto !important;
  padding-inline: 6px !important;
}

.plyr__menu__container [role=menu]{
  padding: 0 !important;
}

.plyr__menu__container .plyr__control--back::after {
  grid-row: 1 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  align-self: center !important;
}

.plyr__menu__container .plyr__control--back-lang-ltr::after,
[dir='ltr'] .plyr__menu__container .plyr__control--back::after,
.plyr__menu__container .plyr__control--back[dir='ltr']::after {
  grid-column: 3 !important;
  justify-self: end !important;
  border-right-color: transparent !important;
  border-left-color: rgba(255, 255, 255, 0.85) !important;
  transform: rotate(360deg) !important;
}

.plyr__menu__container .plyr__control--back-lang-rtl::after,
[dir='rtl'] .plyr__menu__container .plyr__control--back::after,
.plyr__menu__container .plyr__control--back[dir='rtl']::after {
  grid-column: 1 !important;
  justify-self: center !important;
  border-left-color: transparent !important;
  border-right-color: rgba(255, 255, 255, 0.85) !important;
  transform: none !important;
}

.plyr__menu__container .plyr__control--back .plyr__menu__value {
  display: none !important;
}

.plyr__menu__container .plyr__control--back > span:not(.plyr__menu__value) {
  grid-row: 1 !important;
  color: #fff !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 5px !important;
}

[dir='ltr'] .plyr__menu__container .plyr__control--back > span:not(.plyr__menu__value),
.plyr__menu__container .plyr__control--back[dir='ltr'] > span:not(.plyr__menu__value),
.plyr__menu__container .plyr__control--back-lang-ltr > span:not(.plyr__menu__value) {
  grid-column: 1 !important;
  justify-self: start !important;
  text-align: left !important;
}

[dir='rtl'] .plyr__menu__container .plyr__control--back > span:not(.plyr__menu__value),
.plyr__menu__container .plyr__control--back[dir='rtl'] > span:not(.plyr__menu__value),
.plyr__menu__container .plyr__control--back-lang-rtl > span:not(.plyr__menu__value) {
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
  font-size: 14px;
}

.plyr__menu__container .plyr__control--back .plyr__badge,
.quality-settings-wrapper .plyr__menu__container .plyr__badge {
  display: none !important;
}

.plyr__menu__container .plyr__control--back:hover,
.plyr__menu__container .plyr__control--back:focus-visible {
  background: var(--shofha-audio-menu-hover) !important;
  color: #fff !important;
}

.plyr__menu__container .plyr__control--back-lang-ltr:hover::after,
.plyr__menu__container .plyr__control--back-lang-ltr:focus-visible::after,
[dir='ltr'] .plyr__menu__container .plyr__control--back:hover::after,
[dir='ltr'] .plyr__menu__container .plyr__control--back:focus-visible::after,
.plyr__menu__container .plyr__control--back[dir='ltr']:hover::after,
.plyr__menu__container .plyr__control--back[dir='ltr']:focus-visible::after {
  border-left-color: #fff !important;
  border-right-color: transparent !important;
  transform: rotate(360deg) !important;
}

.plyr__menu__container .plyr__control--back-lang-rtl:hover::after,
.plyr__menu__container .plyr__control--back-lang-rtl:focus-visible::after,
[dir='rtl'] .plyr__menu__container .plyr__control--back:hover::after,
[dir='rtl'] .plyr__menu__container .plyr__control--back:focus-visible::after,
.plyr__menu__container .plyr__control--back[dir='rtl']:hover::after,
.plyr__menu__container .plyr__control--back[dir='rtl']:focus-visible::after {
  border-left-color: transparent !important;
  border-right-color: #fff !important;
  transform: none !important;
}

.plyr__menu__container .plyr__control--back::before {
  display: none !important;
}

/* Quality forward row (home panel) — label left, value + arrow right */
.plyr__menu__container .plyr__control--forward[data-plyr="quality"] {
  color: #fff !important;
  direction: ltr !important;
  justify-content: space-between !important;
  align-items: center !important;
  /* padding: 11px 34px 11px 16px !important; */
  margin: 0 !important;
  width: 100% !important;
  gap: 12px !important;
}

.plyr__menu__container .plyr__control--forward[data-plyr="quality"]::after {
  border-left-color: transparent !important;
  border-right-color: rgba(255, 255, 255, 0.85) !important;
  left: auto !important;
  right: 0px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

.plyr__menu__container .plyr__control--forward[data-plyr="quality"] .plyr__menu__value {
  margin-left: auto !important;
  margin-right: 8px !important;
  padding-right: 4px !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ── Quality radio items — flat list with right-edge checkmark ── */
.plyr__menu__container .plyr__control[role=menuitemradio] {
  color: #fff !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  width: calc(100% - 12px) !important;
  position: relative !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 5px !important;
  padding: 10px !important;
  width: 100% !important;
}

.plyr__menu__container .plyr__control[role=menuitemradio]:not(:first-child) {
  border-top: none !important;
  padding: 10px !important;
  width: 100% !important;
  border-radius:0 !important ;
  margin-bottom: 5px !important;
}

/* Hide default Plyr radio circle/dot */
.plyr__menu__container .plyr__control[role=menuitemradio]:before,
.plyr__menu__container .plyr__control[role=menuitemradio]:after {
  display: none !important;
  margin: 0 !important;
  transition: none !important;
}

/* Selected row */
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true] {
  background: var(--shofha-audio-menu-active) !important;
  color: #fff !important;
  border-top-color: transparent !important;
  border-radius: 10px 10px 0px 0 !important;
  padding: 10px !important;
  width: 100% !important;
  margin-bottom: 5px !important;

}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true] + .plyr__control[role=menuitemradio] {
  border-top-color: transparent !important;
}

/* Checkmark — magenta circle on the right */
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  display: flex !important;
  content: '✓' !important;
  position: absolute !important;
  left: auto !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  background: var(--shofha-check-color) !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: none !important;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* Unselected hover */
.plyr__menu__container .plyr__control[role=menuitemradio]:not([aria-checked=true]):hover,
.plyr__menu__container .plyr__control[role=menuitemradio]:not([aria-checked=true]):focus-visible {
  background: var(--shofha-audio-menu-hover) !important;
}

/* Label left-aligned in the row */
.plyr__menu__container .plyr__control[role=menuitemradio] > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  text-align: left !important;
  direction: ltr !important;
  padding: 0 !important;
  margin: 0 !important;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true] + .plyr__control[role=menuitemradio]{
  padding: 10px !important;
  border-radius: 0 !important;
  margin-bottom: 5px !important;
}
/* HD badge inside quality radio list */
.plyr__menu__container .plyr__control[role=menuitemradio] .plyr__menu__value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

.plyr__menu__container .plyr__control[role=menuitemradio] .plyr__badge {
  display: none !important;
}

/* Home-panel value: number + badge inline, e.g. "720p [HD]" */
.plyr__menu__container .plyr__control[role=menuitem] .plyr__menu__value,
.plyr__menu__container .plyr__control--forward .plyr__menu__value {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 5px !important;
}

.plyr__menu__container .plyr__control[role=menuitem] .plyr__menu__value .plyr__badge,
.plyr__menu__container .plyr__control--forward .plyr__menu__value .plyr__badge {
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   DUBBING / AUDIO-TRACK DROPDOWN — vertical popup above الدبلجة
   ════════════════════════════════════════════════════════ */

.plyr--video .plyr__control.custom-audio-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* Keep progress bar below popup menus (newPlyr2 sets .plyr__controls * to z-index 999999) */
.Cust_plyr .plyr--series-layout.plyr--video .plyr__progress__container,
.Cust_plyr .plyr--series-layout.plyr--video .plyr__progress__container * {
  /* z-index: 1 !important; */
}

.Cust_plyr .plyr--series-layout.plyr--video .captions-settings-wrapper {
  z-index: 1000000 !important;
  isolation: isolate;
  position: relative !important;
}

.Cust_plyr .plyr--series-layout.plyr--video .custom-audio-wrapper,
.Cust_plyr .plyr--series-layout.plyr--video .captions-settings-wrapper,
.Cust_plyr .plyr--series-layout.plyr--video .quality-settings-wrapper {
  z-index: 1000000 !important;
  isolation: isolate;
}

.Cust_plyr .plyr--series-layout.plyr--video .audio-track-list,
.Cust_plyr .plyr--series-layout.plyr--video .audio-track-list.show,
.Cust_plyr .plyr--series-layout.plyr--video .caption-track-list,
.Cust_plyr .plyr--series-layout.plyr--video .caption-track-list.show,
.Cust_plyr .plyr--series-layout.plyr--video .native-quality-list,
.Cust_plyr .plyr--series-layout.plyr--video .native-quality-list.show,
.Cust_plyr .plyr--series-layout.plyr--video .plyr-quality-list,
.Cust_plyr .plyr--series-layout.plyr--video .plyr-quality-list.show {
  z-index: 1000001 !important;
  background: var(--shofha-audio-menu-bg) !important;
  opacity: 1 !important;
  position: absolute !important;
}

.Cust_plyr .plyr--series-layout.plyr--video .quality-settings-wrapper .plyr__menu__container,
.Cust_plyr .plyr--series-layout.plyr--video .plyr__menu__container {
  z-index: 1000001 !important;
  background: var(--shofha-audio-menu-bg) !important;
  opacity: 1 !important;
  position: absolute !important;
  padding: 10px !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.audio-track-list,
.caption-track-list {
  display: none !important;
  position: absolute !important;
  bottom: calc(100% + 20px) !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  min-width: 220px !important;
  width: max-content !important;
  background: var(--shofha-audio-menu-bg) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  margin: 0 !important;
  padding: 10px  !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.audio-track-list__header,
.caption-track-list__header {
  padding: 10px 16px 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  font-family: 'NewFontBranding', sans-serif !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[dir='rtl'] .audio-track-list__header,
[dir='rtl'] .caption-track-list__header,
.audio-track-list__header[dir='rtl'],
.caption-track-list__header[dir='rtl'] {
  direction: rtl !important;
  text-align: right !important;
}

[dir='ltr'] .audio-track-list__header,
[dir='ltr'] .caption-track-list__header,
.audio-track-list__header[dir='ltr'],
.caption-track-list__header[dir='ltr'] {
  direction: ltr !important;
  text-align: left !important;
}

.audio-track-list__items {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
}

.audio-track-list::after,
.caption-track-list::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(18, 18, 22, 0.92);
}

.audio-track-list.show,
.caption-track-list.show,
.native-quality-list.show,
.plyr-quality-list.show {
  display: block !important;
  pointer-events: auto !important;
}

.quality-settings-wrapper {
  position: relative !important;
}

/* Quality uses custom flat list — hide Plyr settings home panel */
.quality-settings-wrapper .plyr__menu__container {
  display: none !important;
  pointer-events: none !important;
}

.quality-settings-wrapper .native-quality-list,
.quality-settings-wrapper .plyr-quality-list {
  z-index: 1000001 !important;
  transform: translateX(calc(-50% - 20px)) !important;
}

.quality-settings-wrapper .native-quality-list::after,
.quality-settings-wrapper .plyr-quality-list::after {
  transform: translateX(calc(-50% + 20px));
}

.audio-track-list__items li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  /* width: 100% !important; */
  padding: 10px 16px !important;
  cursor: pointer;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #fff !important;
  text-align: left !important;
  direction: ltr !important;
  font-family: 'NewFontBranding', sans-serif !important;
  /* border-radius: 10px !important; */
  transition: background 0.15s ease;
  white-space: nowrap !important;
  margin: 3px 6px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.audio-track-list__label {
  flex: 1 1 auto !important;
  text-align: left !important;
}

/* RTL: right-align label text, keep check on the right */
[dir='rtl'] .audio-track-list__items li {
  direction: rtl !important;
}

[dir='rtl'] .audio-track-list__label {
  text-align: right !important;
}

.audio-track-list__check {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: var(--shofha-check-color) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.audio-track-list__check::before {
  content: '✓' !important;
}

.audio-track-list__items li + li {
  border-top: none !important;
}

.audio-track-list__items li:hover:not(.active) {
  background: var(--shofha-audio-menu-hover) !important;
}

.audio-track-list__items li.active {
  background: var(--shofha-audio-menu-active) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

.audio-track-list__items li.active .audio-track-list__check {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 575px) {
  .plyr__menu__container .plyr__control > span {
    font-size: 13px !important;
  }

  .plyr__menu__container .plyr__menu__value {
    font-size: inherit !important;
  }
}
@media (min-width:360px) and (max-width:376px){
  .plyr--series-layout.plyr--video .plyr__controls{
    gap: 0 !important;
    padding: 8px 0px 6px !important;
  }
}
@media (min-width:377px) and (max-width:395px){
  .plyr--series-layout.plyr--video .plyr__controls{
    gap: 0 !important;
    padding: 8px 0px 6px !important;
  }
}
/* Episodes drawer inside Plyr fullscreen (global — .plyr is not in Angular template) */
.Cust_plyr .plyr.episodes-open .episodes-backdrop,
.plyr--fullscreen-fallback.episodes-open .episodes-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483639 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
}

.Cust_plyr .plyr.episodes-open .episodes-drawer,
.plyr--fullscreen-fallback.episodes-open .episodes-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(500px, 34vw) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  z-index: 2147483640 !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

@media (max-width: 767.98px) {
  .Cust_plyr .plyr.episodes-open .episodes-drawer,
  .plyr--fullscreen-fallback.episodes-open .episodes-drawer {
    width: min(100vw, 360px) !important;
  }

  .Cust_plyr .plyr.episodes-open .episodes-drawer .episodes-drawer__list,
  .plyr--fullscreen-fallback.episodes-open .episodes-drawer .episodes-drawer__list,
  body.shofha-episodes-open .episodes-drawer__list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}