/* ==================================================
   ZVUKATO — AUDIO PLAYER / DESKTOP
================================================== */

#zv-player.zv-player {
    position: fixed !important;
    left: 390px !important;
    right: 110px !important;
    bottom: 0px !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 48px
		minmax(150px, 210px)
		auto
		minmax(260px, 1fr)
		165px
		36px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 90px !important;
    margin: 0 !important;
    padding: 16px 22px !important;
    overflow: visible !important;
    border: 1px solid rgba(37,216,208,.22);
    border-bottom: none;
    border-radius: 18px 18px 0 0 !important;
    background: radial-gradient(
			circle at 50% 0%,
			rgba(37, 216, 208, 0.09),
			transparent 48%
		),
		linear-gradient(
			180deg,
			rgba(12, 27, 42, 0.985) 0%,
			rgba(6, 16, 28, 0.99) 100%
		) !important;
    box-shadow: 0 -2px 0 rgba(37,216,208,.35),
0 -8px 18px rgba(37,216,208,.12);
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#zv-player.zv-player::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: -1px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(
			90deg,
			transparent,
			rgba(37, 216, 208, 0.35) 20%,
			rgba(37, 216, 208, 0.92) 50%,
			rgba(37, 216, 208, 0.35) 80%,
			transparent
		);
    box-shadow: 0 0 15px rgba(37, 216, 208, 0.45);
    pointer-events: none;
}

#zv-player .zv-player__cover {
    display: block !important;
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

#zv-player .zv-player__cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#zv-player .zv-player__track {
    min-width: 0 !important;
	 display:flex;
    flex-direction:column;
    justify-content:center;

    padding:0 18px;
    min-width:240px;
}

#zv-player .zv-player__title {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--zv-player-text) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: color 0.18s ease !important;
}

#zv-player .zv-player__title:hover {
    color: var(--zv-player-accent-hover) !important;
}

#zv-player .zv-player__artist {
    margin-top: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--zv-player-muted) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
}

#zv-player .zv-player__controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

#zv-player .zv-player__control {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #a3b1c0 !important;
    font-size: 11px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease !important;
}

#zv-player .zv-player__control span {
    color: inherit !important;
    font-size: inherit !important;
}

#zv-player .zv-player__control:hover {
    border-color: rgba(37, 216, 208, 0.38) !important;
    background: rgba(37, 216, 208, 0.11) !important;
    color: var(--zv-player-accent-hover) !important;
    transform: translateY(-1px) !important;
}

#zv-player .zv-player__play {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--zv-player-accent) !important;
    color: var(--zv-player-dark) !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 4px rgba(37, 216, 208, 0.09),
		0 5px 18px rgba(37, 216, 208, 0.24) !important;
    transition: background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease !important;
}

#zv-player .zv-player__play:hover {
    background: var(--zv-player-accent-hover) !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 0 0 5px rgba(37, 216, 208, 0.11),
		0 0 19px rgba(37, 216, 208, 0.24),
		0 7px 22px rgba(37, 216, 208, 0.26) !important;
}

#zv-player .zv-player__play:active {
    transform: scale(0.94) !important;
}

#zv-player .zv-player__play > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: var(--zv-player-dark) !important;
    line-height: 1 !important;
}

#zv-player .zv-player__play .fa-play,
#zv-player .zv-player__play .fas.fa-play {
    font-size: 13px !important;
    transform: translateX(1.3px) !important;
}

#zv-player .zv-player__play .fa-pause,
#zv-player .zv-player__play .fas.fa-pause {
    font-size: 13px !important;
    transform: none !important;
}

#zv-player .zv-player__timeline {
    display: grid !important;
    grid-template-columns: 38px
		minmax(120px, 1fr)
		38px !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#zv-player .zv-player__time {
    color: #8295a8 !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#zv-player .zv-range {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    touch-action: none !important;
    user-select: none !important;
    outline: none !important;
}

#zv-player .zv-range__track {
    position: relative !important;
    width: 100% !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 999px !important;
    background: rgba(152, 173, 193, 0.3) !important;
    background-image: none !important;
    box-shadow: none !important;
}

#zv-player .zv-range__buffer {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0;
    height: 100% !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, 0.1) !important;
    pointer-events: none !important;
}

#zv-player .zv-range__fill {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0;
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--zv-player-accent) !important;
    pointer-events: none !important;
}

#zv-player .zv-range__thumb {
    display: block !important;
    position: absolute !important;
    left: 0;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--zv-player-accent) !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 0 3px rgba(37, 216, 208, 0.13),
		0 0 9px rgba(37, 216, 208, 0.24) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

#zv-player .zv-range:hover .zv-range__track {
    height: 4px !important;
}

#zv-player .zv-range:hover .zv-range__thumb {
    transform: translate(-50%, -50%) scale(1.12) !important;
}

#zv-player .zv-player__volume {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#zv-player .zv-player__volume-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #9caec0 !important;
    font-size: 12px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease,
		color 0.18s ease !important;
}

#zv-player .zv-player__volume-btn span {
    color: inherit !important;
    font-size: inherit !important;
}

#zv-player .zv-player__volume-btn:hover {
    background: rgba(37, 216, 208, 0.09) !important;
    color: var(--zv-player-accent-hover) !important;
}

#zv-player .zv-range--volume {

    display: flex !important;
    align-items: center !important;

    width: 110px !important;
    height: 22px !important;

    flex: 0 0 110px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    background: transparent !important;
}

#zv-player .zv-player__download,
#zv-player .zv-player__close {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #9fb0c1 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease !important;
}

#zv-player .zv-player__download:hover,
#zv-player .zv-player__close:hover {
    border-color: var(--zv-player-accent) !important;
    background: var(--zv-player-accent) !important;
    color: var(--zv-player-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 0 0 3px rgba(37, 216, 208, 0.08),
		0 0 13px rgba(37, 216, 208, 0.18) !important;
}

body.has-zv-player {
    padding-bottom: 0 !important;
}

body.has-zv-player .main::after {
    content: "";
    display: block;
    width: 100%;
    height: 112px;
    flex: 0 0 112px;
    background: transparent;
    pointer-events: none;
}
.zv-player__download{
    margin-left:24px;
    margin-right:16px;
}
#zv-player .zv-range--volume .zv-range__track{
    width:100% !important;
    flex:1 1 auto !important;
    display:block !important;
}
/* ==================================================
   DESKTOP PLAYER — VOLUME RANGE
================================================== */

@media screen and (min-width: 901px) {

	#zv-player .zv-player__volume {
		display: flex !important;
		align-items: center !important;

		width: 144px !important;
		min-width: 144px !important;
		flex: 0 0 144px !important;

		gap: 8px !important;
	}

	#zv-player .zv-range--volume {
		display: flex !important;
		align-items: center !important;

		width: 110px !important;
		height: 22px !important;
		min-width: 110px !important;
		flex: 0 0 110px !important;

		overflow: visible !important;

		opacity: 1 !important;
		visibility: visible !important;
	}

	#zv-player .zv-range--volume .zv-range__track {
		position: relative !important;

		display: block !important;

		width: 100% !important;
		height: 3px !important;
		flex: 1 1 auto !important;

		overflow: visible !important;

		border-radius: 999px !important;
		background: rgba(152, 173, 193, 0.30) !important;
	}

	#zv-player .zv-range--volume .zv-range__fill {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 80%;
		height: 100% !important;

		border-radius: inherit !important;
		background: #25d8d0 !important;
	}

	#zv-player .zv-range--volume .zv-range__thumb {
		position: absolute !important;
		top: 50% !important;
		left: 80%;

		display: block !important;

		width: 10px !important;
		height: 10px !important;

		border-radius: 50% !important;
		background: #25d8d0 !important;

		transform: translate(-50%, -50%) !important;

		box-shadow:
			0 0 0 3px rgba(37, 216, 208, 0.13),
			0 0 9px rgba(37, 216, 208, 0.24) !important;
	}
}
/* ==================================================
   FIXED PLAYER — FINAL PAGE SPACING
================================================== */

:root {
	--zv-player-height-desktop: 90px;
	--zv-player-height-mobile: 92px;
	--zv-player-gap: 12px;
}


/* Плеєр завжди притиснутий до нижнього краю */

html body #zv-player.zv-player {
	bottom: 0 !important;
}


/* ==================================================
   DESKTOP
================================================== */

@media screen and (min-width: 901px) {

	/*
	 * Важливо: не даємо main__inner штучно
	 * розтягуватися нижче футера.
	 */
	body.has-zv-player .main__inner {
		flex: 0 0 auto !important;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;

		padding-bottom: 0 !important;
	}

	body.has-zv-player .main {
		min-height: 0 !important;
		padding-bottom: 0 !important;
	}

	body.has-zv-player .site-layout {
		min-height: 0 !important;
	}

	/*
	 * Єдиний резерв під fixed-плеєр.
	 */

	body.has-zv-player .site-footer {
		margin-bottom: 0 !important;
	}

	body.has-zv-player .main__inner::after {
		content: none !important;
		display: none !important;
	}
}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 900px) {

	body.has-zv-player .main__inner {
		flex: 0 0 auto !important;

		height: auto !important;
		min-height: 0 !important;

		padding-bottom: 0 !important;
	}

	body.has-zv-player .main {
		min-height: 0 !important;
		padding-bottom: 0 !important;
	}

	body.has-zv-player .site-layout {
		min-height: 0 !important;
	}

	body.has-zv-player .site-footer {
		margin-bottom: 0 !important;
	}

	body.has-zv-player .main__inner::after {
		content: none !important;
		display: none !important;
	}
}