/*.....................................
  vhx bar
......................................*/
.player {
  z-index: -1;
}

#poster {
  font-family: Arial, sans-serif;
}

.player-container {
  margin: auto;
  position: relative;
  z-index: -1;
}

.player-background {
  background-color: rgb(0, 0, 0);
  position: relative;
  z-index: 0;
}

/*.....................................
  button styles for our bar
......................................*/
.vhx {
  z-index: 1;
  position: relative;
}

.vhx.vimeo-btn {
  cursor: pointer;
}

.vhx.visible {
  visibility: visible;
  opacity: 1;
  transition:
    visibility 0s 0.4s,
    opacity 0.4s linear;
}

.vhx.hidden {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.03s,
    opacity 0.03s linear;
}

.vimeo-btn {
  position: relative;
  pointer-events: all;
  text-transform: uppercase;
}

.vimeo-btn:link,
.vimeo-btn:visited {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #22b9b0;

  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;

  font-weight: 500;
  font-size: 14px;
  font-family:
    'brandon-grotesque-n1', 'brandon-grotesque', 'Helvetica', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/*.....................................
  positioning
......................................*/
.vimeo-player-button {
  margin-left: 10px;
  float: right;
}

.vimeo-player-bar {
  margin: 2% 5%;
  position: absolute;
}

.icon {
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.icon.small {
  bottom: -3px;
  margin-right: 2px;
  width: 16px;
  height: 16px;
}

.icon.medium {
  width: 13px;
  height: 13px;
  bottom: -1px;
}

.icon.facebook {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M19%201.5h-15c-1.4%200-2.5%201.1-2.5%202.5v15c0%201.4%201.1%202.5%202.5%202.5h7.6v-7.2h-2.4v-3.1h2.4v-1.6c0-2.4%201.8-4.3%204.1-4.3h2.2v3.5h-2c-.5%200-.7.3-.7.7v1.6h2.6v3.1h-2.6v7.2h3.8c1.4%200%202.5-1.1%202.5-2.5v-14.9c0-1.4-1.1-2.5-2.5-2.5z%22%20fill%3D%22%2322B8AF%22%2F%3E%3Cg%20fill%3D%22%23149996%22%3E%3Cpath%20d%3D%22M4%2021.5h7.6v-7.2h-2.4v-2.8h-7.7v7.5c0%201.4%201.1%202.5%202.5%202.5zM17.8%2011.5v2.8h-2.6v7.2h3.8c1.4%200%202.5-1.1%202.5-2.5v-7.5h-3.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.icon.twitter {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M21.5%205.3c-.7.3-1.5.5-2.4.6.8-.5%201.5-1.3%201.8-2.3-.8.5-1.7.8-2.6%201-2.8-3-7.9-.2-7%203.7-3.4-.1-6.4-1.7-8.4-4.2-1.1%201.9-.5%204.3%201.3%205.5-.7%200-1.3-.2-1.9-.5%200%201.9%201.4%203.7%203.3%204.1-.6.2-1.2.2-1.9.1.5%201.6%202%202.8%203.8%202.8-1.7%201.3-3.9%202-6.1%201.7%204%202.6%209.5%202.5%2013.4-.5%203-2.3%204.8-6.1%204.6-9.9.9-.6%201.5-1.3%202.1-2.1-.7.3-.6.8%200%200z%22%20fill%3D%22%2322B8AF%22%2F%3E%3Cg%20fill%3D%22%23375667%22%3E%3Cpath%20d%3D%22M20.9%203.7c-.8.5-1.7.8-2.6%201%20.2.2.6.8.8%201.3.9-.6%201.5-1.4%201.8-2.3-.7.4-.3.9%200%200zM19.1%205.9c.2.5.3%201%20.3%201.5v-.1c.8-.6%201.5-1.3%202-2.1-.6.4-1.4.6-2.3.7.2.5.9-.1%200%200z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.icon.tumblr {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M17.6%2020.4c-2%201-4.4%201.4-6.6.8-2.3-.6-3.4-2.3-3.4-4.5v-7h-2.2v-2.8c2.5-.8%203.7-2.9%204-5.4h2.8v5.1h4.7v3.1h-4.7v5.1c0%201-.2%202.4.9%203%201.4.8%203.2.2%204.5-.6v3.2z%22%20fill%3D%22%23375667%22%2F%3E%3C%2Fsvg%3E');
}

.icon.email {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M22.6%209c0-.2-.1-.5-.3-.6l-10.3-7.6c-.3-.2-.6-.2-.9%200l-10.4%207.6c-.2.1-.3.4-.3.6v12.6c0%20.4.3.8.8.8h20.7c.4%200%20.8-.4.8-.8v-12.6zm-11.1-6.6l9.6%207v.9l-6.6%204.7%205.2%203.3c.8.5%200%201.8-.8%201.3l-7.4-4.6-7.4%204.7c-.8.5-1.7-.8-.8-1.3l5.2-3.3-6.6-4.7v-1l9.6-7zM19.7%2018.4%22%20fill%3D%22%23375667%22%2F%3E%3Cpath%20fill%3D%22%2322B8AF%22%20d%3D%22M11.5%2013.1l1.9%201.2%206.1-4.4-8-5.9-8%205.9%206.1%204.4z%22%2F%3E%3C%2Fsvg%3E');
  margin-right: 5px;
}

.icon.link {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M19.3%208.2c-1.8%201.8-3.7%204.6-6.6%203.8l2.4-2.4c.9-.9%201.8-1.8%202.6-2.7%201.9-1.9-.8-4.8-2.6-2.9l-1.4%201.4c-.2.2-1.4%201.1-1.4%201.4l-2.4%202.4c-.4-1.3%200-2.8%201-3.8%201.3-1.3%202.7-3.3%204.5-3.8%203.9-1.1%206.7%203.8%203.9%206.6%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%2322B8AF%22%2F%3E%3Cpath%20d%3D%22M7.9%2015.6c-.9.9-2.4-.6-1.4-1.5l4.1-4.1%202.3-2.3.5-.5c1-.6%202%20.7%201.2%201.6-2.2%202.4-4.5%204.5-6.7%206.8z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23375667%22%2F%3E%3Cpath%20d%3D%22M5.8%2013.4c-.9.9-1.8%201.8-2.6%202.7-1.9%201.9.8%204.8%202.6%202.9.9-.9%202-1.8%202.8-2.9l2.4-2.4c.4%201.3%200%202.8-1%203.8-1.3%201.3-2.7%203.3-4.5%203.8-3.8%201.1-6.7-3.8-3.9-6.6%201.8-1.7%203.8-4.5%206.6-3.7l-2.4%202.4%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%2322B8AF%22%2F%3E%3C%2Fsvg%3E');
}

/*.....................................
  up next overlay
......................................*/
.ott-up-next-gradient {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 0.7) 100%
  );
  pointer-events: none;
  z-index: 99;
}

@keyframes ott-up-next-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ott-up-next {
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 300px;
  z-index: 100;
  overflow: visible;
  animation: ott-up-next-fade-in 500ms ease forwards;
  font-family: Helvetica, Arial, sans-serif;
}

@media screen and (max-width: 40em) {
  .ott-up-next {
    width: calc(100% - 40px);
    max-width: 320px;
  }
}

@media (max-width: 650px) {
  .ott-up-next {
    width: 240px;
    bottom: 60px;
    right: 15px;
  }
}

.ott-up-next-container {
  position: relative;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ott-up-next-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ott-up-next-label {
  font-size: 15px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.9);
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.ott-up-next-hide {
  font-size: 15px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.7);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.ott-up-next-hide:hover {
  color: rgb(255 255 255 / 0.95);
}

.ott-up-next-hide:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.9);
  outline-offset: 2px;
  border-radius: 2px;
}

.ott-up-next-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ott-up-next-thumb {
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #111;
  position: relative;
}

.ott-up-next-thumb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 0.7) 100%
  );
}

/* Circular progress ring */
.ott-up-next-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: transform 200ms ease;
}

.ott-up-next-play-icon::before {
  content: '';
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 0.7);
  backdrop-filter: blur(4px);
  z-index: 0;
}

.ott-up-next-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.ott-up-next-ring-bg {
  stroke: rgb(0 0 0 / 0);
  transition: stroke-dashoffset 0.35s;
}

.ott-up-next-ring-progress {
  transition: stroke-dashoffset 1s linear;
}

.ott-up-next-play-svg {
  position: relative;
  width: 32px;
  height: 32px;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}

.ott-up-next-thumb-link {
  position: relative;
  width: 100%;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 200ms ease;
  display: block;
}

.ott-up-next-thumb-link:hover {
  transform: scale(1.02);
}

.ott-up-next-thumb-link:hover .ott-up-next-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

.ott-up-next-rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px;
  background-color: rgb(255 255 255 / 0.9);
  color: #000000;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  line-height: 1;
}

.ott-up-next-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: white;
}

/*.....................................
  video rating overlay
......................................*/
.ott-player-overlay-layer {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 101;
  height: 100vh;
  max-width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.ott-video-rating-overlay {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 102;
  width: 380px;
  max-width: calc(100% - 64px);
  padding: 24px;
  border-radius: 16px;
  background: rgb(34 34 34 / 70%);
  backdrop-filter: blur(6px);
  box-sizing: border-box;
  box-shadow: 0 0 2px rgb(0 0 0 / 5%);
  color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  pointer-events: auto;
}

.ott-video-rating-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ott-video-rating-title {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.ott-video-rating-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  width: 20px;
  height: 20px;
}

.ott-video-rating-close:hover,
.ott-video-rating-close:focus {
  color: rgb(255 255 255 / 80%);
}

.ott-video-rating-close:focus-visible,
.ott-video-rating-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ott-video-rating-copy {
  margin: 16px 0 27px;
  color: #cbd5e1;
  font-size: 16px;
  line-height: normal;
}

.ott-video-rating-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ott-video-rating-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: #1f2937;
  box-shadow: 0 0 2px rgb(0 0 0 / 5%);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
  transform-origin: center;
}

.ott-video-rating-button:hover {
  background: #ffffff;
  color: #000000;
  transform: scale(1.02);
}

.ott-video-rating-close-icon,
.ott-video-rating-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ott-video-rating-close-icon {
  width: 20px;
  height: 20px;
}

.ott-video-rating-icon-down {
  transform: rotate(180deg);
}

@media screen and (max-width: 650px) {
  .ott-video-rating-overlay {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 24px);
    padding: 16px;
    overflow-y: auto;
  }

  .ott-video-rating-header {
    gap: 12px;
  }

  .ott-video-rating-title {
    font-size: 20px;
    line-height: 21px;
  }

  .ott-video-rating-copy {
    margin: 12px 0 14px;
    font-size: 14px;
    line-height: 17px;
  }

  .ott-video-rating-actions {
    gap: 10px;
  }

  .ott-video-rating-button {
    min-height: 36px;
    padding: 7px 12px;
  }
}