/*!
 * Mohid Quran Audio Player — front-end styles
 * Every rule is namespaced to #mqa-player and the structural properties carry
 * !important, because themes routinely restyle bare <button> elements.
 * Plugin created by Mohid — https://mohid.net/
 */

/* ==================================================================== */
/* Hard reset inside the widget                                         */
/* ==================================================================== */
#mqa-player,
#mqa-player *,
#mqa-player *::before,
#mqa-player *::after {
	box-sizing: border-box !important;
	font-family: inherit;
}

#mqa-player {
	position: fixed !important;
	z-index: 99990 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	-webkit-font-smoothing: antialiased;
}

#mqa-player button {
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	height: auto;
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: none;
}

#mqa-player button:hover,
#mqa-player button:focus,
#mqa-player button:active {
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transform: none;
}

#mqa-player svg {
	display: block !important;
	max-width: none !important;
	fill: currentColor !important;
	vertical-align: middle;
}

#mqa-player span,
#mqa-player div,
#mqa-player i,
#mqa-player ol,
#mqa-player li,
#mqa-player a {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none;
	list-style: none !important;
	text-shadow: none !important;
}

#mqa-player audio { display: none !important; }

/* ==================================================================== */
/* Corner placement                                                     */
/* ==================================================================== */
#mqa-player.mqa-pos-bottom-left  { left: var(--mqa-x) !important; bottom: var(--mqa-y) !important; right: auto !important; top: auto !important; }
#mqa-player.mqa-pos-bottom-right { right: var(--mqa-x) !important; bottom: var(--mqa-y) !important; left: auto !important; top: auto !important; }
#mqa-player.mqa-pos-top-left     { left: var(--mqa-x) !important; top: var(--mqa-y) !important; right: auto !important; bottom: auto !important; }
#mqa-player.mqa-pos-top-right    { right: var(--mqa-x) !important; top: var(--mqa-y) !important; left: auto !important; bottom: auto !important; }

#mqa-player .mqa-shell { position: relative !important; display: flex !important; align-items: center !important; }
#mqa-player.mqa-pos-bottom-right .mqa-shell,
#mqa-player.mqa-pos-top-right .mqa-shell { flex-direction: row-reverse !important; }

/* ==================================================================== */
/* Round floating button                                                */
/* ==================================================================== */
#mqa-player .mqa-bubble {
	position: relative !important;
	z-index: 3 !important;
	display: block !important;
	width: var(--mqa-size) !important;
	height: var(--mqa-size) !important;
	flex: 0 0 var(--mqa-size) !important;
	border-radius: 50% !important;
	transition: transform .28s cubic-bezier(.2, .8, .3, 1) !important;
}
#mqa-player .mqa-bubble:hover  { transform: scale(1.06) !important; }
#mqa-player .mqa-bubble:active { transform: scale(.97) !important; }
#mqa-player .mqa-bubble:focus-visible { outline: 3px solid var(--mqa-accent) !important; outline-offset: 4px !important; }

#mqa-player .mqa-bubble__inner {
	position: relative !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	background: linear-gradient(140deg, var(--mqa-bubble-a) 0%, var(--mqa-bubble-b) 100%) !important;
	box-shadow:
		0 14px 30px -12px rgba(0, 0, 0, .5),
		0 0 0 1px rgba(255, 255, 255, .12) inset,
		0 2px 0 rgba(255, 255, 255, .18) inset !important;
	overflow: hidden !important;
}
#mqa-player .mqa-bubble__inner::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .3), transparent 58%);
	pointer-events: none;
}

/* Play / pause icon --------------------------------------------------- */
#mqa-player .mqa-bubble .mqa-ico {
	grid-area: 1 / 1;
	width: 42% !important;
	height: 42% !important;
	fill: var(--mqa-icon) !important;
	transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
#mqa-player .mqa-bubble .mqa-ico--play  { margin-left: 8% !important; }
#mqa-player .mqa-bubble .mqa-ico--pause { opacity: 0; transform: scale(.6); }

#mqa-player.is-playing .mqa-bubble .mqa-ico--play  { opacity: 0; transform: scale(.6); }
#mqa-player.is-playing .mqa-bubble .mqa-ico--pause { opacity: 0; transform: scale(1); }
#mqa-player.is-playing .mqa-bubble:hover .mqa-ico--pause,
#mqa-player.is-playing.is-open .mqa-bubble .mqa-ico--pause { opacity: 1; }

/* Waves ---------------------------------------------------------------- */
#mqa-player .mqa-waves {
	grid-area: 1 / 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	height: 44% !important;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
#mqa-player .mqa-waves i {
	display: block !important;
	width: 3px !important;
	border-radius: 3px !important;
	background: var(--mqa-wave) !important;
	transform-origin: center;
	animation: mqa-wave 1s ease-in-out infinite;
}
#mqa-player .mqa-waves i:nth-child(1) { animation-delay: 0s;   height: 45% !important; }
#mqa-player .mqa-waves i:nth-child(2) { animation-delay: .18s; height: 80% !important; }
#mqa-player .mqa-waves i:nth-child(3) { animation-delay: .36s; height: 100% !important; }
#mqa-player .mqa-waves i:nth-child(4) { animation-delay: .18s; height: 75% !important; }
#mqa-player .mqa-waves i:nth-child(5) { animation-delay: .05s; height: 40% !important; }

#mqa-player.is-playing .mqa-waves { opacity: 1; }
#mqa-player.is-playing .mqa-bubble:hover .mqa-waves,
#mqa-player.is-playing.is-open .mqa-waves { opacity: 0; }

@keyframes mqa-wave {
	0%, 100% { transform: scaleY(.35); }
	50%      { transform: scaleY(1); }
}

/* Pulsing rings -------------------------------------------------------- */
#mqa-player .mqa-ring {
	position: absolute !important;
	inset: 0;
	z-index: 1;
	border-radius: 50% !important;
	border: 2px solid var(--mqa-ring) !important;
	opacity: 0;
	pointer-events: none;
}
#mqa-player.is-playing .mqa-ring--1 { animation: mqa-ripple 2.4s ease-out infinite; }
#mqa-player.is-playing .mqa-ring--2 { animation: mqa-ripple 2.4s ease-out infinite 1.2s; }

@keyframes mqa-ripple {
	0%   { transform: scale(1);    opacity: .55; }
	70%  { transform: scale(1.75); opacity: 0; }
	100% { transform: scale(1.75); opacity: 0; }
}

#mqa-player:not(.is-playing):not(.is-open) .mqa-bubble__inner {
	animation: mqa-breathe 3.6s ease-in-out infinite;
}
@keyframes mqa-breathe {
	0%, 100% { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5), 0 0 0 0 rgba(var(--mqa-ring-rgb), .38), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
	60%      { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5), 0 0 0 12px rgba(var(--mqa-ring-rgb), 0), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
}

/* ==================================================================== */
/* Sliding control bar                                                  */
/* ==================================================================== */
#mqa-player .mqa-bar {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	right: auto !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 520px !important;
	max-width: calc(100vw - var(--mqa-x) - 16px) !important;
	height: calc(var(--mqa-size) - 6px) !important;
	padding: 0 12px 0 calc(var(--mqa-size) + 12px) !important;
	border-radius: var(--mqa-radius) !important;
	background: rgba(var(--mqa-panel-rgb), var(--mqa-opacity)) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .12) !important;
	box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .65) !important;
	color: var(--mqa-text) !important;
	font-size: 13px !important;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) translateX(-14px) scaleX(.9);
	transform-origin: left center;
	transition: opacity .26s ease, transform .34s cubic-bezier(.2, .85, .3, 1), visibility 0s linear .34s;
}

#mqa-player.mqa-pos-bottom-right .mqa-bar,
#mqa-player.mqa-pos-top-right .mqa-bar {
	left: auto !important;
	right: 0 !important;
	padding: 0 calc(var(--mqa-size) + 12px) 0 12px !important;
	transform: translateY(-50%) translateX(14px) scaleX(.9);
	transform-origin: right center;
}

#mqa-player.is-open .mqa-bar {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0) scaleX(1);
	transition: opacity .26s ease, transform .34s cubic-bezier(.2, .85, .3, 1), visibility 0s;
}

/* Control buttons ------------------------------------------------------ */
#mqa-player .mqa-btn {
	display: grid !important;
	place-items: center !important;
	width: 28px !important;
	height: 28px !important;
	flex: 0 0 28px !important;
	border-radius: 50% !important;
	color: var(--mqa-text) !important;
	transition: background .18s ease, transform .18s ease !important;
}
#mqa-player .mqa-btn svg { width: 16px !important; height: 16px !important; fill: currentColor !important; }
#mqa-player .mqa-btn:hover  { background: rgba(var(--mqa-text-rgb), .16) !important; }
#mqa-player .mqa-btn:active { transform: scale(.9) !important; }
#mqa-player .mqa-btn:focus-visible { outline: 2px solid var(--mqa-accent) !important; outline-offset: 2px !important; }

#mqa-player .mqa-btn--main {
	width: 34px !important;
	height: 34px !important;
	flex: 0 0 34px !important;
	background: var(--mqa-accent) !important;
	color: var(--mqa-panel) !important;
}
#mqa-player .mqa-btn--main:hover { background: var(--mqa-accent) !important; filter: brightness(1.12); }
#mqa-player .mqa-btn--main svg { width: 15px !important; height: 15px !important; }
#mqa-player .mqa-btn--main .mqa-ico--play  { margin-left: 2px !important; }
#mqa-player .mqa-btn--main .mqa-ico--pause { display: none !important; }
#mqa-player.is-playing .mqa-btn--main .mqa-ico--play  { display: none !important; }
#mqa-player.is-playing .mqa-btn--main .mqa-ico--pause { display: block !important; }

#mqa-player .mqa-bar__controls {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	flex: 0 0 auto !important;
}

/* Body: title, progress, times ----------------------------------------- */
#mqa-player .mqa-bar__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
}

#mqa-player .mqa-meta { display: flex !important; align-items: baseline !important; gap: 7px !important; min-width: 0 !important; }
#mqa-player .mqa-title {
	display: block !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--mqa-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	min-width: 0 !important;
}
#mqa-player .mqa-reciter {
	display: block !important;
	font-size: 10.5px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	opacity: .68;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
}

#mqa-player .mqa-progress {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 5px !important;
	flex: 0 0 5px !important;
	border-radius: 999px !important;
	background: rgba(var(--mqa-text-rgb), .22) !important;
	cursor: pointer !important;
}
#mqa-player .mqa-progress__buffer,
#mqa-player .mqa-progress__fill {
	position: absolute !important;
	left: 0 !important; top: 0 !important; bottom: 0 !important;
	border-radius: 999px !important;
	width: 0;
}
#mqa-player .mqa-progress__buffer { background: rgba(var(--mqa-text-rgb), .18) !important; }
#mqa-player .mqa-progress__fill   { background: var(--mqa-accent) !important; }
#mqa-player .mqa-progress__knob {
	position: absolute !important;
	top: 50% !important; left: 0;
	width: 11px !important; height: 11px !important;
	border-radius: 50% !important;
	background: var(--mqa-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--mqa-accent-rgb), .28) !important;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .18s ease;
	pointer-events: none;
}
#mqa-player .mqa-progress:hover .mqa-progress__knob,
#mqa-player .mqa-progress:focus-visible .mqa-progress__knob,
#mqa-player .mqa-progress.is-dragging .mqa-progress__knob { transform: translate(-50%, -50%) scale(1); }
#mqa-player .mqa-progress:focus-visible { outline: 2px solid var(--mqa-accent) !important; outline-offset: 4px !important; }

#mqa-player .mqa-times {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 10px !important;
	line-height: 1.2 !important;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* Extras: volume, playlist, close --------------------------------------- */
#mqa-player .mqa-bar__extras { display: flex !important; align-items: center !important; gap: 3px !important; flex: 0 0 auto !important; }

#mqa-player .mqa-vol-btn .mqa-ico--muted { display: none !important; }
#mqa-player.is-muted .mqa-vol-btn .mqa-ico--vol   { display: none !important; }
#mqa-player.is-muted .mqa-vol-btn .mqa-ico--muted { display: block !important; }

#mqa-player .mqa-volume {
	position: relative !important;
	width: 52px !important;
	height: 5px !important;
	flex: 0 0 52px !important;
	border-radius: 999px !important;
	background: rgba(var(--mqa-text-rgb), .22) !important;
	cursor: pointer !important;
	margin: 0 4px 0 2px !important;
}
#mqa-player .mqa-volume__fill {
	position: absolute !important;
	left: 0 !important; top: 0 !important; bottom: 0 !important;
	width: 80%;
	border-radius: 999px !important;
	background: var(--mqa-text) !important;
}
#mqa-player .mqa-volume:focus-visible { outline: 2px solid var(--mqa-accent) !important; outline-offset: 4px !important; }

#mqa-player .mqa-list-btn[aria-expanded="true"] { background: rgba(var(--mqa-text-rgb), .2) !important; color: var(--mqa-accent) !important; }

/* ==================================================================== */
/* Playlist                                                             */
/* ==================================================================== */
#mqa-player .mqa-list {
	position: absolute !important;
	bottom: calc(100% + 12px) !important;
	left: 0 !important;
	z-index: 4 !important;
	width: 300px !important;
	max-width: calc(100vw - var(--mqa-x) - 16px) !important;
	max-height: 320px !important;
	overflow-y: auto !important;
	padding: 8px !important;
	border-radius: 14px !important;
	background: rgba(var(--mqa-panel-rgb), .97) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .12) !important;
	box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .7) !important;
	color: var(--mqa-text) !important;
	animation: mqa-pop .22s cubic-bezier(.2, .85, .3, 1);
}
#mqa-player .mqa-list[hidden] { display: none !important; }
#mqa-player.mqa-pos-bottom-right .mqa-list,
#mqa-player.mqa-pos-top-right .mqa-list { left: auto !important; right: 0 !important; }
#mqa-player.mqa-pos-top-left .mqa-list,
#mqa-player.mqa-pos-top-right .mqa-list { bottom: auto !important; top: calc(100% + 12px) !important; }

@keyframes mqa-pop {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

#mqa-player .mqa-list__head {
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	opacity: .55;
	padding: 6px 10px 8px !important;
}
#mqa-player .mqa-list__items { display: block !important; }
#mqa-player .mqa-list__items li { display: block !important; }

#mqa-player .mqa-list__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 9px 10px !important;
	border-radius: 9px !important;
	color: var(--mqa-text) !important;
	text-align: left !important;
	transition: background .16s ease !important;
}
#mqa-player .mqa-list__item:hover { background: rgba(var(--mqa-text-rgb), .12) !important; }
#mqa-player .mqa-list__item.is-active { background: rgba(var(--mqa-accent-rgb), .18) !important; }
#mqa-player .mqa-list__item:focus-visible { outline: 2px solid var(--mqa-accent) !important; outline-offset: -2px !important; }

#mqa-player .mqa-list__bars { display: flex !important; align-items: flex-end !important; gap: 2px !important; height: 13px !important; flex: 0 0 13px !important; }
#mqa-player .mqa-list__bars i {
	display: block !important;
	width: 3px !important;
	height: 4px !important;
	border-radius: 2px !important;
	background: rgba(var(--mqa-text-rgb), .45) !important;
}
#mqa-player .mqa-list__item.is-active .mqa-list__bars i { background: var(--mqa-accent) !important; }
#mqa-player.is-playing .mqa-list__item.is-active .mqa-list__bars i { animation: mqa-eq .9s ease-in-out infinite; }
#mqa-player.is-playing .mqa-list__item.is-active .mqa-list__bars i:nth-child(2) { animation-delay: .15s; }
#mqa-player.is-playing .mqa-list__item.is-active .mqa-list__bars i:nth-child(3) { animation-delay: .3s; }

@keyframes mqa-eq {
	0%, 100% { height: 4px; }
	50%      { height: 13px; }
}

#mqa-player .mqa-list__text { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; }
#mqa-player .mqa-list__title { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#mqa-player .mqa-list__reciter { font-size: 10.5px !important; line-height: 1.3 !important; opacity: .6; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#mqa-player .mqa-list__tag {
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: .06em !important;
	padding: 3px 6px !important;
	border-radius: 5px !important;
	background: rgba(196, 48, 43, .92) !important;
	color: #fff !important;
	flex: 0 0 auto !important;
}
#mqa-player .mqa-list__credit {
	display: block !important;
	text-align: center !important;
	font-size: 10px !important;
	opacity: .5;
	padding: 10px 0 4px !important;
	color: var(--mqa-text) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
#mqa-player .mqa-list__credit:hover { opacity: .95; color: var(--mqa-accent) !important; }

/* Hidden YouTube host --------------------------------------------------- */
#mqa-player .mqa-yt {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ==================================================================== */
/* Responsive                                                           */
/* ==================================================================== */
@media (max-width: 1024px) {
	#mqa-player .mqa-bar { width: 420px !important; }
	#mqa-player .mqa-volume,
	#mqa-player .mqa-vol-btn { display: none !important; }
}

/* The inline style attribute carries the custom properties, so the mobile
   overrides need !important to win. */
@media (max-width: 600px) {
	#mqa-player {
		--mqa-size: 54px !important;
		--mqa-x: 14px !important;
		--mqa-y: 14px !important;
	}
	#mqa-player .mqa-bar  { width: calc(100vw - 28px) !important; gap: 9px !important; }
	#mqa-player .mqa-list { width: calc(100vw - 28px) !important; }
	#mqa-player .mqa-prev,
	#mqa-player .mqa-next { display: none !important; }
	#mqa-player .mqa-times { font-size: 9.5px !important; }
}

@media (max-width: 782px) {
	#mqa-player.mqa-hide-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	#mqa-player *,
	#mqa-player *::before,
	#mqa-player *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print { #mqa-player { display: none !important; } }