/* Controles acessíveis do vídeo demonstrativo da landing. */
.topvenda-video-controls {
  grid-template-columns: 44px auto minmax(0, 1fr) minmax(126px, 156px) 44px;
}

.tv-volume-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(68px, 1fr);
  align-items: center;
  gap: 8px;
}

.tv-volume {
  width: 100%;
  height: 7px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    var(--tv-primary) 0%,
    var(--tv-primary) var(--volume, 100%),
    #e8ddff var(--volume, 100%),
    #e8ddff 100%
  );
}

.tv-volume::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid var(--tv-primary);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .24);
}

.tv-volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--tv-primary);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .24);
}

.tv-icon-fullscreen-exit {
  display: none;
}

.topvenda-video-player.is-fullscreen .tv-icon-fullscreen {
  display: none;
}

.topvenda-video-player.is-fullscreen .tv-icon-fullscreen-exit {
  display: block;
}

/* Durante a reprodução, o painel deixa a área útil do vídeo até uma interação. */
.topvenda-video-player.is-started .topvenda-video-controls {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(calc(100% + 24px)) !important;
}

.topvenda-video-player.is-controls-visible .topvenda-video-controls,
.topvenda-video-player.is-paused .topvenda-video-controls {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}


.topvenda-video-player:fullscreen,
.topvenda-video-player:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: #10082f;
}

.topvenda-video-player:fullscreen .topvenda-self-video,
.topvenda-video-player:-webkit-full-screen .topvenda-self-video {
  border-radius: 0 !important;
  background: #10082f;
}

@media (max-width: 720px) {
  .topvenda-video-controls {
    left: 8px;
    right: 8px;
    bottom: 8px;
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px;
    gap: 8px;
    padding: 8px;
  }

  .tv-volume-wrap {
    display: contents;
  }

  .tv-volume {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 10px);
    width: 132px;
    height: 7px;
    box-sizing: content-box;
    padding: 12px;
    border: 1px solid rgba(124, 58, 237, .18);
    background-clip: content-box;
    background-color: rgba(255, 255, 255, .96);
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(16, 8, 47, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .topvenda-video-player.is-volume-open .tv-volume {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}