/* Waveform Tracknow — modo imagem [image_waveform_tracknow]
   Arquivo separado do CSS do player padrão: nenhuma classe aqui colide
   com .wft-player, .wft-toggle etc do shortcode [waveform_tracknow]. */

.wft-img-card {
	width: 100%;
	max-width: 100%;
}

.wft-img-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1; /* Imagem de produto sempre quadrada (1080x1080 etc). */
	overflow: hidden;
	border-radius: 12px;
	background: #1a1a1a;
}

.wft-img-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradiente escuro atrás da waveform, para ela ficar legível em qualquer imagem */
.wft-img-has-overlay .wft-img-frame::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* Botão de play/pause centralizado na imagem */
.wft-img-toggle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--wft-img-btn-size, 56px);
	height: var(--wft-img-btn-size, 56px);
	border: none;
	border-radius: 50%;
	background: var(--wft-img-btn-bg, #ee772f);
	color: var(--wft-img-icon-color, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: transform 0.15s ease, background-color 0.15s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.wft-img-toggle:hover,
.wft-img-toggle:focus-visible {
	background: var(--wft-img-btn-bg-hover, #d9661f);
	transform: translate(-50%, -50%) scale(1.06);
}

.wft-img-toggle svg {
	width: var(--wft-img-icon-size, 22px);
	height: var(--wft-img-icon-size, 22px);
	fill: var(--wft-img-icon-color, #fff);
}

.wft-img-toggle.is-playing .wft-img-icon-play {
	display: none;
}

.wft-img-toggle.is-playing .wft-img-icon-pause {
	display: block;
}

/* Faixa da waveform, ancorada na base da imagem */
.wft-img-waveform-wrap {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	height: var(--wft-img-wave-height, 30px);
	z-index: 2;
}

.wft-img-waveform {
	width: 100%;
	height: 100%;
	cursor: pointer;
	line-height: 0;
	font-size: 0;
}

.wft-img-time {
	position: absolute;
	bottom: 100%;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1;
	background: rgba(0, 0, 0, 0.6);
	padding: 3px 5px;
	border-radius: 3px;
	color: #eee;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

.wft-img-current-time {
	left: 0;
}

.wft-img-duration {
	right: 0;
}