/* Netflix Skin for JW Player 8 - Essential CSS */
:root {
  --bg-red: #e50914;
  --bg-white: #f7f7f7;
  --bg-black: #181919;
}

/* Player Controls Styling */
.jwplayer.jw-skin-netflix .jw-controlbar {
  background-color: rgba(0, 0, 0, 0.35);
}

.jwplayer.jw-skin-netflix .jw-controlbar .jw-button-container .jw-button-color {
  color: var(--bg-white);
}

.jwplayer.jw-skin-netflix .jw-controlbar .jw-button-container .jw-button-color:hover {
  color: var(--bg-red);
}

/* Progress Bar Styling */
.jwplayer.jw-skin-netflix .jw-slider-time .jw-rail {
  background-color: var(--bg-black);
}

.jwplayer.jw-skin-netflix .jw-slider-time .jw-buffer {
  background-color: #222323;
}

.jwplayer.jw-skin-netflix .jw-slider-time .jw-progress,
.jwplayer.jw-skin-netflix .jw-slider-time .jw-knob {
  background-color: var(--bg-red);
}

/* Tooltip Styling */
.jwplayer.jw-skin-netflix .jw-tooltip {
  box-shadow: none;
  background-color: var(--bg-black);
  color: var(--bg-white);
  border-radius: 0.3rem;
}

/* Settings Menu */
.jwplayer.jw-skin-netflix .jw-settings-menu {
  background-color: var(--bg-black);
  border-radius: 0.3rem;
}

/* Icons - Replace with SVG icons */
.jwplayer.jw-skin-netflix .jw-svg-icon-play {
  background-image: url("data:image/svg+xml;base64,...");
}

.jwplayer.jw-skin-netflix .jw-svg-icon-pause {
  background-image: url("data:image/svg+xml;base64,...");
}

/* Volume Control */
.jwplayer.jw-skin-netflix .jw-slider-volume .jw-rail,
.jwplayer.jw-skin-netflix .jw-slider-volume .jw-buffer {
  background-color: var(--bg-black);
  width: 0.2rem;
}

.jwplayer.jw-skin-netflix .jw-slider-volume .jw-progress {
  background-color: var(--bg-red);
  width: 0.2rem;
}

/* Display Icon */
.jwplayer.jw-skin-netflix.jw-state-idle .jw-display-icon-container .jw-svg-icon-play {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 100%;
}

/* Title Styling */
.jwplayer.jw-skin-netflix .jw-title-primary {
  color: var(--bg-white);
  font-family: "Rubik", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.jwplayer.jw-skin-netflix .jw-title-secondary {
  color: var(--bg-white);
  font-family: "Rubik", Arial, sans-serif;
  font-weight: 500;
}