:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }

  .jw-rightclick-link.jw-info-overlay-item, .jw-rightclick-item.jw-featured {
    display: none !important;
  }
  
  /* .jw-button-container .jw-settings-sharing, .jw-button-container .jw-icon-cc {
    display: none !important;
  } */
  
  .jw-rightclick-link {
    color: #d2d2d2 !important;
  }
  
  .jw-rightclick-link span {
    color: #fff !important;
  }
  
  .jw-svg-icon-download {
    height: 24px !important;
    width: 24px !important;
  }
  
  .jw-svg-icon-qswitch {
    width: auto !important;
  }
  
  .jw-controlbar .jw-button-image {
    max-height: 30px !important;
  }
  
  .jw-text-live {
    color: #ff0000c7 !important;
  }
  
  .jwplayer, .jw-reset, .jw-reset-text, .jw-float-bar-title {
    font-family: "Lexend deca", sans-serif;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin: 0;
  padding: 0;
  display: block;
}

p {
  line-height: 1.5;
  margin: 0;
  padding: 0;
  display: block;
}

/* Prevent text overlap */
* {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

div, span {
  box-sizing: border-box;
}

/* Video player error messages - Clappr specific */
.clappr-error-container,
.clappr-error-message,
[class*="clappr"][class*="error"],
[class*="error"][class*="message"] {
  line-height: 1.5 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.clappr-error-container > *,
.clappr-error-message > * {
  display: block !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.5 !important;
}

/* General error message styling */
.error-message,
.error-text,
[data-error] {
  line-height: 1.5 !important;
  white-space: normal !important;
  display: block !important;
  margin: 0.5rem 0 !important;
}

.vds-video-layout {
  --video-brand: #f5f5f5;
  --video-controls-color: #f5f5f5;
  --video-focus-ring-color: rgb(78 156 246);
  --video-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
  --video-font-family: sans-serif;

  --video-bg: black;
  --video-border-radius: 6px;
  --video-border: 1px solid rgb(255 255 255 / 0.1);

  --video-fullscreen-chapter-title-font-size: 16px;
  --video-gesture-seek-width: 20%;

  /* Load. */
  --video-load-button-size: 56px;
  --video-load-button-border: var(--color);
  --video-load-button-bg: var(--media-brand);
  --video-load-button-border-radius: 100%;

  --video-sm-load-button-size: 48px;

  /* Buttons. */
  --video-sm-button-size: 60px;
  --video-sm-play-button-size: 76px;
  --video-sm-play-button-transform: translateY(-10%);
  --video-sm-play-button-bg: rgba(0 0 0 / 0.65);

  /* Sliders. */
  --video-slider-thumbnail-border: 1px solid #f5f5f5;
  --video-slider-thumbnail-border-radius: 2px;
  --video-volume-slider-max-width: 72px;

  --video-sm-slider-focus-track-height: 12px;

  /* Time. */
  --video-time-bg: unset;
  --video-fullscreen-time-font-size: 16px;

  --video-sm-time-font-size: 14px;
  --video-sm-start-duration-bg: rgba(0 0 0 / 0.64);
  --video-sm-start-duration-padding: 3px 6px;
  --video-sm-start-duration-color: var(--video-controls-color);

  /* Captions. */
  --video-captions-offset: 78px;
  --video-captions-transition: bottom 0.15s linear;

  --video-sm-captions-offset: 48px;
  --video-lg-fullscreen-captions-offset: 54px;

  --video-sm-captions-offset: 48px;
}

.vds-play-button {
  transform: translateY(-5%) scale(1.2) !important;
}

/* Center the poster-icon play button */
.poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 120px;
  height: 120px;
  max-width: 120px;
  max-height: 120px;
}

/* Responsive sizing for larger screens */
@media (min-width: 768px) {
  .poster-icon {
    width: 160px;
    height: 160px;
    max-width: 160px;
    max-height: 160px;
  }
}

@media (min-width: 1024px) {
  .poster-icon {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
  }
}