/**
 * Estilos para a parte pública do VideoCommerce
 */

/* Vídeo flutuante estilo círculo */
.videocommerce-floating {
  position: fixed;
  z-index: 9999;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
  -webkit-tap-highlight-color: transparent; /* Evita destaque em dispositivos touch */
  touch-action: none; /* Melhora o comportamento touch */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.videocommerce-position-left {
  left: 20px;
  right: auto;
}

.videocommerce-position-right {
  right: 20px;
  left: auto;
}

.videocommerce-position-center {
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}

.videocommerce-position-top {
  top: 20px;
  bottom: auto;
}

.videocommerce-position-bottom {
  bottom: 20px;
  top: auto;
}

.videocommerce-position-middle {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
}

/* Efeito combinado para centralizar completamente */
.videocommerce-position-center.videocommerce-position-middle {
  transform: translate(-50%, -50%);
}

.videocommerce-floating:hover {
  transform: scale(1.05);
}

/* Garantir que o efeito hover não interfira no posicionamento centralizado */
.videocommerce-position-center:hover {
  transform: translateX(-50%) scale(1.05);
}

.videocommerce-position-middle:hover {
  transform: translateY(-50%) scale(1.05);
}

.videocommerce-position-center.videocommerce-position-middle:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.videocommerce-circle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #000;
  cursor: pointer;
  position: relative;
}

.videocommerce-circle video,
.videocommerce-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: auto; /* Garantir que seja clicável */
}

/* Estrutura interna do círculo similar ao Widde */
.videocommerce-inner-shape {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}

.videocommerce-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}

/* Estilo para o vídeo propriamente dito */
.videocommerce-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Modal para reprodução de vídeo em tamanho completo */
.videocommerce-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.videocommerce-modal-content {
  position: relative;
  background-color: transparent;
  margin: 0 auto;
  max-height: 90vh; /* Altura máxima para não ultrapassar a tela */
}

/* Suporte a vídeos em formato 9:16 (vertical) */
.videocommerce-modal-video-container {
  width: 100%;
  position: relative;
  /* Não definimos um padding-bottom fixo para ser flexível com diferentes proporções */
}

.videocommerce-modal-video-container.vertical-video {
  width: auto; /* Largura automática para vídeos verticais */
  height: 80vh; /* Altura máxima para vídeos verticais */
  max-width: 75%; /* Largura máxima em relação à largura da tela */
  margin: 0 auto; /* Centralizar horizontalmente */
}

.videocommerce-modal-video-container iframe,
.videocommerce-modal-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Mudado de 'cover' para 'contain' */
}

/* Para vídeos verticais no formato 9:16 */
.videocommerce-modal-video-container.vertical-video iframe,
.videocommerce-modal-video-container.vertical-video video {
  position: relative; /* Mudamos para relative em vídeos verticais */
  height: 100%;
  width: auto; /* Largura automática para manter proporção */
  margin: 0 auto; /* Centralizar na horizontal */
  max-width: 100%; /* Evitar que o vídeo seja maior que o contêiner */
}

.videocommerce-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
}

.videocommerce-close:hover {
  color: #ccc;
}

/* Classe para quando o drag está habilitado */
.videocommerce-floating.videocommerce-draggable {
  touch-action: none; /* Importante para funcionar bem em dispositivos touch */
  cursor: grab;
}

/* Estado de arrastar ativo */
.videocommerce-floating.ui-draggable-dragging {
  cursor: grabbing;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

/* Classe para quando o drag está desabilitado */
.videocommerce-floating:not(.videocommerce-draggable) {
  cursor: pointer;
}

/* Responsividade */
@media (max-width: 767px) {
  .videocommerce-floating {
    width: 80px !important;
    height: 80px !important;
  }

  .videocommerce-modal-content {
    width: 95% !important;
  }

  .videocommerce-modal-video-container.vertical-video {
    width: 80%; /* Mais estreito em dispositivos móveis */
    height: 70vh; /* Um pouco menor em dispositivos móveis */
  }
}

/* Estilo da miniatura de vídeo (poster) - agora transparente */
.videocommerce-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 5;
  pointer-events: auto;
}

/* Botão de play invisível (mantém a área clicável mas sem mostrar o ícone) */
.videocommerce-play-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  cursor: pointer;
  background-color: transparent;
  border: none;
  pointer-events: auto;
}

/* Garantir que o vídeo no modal funcione corretamente */
.videocommerce-modal-video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Melhorias para iOS */
@supports (-webkit-touch-callout: none) {
  /* Estilos específicos para dispositivos iOS */
  .videocommerce-circle video,
  .videocommerce-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1 !important; /* Força a visibilidade mesmo quando não está em reprodução */
    pointer-events: auto;
    background-color: #000; /* Garantir fundo preto caso o vídeo não carregue */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    will-change: transform;
  }

  /* Em iOS, mostrar um overlay transparente sem ícone de play */
  .videocommerce-video-poster {
    position: absolute;
    z-index: 2;
    background-color: transparent;
    pointer-events: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Círculo de vídeo - regras específicas para vídeos */
.videocommerce-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.5s ease;
  pointer-events: auto;
}

/* Animação sutil de pulso para o círculo, para chamar atenção */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.videocommerce-floating {
  animation: pulse 2s infinite;
  animation-delay: 1s;
}

.videocommerce-floating:hover {
  animation: none;
}

/* Desativar a animação de pulso quando estiver arrastando */
.videocommerce-floating.ui-draggable-dragging {
  animation: none;
}

/* Melhorias para dispositivos móveis */
.videocommerce-draggable {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Estilo para quando o elemento está sendo arrastado */
.videocommerce-floating.ui-draggable-dragging,
.videocommerce-floating.videocommerce-dragging {
  opacity: 0.8;
  transform: scale(1.05);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10000;
}

/* Adicionar um pequeno atraso na transição para melhorar a experiência */
.videocommerce-floating {
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

/* Melhor visual para o hover no mobile */
@media (hover: hover) {
  .videocommerce-floating:hover {
    transform: scale(1.05);
  }
}

/* Feedback visual para press-and-hold */
.videocommerce-floating:active {
  transform: scale(0.98);
}

/* Ajuste para dispositivos móveis */
@media (max-width: 767px) {
  /* Mais espaço para o botão de fechar no mobile */
  .videocommerce-close {
    padding: 15px;
    top: -50px;
  }
}

/* Ajustes para garantir clicabilidade */
.videocommerce-circle,
.videocommerce-inner-shape,
.videocommerce-inner,
.videocommerce-video,
.videocommerce-video-poster,
.videocommerce-play-icon {
  cursor: pointer;
  pointer-events: auto;
}