@font-face {
  font-family: OpenSans;
  src: url(../../assets/fonts/OpenSans-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: 'LG Display';
  src: url(../../assets/fonts/LG_Display.ttf);
  font-weight: normal;
}

@font-face {
  font-family: 'LG Display';
  src: url(../../assets/fonts/LG_Display-Light.ttf);
  font-weight: 300;
}

:root {                     
  --page-bg: #f8f5d7;
  --subs-font-color: #192456;
  --subs-font-size: 25px;
  --subs-font-size-small: 14px;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--page-bg);
  font-family: 'LG Display', OpenSans, Tiresias, sans-serif;
  overflow: hidden; /* Prevent potential minor scrollbars */
}

body:fullscreen,
body:-webkit-full-screen,
body:-moz-full-screen,
body:-ms-fullscreen {
  background-color: var(--page-bg) !important; /* Or your desired page background color */
  /* Add any other body styles you want preserved in fullscreen */
}

#root {
  width: 100%;
  height: 100%;
  position: relative; /* Keep for positioning context */
  overflow: hidden; /* Contain the absolutely positioned wrapper */
}

.vjs-texttrack-settings > span:first-child {
  display: none !important;
}

#player-and-subtitles-wrapper {
  /* --- Keep Absolute Positioning --- */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* --- Keep Flex Layout Inside --- */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  /* --- Size set by JavaScript --- */
  /* width, height will be set via element.style */
  /* Optional: Add initial reasonable values or let JS handle it */
  /* width: 90vw; */ /* Example initial */
  /* height: auto; */

  /* Add safety max values */
  max-width: 100vw;
  max-height: 100vh;

  /* CRITICAL: Hide overflow caused by potential calculation delay/glitches */
  overflow: hidden;

  /* Optional: Add a background for debugging */
  /* background-color: rgba(0, 0, 255, 0.1); */
}

#player_div_id {
  width: 100%; /* Relative to wrapper */
  /* Rely on KwikMotion 'aspectratio' config primarily */
  /* aspect-ratio: 16 / 9; */ /* Can be added as fallback */
  flex-shrink: 0; /* Don't allow video container to shrink vertically */
  /* background-color: rgba(0, 255, 0, 0.1); */ /* Debugging bg */
}

/* Ensure Video.js inner elements scale correctly */
#player_div_id .video-js {
  width: 100% !important;
  height: 100% !important;
  position: relative !important; /* Helps avoid weird VJS positioning */
}
#custom-subtitle-container {
  height: 140px; /* Fixed height */
  width: 100%; /* Relative to wrapper */
  flex-shrink: 0; /* Don't allow subtitle container to shrink vertically */
  box-sizing: border-box;
  /* Keep other styles */
  background-color:transparent;
  padding: 10px 15px;
  text-align: center;
  font-size: var(--subs-font-size);
  color: var(--subs-font-color);
  font-family: 'LG Display', Arial, sans-serif;
  white-space: pre-wrap;
  overflow-y: auto;
  margin-top: 0;
}

@media (max-width: 500px) {
  #custom-subtitle-container {
    font-size: var(--subs-font-size-small); /* Smaller font size for mobile devices */
  }
}

.video-container > video:first-child {
  display: none;
}
.video-container-horizontal {
  height: 100% !important;
  width: unset !important;
}
.video {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.video-horizontal {
  height: 100% !important;
  width: unset !important;
}

.video-container {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.video-container > video:first-child {
  display: none;
}

.video-container-horizontal {
  height: 100% !important;
  width: unset !important;
}

.video {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.video-horizontal {
  height: 100% !important;
  width: unset !important;
}

/** Player skin

/* fullscreen */
html:-ms-fullscreen {
  width: 100%;
}

video:-webkit-full-screen + .controls {
  background: #ccc;
  /* required for Chrome which doesn't heed the transparent value set above */
}

video:-webkit-full-screen + .controls progress {
  margin-top: 0.5rem;
}

/* --- Add this to your CSS file --- */

.vjs-subs-caps-button {
  display: none !important;
}

/* Optional: Style your custom button/menu if needed */
.vjs-custom-cc-button .vjs-icon-placeholder:before {
  content: "\f10d" !important;
  font-family: VideoJS;
  font-weight: 400;
}

.vjs-custom-cc-button .vjs-menu .vjs-menu-item.vjs-selected {
  background-color: rgba(0, 204, 255, 0.8);
  color: black;
}
/** Tags and modal **/

.interactive-tag {
  padding: 6px 6px 6px 6px;
  border-radius: 29px;
  max-width: 235px;
  min-width: 80px;
  text-align: center;
  height: 33px;
  display: table;
  font-size: 13px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 2px 3px 3px rgb(0 0 0 / 60%);
}

/* Style for the optional thumbnail image */
.interactive-tag-thumbnail {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  float: left;
  margin-right: 4px;
}

.interactive-tag-text-content {
  position: relative;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
  text-overflow: ellipsis;
}

/* Style for the title text */
.interactive-tag-text-title {
  display: block;
  max-width: 235px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Style for the "more" text */
.interactive-tag-more {
  cursor: pointer;
}

.info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.modal-button {
  width: 60px;
  height: 60px;
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 50%;
}

.modal-side-button {
  width: 55px;
  height: 55px;
  background: white;
}

#modal-button-left {
  left: -10%;
}

#modal-button-right {
  right: -10%;
  transform: translate(0, -50%) rotate(180deg);
}

.modal-content-share-img {
  width: 25px;
  opacity: 0.8;
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px black;
}

#modal-button-close {
  right: 10px;
  top: 26px;
  width: 45px;
  height: 45px;
}

.modal-controls-info {
  font-size: smaller;
  color: gray;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-content {
  position: absolute;
  width: 70%;
  background-color: white;
  padding: 10px 20px 20px 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 80%;
  opacity: 0.9;
}

.modal-image {
  margin-right: 20px;
  float: left;
  width: 213px;
  border-radius: 4px;
}

.tag-info {
  display: block;
  text-align: left;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  max-height: 500px;
}

.tag-info::-webkit-scrollbar {
  display: none;
}

.tag-title {
  font-weight: bold;
}

/* Media Queries */

@media (max-width: 860px) {
  .interactive-tag {
    padding: 3px 3px;
    border-radius: 20px;
    height: 23px;
    font-size: 10px;
  }

  .interactive-tag-thumbnail {
    width: 23px;
    height: 23px;
    margin-right: 3px;
  }

  .interactive-tag-text-title {
    max-width: 180px;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .interactive-tag {
    padding: 3px 3px;
    border-radius: 10px;
    height: 20px;
    font-size: 9px;
  }

  .interactive-tag-thumbnail {
    width: 20px;
    height: 20px;
    margin-right: 2px;
  }

  .interactive-tag-text-title {
    max-width: 120px;
  }

  .tag-info {
    margin-bottom: 35px;
    max-height: 58%;
  }

  .modal-content {
    width: 85%;
    padding: 10px 20px 20px 20px;
    border-radius: none;
    box-shadow: none;
    height: 100%;
  }

  .modal-content-share-img {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  #modal-button-left {
    left: 20%;
    top: auto;
    bottom: -40px;
  }

  #modal-button-close {
    top: -8px;
  }

  #modal-button-right {
    right: 20%;
    top: auto;
    bottom: -40px;
  }

  .modal-side-button {
    width: 35px;
    height: 35px;
  }

  .modal-image {
    float: none;
  }

  .overlay {
    background-color: white !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .interactive-tag {
    padding: 3px 3px;
    border-radius: 10px;
    height: 20px;
    font-size: 9px;
  }

  .interactive-tag-thumbnail {
    width: 20px;
    height: 20px;
    margin-right: 2px;
  }

  .interactive-tag-text-title {
    max-width: 120px;
  }

  .tag-info {
    margin-bottom: 35px;
    max-height: 88%;
  }

  .modal-content {
    width: 90%;
    padding: 10px 20px 37px 20px;
    border-radius: none;
    box-shadow: none;
    height: 100%;
  }

  .modal-image {
    float: left;
  }

  .overlay {
    background-color: white !important;
  }

  .modal-button {
    bottom: auto;
    top: 50%;
  }

  #modal-button-close {
    top: 10px;
  }

  #modal-button-left {
    left: -3%;
  }

  #modal-button-right {
    right: -3%;
  }
}

.vjs-theme-fantasy {
  --vjs-theme-fantasy--primary: hsl(0, 0%, 91%);
  --vjs-theme-fantasy--secondary: transparent;
}

.vjs-theme-fantasy .vjs-big-play-button {
  width: 70px;
  height: 70px;
  background: none;
  line-height: 70px;
  font-size: 70px;
  border: none;
  top: 50%;
  left: 50%;
  margin-top: -35px;
  margin-left: -35px;
  color: var(--vjs-theme-fantasy--primary);
}

.vjs-theme-fantasy.vjs-big-play-button:focus,
.vjs-theme-fantasy:hover .vjs-big-play-button {
  background-color: transparent;
  color: #fff;
}

.vjs-theme-fantasy .vjs-control-bar {
  height: 54px;
}

.vjs-theme-fantasy .vjs-button > .vjs-icon-placeholder:before,
.vjs-theme-fantasy .vjs-time-control {
  line-height: 54px;
}

.vjs-theme-fantasy .vjs-play-control {
  font-size: 1.5em;
  position: relative;
}

.vjs-theme-fantasy .vjs-volume-panel {
  order: 4;
}

.vjs-theme-fantasy .vjs-volume-bar {
  margin-top: 2.5em;
}

.vjs-theme-city
  .vjs-volume-panel:hover
  .vjs-volume-control.vjs-volume-horizontal {
  height: 100%;
}

.vjs-theme-fantasy .vjs-progress-control .vjs-progress-holder,
.vjs-theme-fantasy .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.5em;
}

.vjs-theme-fantasy .vjs-play-control .vjs-icon-placeholder:before {
  height: 1.3em;
  width: 1.3em;
  margin-top: 0.2em;
  border-radius: 1em;
  border: 3px solid var(--vjs-theme-fantasy--secondary);
  top: 2px;
  left: 9px;
  line-height: 1.1;
}

.vjs-theme-fantasy .vjs-play-control:hover .vjs-icon-placeholder:before {
  border: 3px solid var(--vjs-theme-fantasy--secondary);
}

.vjs-theme-fantasy .vjs-play-progress,
.vjs-theme-fantasy .vjs-play-progress:before {
  background-color: var(--vjs-theme-fantasy--primary);
}

.vjs-theme-fantasy .vjs-play-progress:before {
  height: 0.8em;
  width: 0.8em;
  content: "";
  border: 4px solid var(--vjs-theme-fantasy--secondary);
  border-radius: 0.8em;
  top: -0.25em;
}

.vjs-theme-fantasy .vjs-progress-control {
  font-size: 14px;
}

.vjs-theme-fantasy .vjs-fullscreen-control {
  order: 6;
}

.vjs-theme-fantasy .vjs-remaining-time {
  display: none;
}

.vjs-theme-fantasy.nyan .vjs-play-progress {
  background: linear-gradient(
    180deg,
    #fe0000 0,
    #fe9a01 16.666666667%,
    #fe9a01 0,
    #ff0 33.332666667%,
    #ff0 0,
    #32ff00 49.999326667%,
    #32ff00 0,
    #0099fe 66.6659926%,
    #0099fe 0,
    #63f 83.33266%,
    #63f 0
  );
}

.vjs-theme-fantasy.nyan .vjs-play-progress:before {
  height: 1.3em;
  width: 1.3em;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' fill='%23fff'%3E%3Cpath d='M62.153 37.323h2.813v3.246h-2.813zM64.858 40.569h2.813v3.246h-2.813zM67.672 43.814h11.9v3.246h-11.9zM79.572 24.449h2.813v19.365h-2.813zM82.386 37.323h3.244v3.246h-3.244zM85.63 34.132h5.627v3.246H85.63zM91.257 37.323h2.92v12.95h-2.92zM94.177 50.274h2.922V66.21h-2.922zM91.29 66.372h2.887v3.245H91.29zM88.401 69.617h2.889v3.246h-2.889zM27.312 72.863h61.003v3.245H27.312zM73.622 76.108h2.889v3.246h-2.889zM82.563 76.108h2.888v3.246h-2.888zM76.511 79.354h6.053v3.245h-6.053zM61.941 79.354h8.895v3.245h-8.895zM67.947 76.108h2.889v3.246h-2.889zM59.321 76.108h2.888v3.246h-2.888zM27.312 17.917h49.387v3.246H27.312zM76.699 21.162h2.873v3.287h-2.873zM56.372 34.132h5.781v3.191h-5.781zM53.448 37.323h2.924v12.951h-2.924zM50.488 50.274h2.96v16.049h-2.96zM53.448 66.323h2.924v3.257h-2.924zM56.372 69.58h2.949v3.283h-2.949zM65.069 63.213h2.878v6.367h-2.878zM67.947 66.397h17.504v3.22H67.947z'/%3E%3Cpath d='M82.563 63.213h2.888v3.185h-2.888zM73.801 63.213h2.898v3.185h-2.898zM76.699 56.774h2.873v3.145h-2.873zM82.563 56.774h2.888v3.145h-2.888zM85.451 53.444h2.864v3.33h-2.864z'/%3E%3Cpath d='M85.451 56.774h2.864v3.145h-2.864zM65.069 53.444h2.878v3.33h-2.878zM65.069 56.774h2.878v3.145h-2.878zM62.209 56.774h2.86v3.145h-2.86zM21.509 24.327h2.813v45.169h-2.813zM24.323 21.162h2.99v3.165h-2.99zM18.562 69.496h8.75v3.367h-8.75zM15.656 72.863h2.906v9.591h-2.906zM18.562 79.301h8.75v3.153h-8.75zM24.323 76.108h5.743V79.3h-5.743zM33.136 76.108h2.824v6.346h-2.824zM35.96 79.281h5.813v3.173H35.96zM41.774 76.108h2.864v3.173h-2.864zM3.948 40.569h11.708v3.229H3.948zM3.948 43.814h2.921v6.459H3.948zM6.869 47.06h2.934v6.384H6.869zM9.803 50.274h2.909v6.5H9.803z'/%3E%3Cpath d='M12.711 53.444h2.945v6.475h-2.945zM15.656 56.774h5.853v3.145h-5.853z'/%3E%3Cpath d='M18.583 59.919h2.926v3.294h-2.926zM18.583 47.044h2.926v6.4h-2.926zM12.711 43.814h5.872v3.229h-5.872zM15.647 47.044h2.936v3.2h-2.936z'/%3E%3Cpath fill='none' d='M47.439 50.274h3.049v3.17h-3.049z'/%3E%3Cpath d='M73.801 30.94v-3.138h-2.965v-3.354l-37.7-.122v3.151h-3.07v3.462l-2.753-.108-.118 32.381h2.871v3.185h3.07v-3.185h2.824v3.185h-2.824v3.099l20.312.084v-3.257h-2.96V50.274h2.96V37.323h2.924v-3.191h5.781v3.191h2.813l-.108 3.246h2.813v3.246h9.027V30.94h-2.897zM33.136 56.682h-3.07v-3.158h3.07v3.158zm2.824-22.55h-2.824v-3.084h2.824v3.084zm2.907 12.928h2.907v3.184h-2.907V47.06zm5.771 16.153h-2.864v-3.294h2.864v3.294zm2.801-19.399h-2.801v-3.246h2.801v3.246zm6.009-12.766h-2.96v-3.354h2.96v3.354zm8.705 0h-2.832v-3.354h2.832v3.354zm8.683 6.275h-2.889v-3.191h2.889v3.191z'/%3E%3C/svg%3E")
    no-repeat;
  border: none;
  top: -0.35em;
}

.vjs-theme-fantasy .vjs-play-progress,
.vjs-theme-fantasy .vjs-play-progress:before {
  background-color: rgb(255 255 255 / 80%);
}

.video-js .vjs-control-bar {
  background-image: linear-gradient(0deg, #000, #0000);
  background-color: transparent;
}

.vjs-theme-fantasy .vjs-big-play-button {
  background-color: rgba(62, 62, 62, 0.9);
  border-radius: 38%;
}

.video-js .vjs-control:focus {
  text-shadow: none;
}

.video-js button:focus {
  outline: none;
}

@media (max-height: 600px) or (max-width: 600px) {
  .vjs-theme-fantasy .vjs-big-play-button {
    background-color: rgba(62, 62, 62, 0.9);
    border-radius: 38%;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    font-size: 30px;
    width: 50px;
    line-height: 50px;
  }
}

.vjs-current-time-display {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 100;
}

#time-display {
  /* Ensure time display is visible */
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 8px;
  border-radius: 3px;
  z-index: 1001; /* Above player/subs */
  font-family: monospace;
  fontsize: 14px;
}

#custom-subtitle-container.overlap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: unset;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: none;
  z-index: 10;
  pointer-events: none;
  border-radius: 0;
}
#custom-subtitle-container.overlap #subtitle-text-container {
  display: inline-block;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-family: 'LG Display', Arial, sans-serif;
  text-align: center;
  padding: 0.5em 1.5em;
  border-radius: 6px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  max-width: 90vw;
  min-width: 40px;
  box-sizing: border-box;
  white-space: pre-line;
  overflow-wrap: break-word;
  pointer-events: none;
}
#custom-subtitle-container.overlap #ai-disclaimer {
  position: relative;
  bottom: unset;
  right: unset;
  left: unset;
  margin-top: 4px;
  text-align: center;
  color: #aaa;
  font-size: 0.5em;
  background: none;
  pointer-events: none;
}
@media (max-width: 700px), (max-height: 400px) {
  #custom-subtitle-container.overlap #subtitle-text-container {
    margin-bottom: 20px;
    padding: 0.4em 1em;
  }
}
@media (max-width: 400px), (max-height: 300px) {
  #custom-subtitle-container.overlap #subtitle-text-container {
    margin-bottom: 12px;
    padding: 0.3em 0.7em;
  }
}
#custom-subtitle-container.overlap.shrink-font #subtitle-text-container {
  font-size: 1.5vw !important;
}
#player-and-subtitles-wrapper.overlap {
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
}