/**
 * Ákora Video Card - Frontend Styles
 * Estilos idênticos ao site atual: https://akora.com.br/
 */

.akora-video-card-wrapper {
	position: relative;
	width: 100%;
	overflow: visible;
	border-radius: 8px;
	background: #f5f5f5;
	display: block;
	z-index: 1;
}

.akora-video-card-media {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

/* Botão de Play */
.akora-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 100;
	padding: 0;
	color: #00a86b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.akora-play-button:hover {
	background: rgba(255, 255, 255, 1);
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.akora-play-button:active {
	transform: translate(-50%, -50%) scale(0.95);
}

.akora-play-button svg {
	width: 24px;
	height: 24px;
	fill: #00a86b;
}

/* Botão de Pause - OCULTO POR PADRÃO */
.akora-pause-button {
	position: fixed;
	bottom: auto;
	right: auto;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.95) !important;
	border: none;
	border-radius: 4px;
	display: none !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 999999 !important;
	padding: 0;
	color: #00a86b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.akora-pause-button:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.akora-pause-button:active {
	transform: scale(0.95);
}

/* Garante que o pause button fica visível quando display é flex */
.akora-pause-button[style*="display: flex"] {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: absolute !important;
	bottom: 12px !important;
	right: 12px !important;
}

.akora-pause-button svg {
	width: 20px;
	height: 20px;
	fill: #00a86b;
}

/* Vídeo */
.akora-video-card-wrapper video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	position: relative;
	z-index: 2;
}

/* Imagem */
.akora-video-card-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Efeito ao passar o mouse na imagem */
.akora-video-card-wrapper:hover img {
	transform: scale(1.02);
}

.akora-video-card-wrapper img {
	transition: transform 0.3s ease;
}

/* Animação de fade in */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.akora-video-card-media.fade-in {
	animation: fadeIn 0.3s ease;
}

/* Responsividade */
@media (max-width: 768px) {
	.akora-play-button {
		width: 50px;
		height: 50px;
	}

	.akora-play-button svg {
		width: 20px;
		height: 20px;
	}

	.akora-pause-button {
		width: 36px;
		height: 36px;
	}

	.akora-pause-button[style*="display: flex"] {
		bottom: 8px !important;
		right: 8px !important;
	}

	.akora-pause-button svg {
		width: 18px;
		height: 18px;
	}
}

@media (max-width: 480px) {
	.akora-play-button {
		width: 45px;
		height: 45px;
	}

	.akora-play-button svg {
		width: 18px;
		height: 18px;
	}

	.akora-pause-button {
		width: 32px;
		height: 32px;
	}

	.akora-pause-button[style*="display: flex"] {
		bottom: 6px !important;
		right: 6px !important;
	}

	.akora-pause-button svg {
		width: 16px;
		height: 16px;
	}
}

/* Acessibilidade */
.akora-play-button:focus,
.akora-pause-button:focus {
	outline: 2px solid #00a86b;
	outline-offset: 2px;
}

/* Suporte a teclado */
.akora-play-button:focus-visible,
.akora-pause-button:focus-visible {
	outline: 2px solid #00a86b;
	outline-offset: 2px;
}