/**
 * WPLife Minicart Drum Counter — стили.
 * файл wplifemcdc.css
 *
 * Значения по умолчанию заданы через CSS-переменные.
 * Настройки из админки перезаписывают их в :root через inline-стиль.
 */

:root {
	--wplifemcdc-bg: #D80816;
	--wplifemcdc-text: #FFFFFF;
	--wplifemcdc-width: 21px;
	--wplifemcdc-height: 21px;
	--wplifemcdc-font-size: 12px;
	--wplifemcdc-font-weight: 600;
	--wplifemcdc-radius: 50%;
	--wplifemcdc-right: -5px;
	--wplifemcdc-top: -8px;
	--wplifemcdc-duration: 3s;
	--wplifemcdc-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Окно счётчика — красный круг. */
.minicart .counter {
	display: inline-block;
	position: absolute;
	overflow: hidden;
	background: var(--wplifemcdc-bg);
	color: var(--wplifemcdc-text);
	width: var(--wplifemcdc-width);
	height: var(--wplifemcdc-height);
	border-radius: var(--wplifemcdc-radius);
	font-size: var(--wplifemcdc-font-size);
	font-weight: var(--wplifemcdc-font-weight);
	line-height: 1;
	right: var(--wplifemcdc-right);
	top: var(--wplifemcdc-top);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Трек барабана — обёртка, которую двигаем. */
.minicart .counter > .counter-track {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	transform: translateY(0);
	transition: transform var(--wplifemcdc-duration) var(--wplifemcdc-easing);
	will-change: transform;
}

/* Грань барабана — цифра всегда снизу, с отступом 0.5em. */
.minicart .counter > .counter-track > span {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
	padding-bottom: 0.5em;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	color: inherit;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
}