.music-card:hover,
.top-liked-card:hover {
	transform: translateY(-5px)
}

.lyrics-box,
.music-card,
.music-empty,
.music-header,
.music-like,
.music-meta,
.music-player,
.music-title,
.music-title-box,
.select-wrapper select,
.top-liked-card,
.top-liked-month .top-liked-card,
.top-liked-month h2 {
	text-align: center
}

.comment-reply a:hover,
.related-music li a:hover {
	text-decoration: underline
}

.site-header {
	background-color: transparent;
	padding: 30px 0;
	display: flex;
	justify-content: center
}

body:not(.light-mode) .custom-header-wrapper {
	background-color: #0b0b14;
	padding: 10px 20px;
	border-radius: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1300px;
	width: 100%;
	border: 2px solid gold;
	box-shadow: 0 0 12px rgba(255, 215, 0, .15)
}

.search-form,
.search-submit {
	display: flex;
	align-items: center
}

.site-logo img {
	height: 220px;
	object-fit: contain;
	display: block
}

body.light-mode .social-btn {
	background-color: #fff;
	border: 1.5px solid #000;
	color: #000
}

.search-form {
	border: 2.5px solid #fc0;
	border-radius: 30px;
	padding: 8px 15px;
	background-color: #0b0b14;
	width: fit-content;
	transition: .3s;
	box-shadow: 0 0 0 transparent
}

.search-field,
.search-form button,
.search-submit {
	border: none;
	background: 0 0
}

.search-form:hover {
	border-color: gold
}

.search-form:focus-within {
	border-color: #ffea00;
	box-shadow: 0 0 12px #ffea00;
	transition: .3s ease-in-out
}

.search-form input[type=search] {
	border: none;
	background: 0 0;
	color: #ccc;
	font-size: 15px;
	padding-left: 10px;
	outline: 0;
	width: 200px
}

.search-form button {
	color: #fc0;
	font-size: 18px;
	cursor: pointer;
	transition: color .3s
}

.search-form button:hover,
body:not(.light-mode) .top-liked-month h2 {
	color: gold
}

.search-field {
	height: 100%;
	flex: 1;
	padding: 0 15px;
	font-size: 15px;
	color: #fff;
	font-family: Vazirmatn, sans-serif
}

.music-title-box,
.music-title-box h1 {
	color: gold;
	font-family: Vazirmatn, sans-serif
}

#ajax-search-input::placeholder,
.search-field::placeholder {
	color: #bbb
}

.search-submit {
	cursor: pointer;
	justify-content: center
}

.search-submit svg {
	width: 20px;
	height: 20px;
	stroke: #FFD700;
	transition: stroke .3s
}

.search-submit:hover svg {
	stroke: #fff
}

.search-suggestions {
	position: absolute;
	top: 110%;
	right: 0;
	left: 0;
	background: #0b0b14;
	border: 2px solid #ffc107;
	border-radius: 10px;
	padding: 10px;
	list-style: none;
	font-size: 16px;
	font-weight: 700;
	z-index: 1
}

#ajax-search-results ul.search-suggestions li,
.search-suggestions li {
	padding: 8px 0;
	border-bottom: 1px solid #333
}

#ajax-search-results li:last-child a,
#ajax-search-results ul.search-suggestions li:last-child,
.search-suggestions li:last-child {
	border-bottom: none
}

#ajax-search-results ul.search-suggestions li a,
.search-suggestions li a {
	color: #fff;
	text-decoration: none;
	transition: .3s
}

#ajax-search-results ul.search-suggestions li a:hover,
.search-suggestions li a:hover {
	color: #ffc107
}

#search-results {
	background: 0 0;
	border: none;
	padding: 0;
	margin: 0;
	min-height: 0;
	height: 0;
	overflow: hidden
}

#search-form {
	position: relative;
	z-index: 2
}

#ajax-search-results {
	position: absolute;
	top: 110%;
	right: 0;
	left: 0;
	z-index: 999
}

#ajax-search-results ul.search-suggestions {
	background: #0b0b14;
	border: 2px solid #ffc107;
	border-radius: 10px;
	padding: 10px;
	list-style: none;
	margin: 0;
	font-family: Vazirmatn, sans-serif
}

#ajax-search-results ul,
.ajax-results-list {
	list-style: none;
	margin: 0;
	padding: 0
}

#ajax-search-results li a,
.ajax-results-list li a {
	display: block;
	padding: 8px;
	color: #f1f1f1;
	text-decoration: none;
	border-bottom: 1px solid #333
}

#ajax-search-results li a:hover,
.ajax-results-list li a:hover {
	background: #222
}

.music-title {
	display: block;
	padding-top: 10px;
	margin-bottom: 10px
}

.music-title .artist,
.music-title .song {
	direction: rtl;
	line-height: 1.5
}

.music-title .artist {
	color: #3498db
}

.music-title .song {
	color: #d0d0d0
}

.music-title-box {
	background-color: #0b0b14;
	border: 1px solid gold;
	border-radius: 16px;
	padding: 16px 24px;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(255, 215, 0, .08);
	display: block;
	width: 100%;
	max-width: 1300px;
	margin: 30px auto 20px
}

.music-title-box h1 {
	margin: 0;
	font-size: 20px
}

.music-archive {
	padding: 0 2rem 2rem;
	margin-top: 0
}

.music-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
	max-width: 1300px;
	margin: auto
}

body.night-mode .music-title .artist,
body.night-mode .music-title .song {
	color: #eee
}

.music-card {
	transition: transform .3s;
	background: #111;
	color: #fff;
	border-radius: 16px;
	overflow: hidden;
	font-family: Vazir, sans-serif;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	padding-bottom: 16px
}

.music-cover {
	width: 100%;
	display: block;
	position: relative
}

.music-cover-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 1 / 1
}

.music-subtitle {
	font-size: 14px;
	color: #ccc;
	margin-top: 4px
}

.music-empty {
	color: #aaa;
	padding: 2rem
}

.music-like {
	margin-top: .5rem
}

.like-button {
	transition: .3s
}

.like-button.liked {
	color: #ff2c74;
	font-weight: 700
}

.header-divider,
hr {
	display: none;
	height: 0;
	border: none;
	background: 0 0;
	margin: 0;
	padding: 0
}

.music-pagination .page-numbers {
	background-color: #0c0c20;
	border: 1px solid #2c2c45;
	color: #eee;
	padding: 8px 14px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: .3s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px
}

.music-pagination .page-numbers:hover {
	background-color: #1a1a3d;
	color: #00bfff;
	transform: translateY(-2px)
}

.music-pagination .current {
	background-color: #005eff;
	color: #fff;
	border-color: #005eff;
	box-shadow: 0 0 5px #005eff88
}

.music-pagination .page-numbers.dots {
	background: 0 0;
	border: none;
	color: #888;
	pointer-events: none;
	box-shadow: none
}

.wp-pagenavi {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 2rem
}

.wp-pagenavi a,
.wp-pagenavi span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #0f0f1a;
	color: #fff;
	border: 2px solid #2a2a2a;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	font-family: Vazir, sans-serif;
	font-size: 16px;
	transition: .2s;
	text-decoration: none
}

.wp-pagenavi a:hover {
	background-color: #1a1a2a;
	color: #ffd369
}

.wp-pagenavi span.current {
	background-color: #05f;
	color: #fff;
	font-weight: 700
}

.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink {
	width: 42px;
	height: 41px;
	background-color: #0f0f1a;
	border: 2px solid #2a2a2a;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	color: #ccc;
	transition: .2s ease-in-out;
	line-height: 1
}

.wp-pagenavi a.nextpostslink:hover,
.wp-pagenavi a.previouspostslink:hover {
	background-color: #1e1e2f;
	border-color: #ffd369;
	color: #ffd369;
	transform: scale(1.1)
}

.top-liked-month h2 {
	color: gold;
	font-size: 20px;
	font-weight: 700;
	font-family: Vazirmatn, sans-serif;
	margin-bottom: 25px
}

.top-liked-grid,
.top-liked-month .top-liked-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center
}

.top-liked-card {
	display: flex;
	flex-direction: column;
	width: 160px;
	text-decoration: none;
	color: #fff;
	border-radius: 12px;
	overflow: hidden;
	background: #151521;
	transition: .2s;
	box-shadow: 0 2px 6px rgba(255, 255, 255, .05)
}

.top-liked-card:hover {
	box-shadow: 0 4px 10px rgba(255, 215, 0, .2)
}

.top-liked-card img {
	width: 100%;
	height: 160px;
	object-fit: cover
}

body.light-mode .top-liked-card {
	background-color: #fff;
	color: #000;
	border: 1px solid #ccc;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08)
}

.top-liked-info {
	padding: 10px;
	font-size: 14px
}

.top-liked-info strong {
	display: block;
	color: #5ab0ff;
	font-weight: 700;
	margin-bottom: 4px
}

.top-liked-info span {
	color: #ccc;
	font-size: 13px
}

.music-sort-container {
	display: flex;
	justify-content: center;
	margin: 40px 0;
	font-family: Vazirmatn, sans-serif
}

.select-wrapper {
	position: relative;
	border: 2px solid gold;
	border-radius: 12px;
	width: 220px;
	height: 54px;
	background: 0 0
}

#ajax-search-input,
.select-wrapper select {
	border: none;
	font-family: Vazirmatn, sans-serif;
	background: 0 0;
	direction: rtl;
	outline: 0
}

.select-wrapper select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	font-size: 20px;
	font-weight: 700;
	color: gold;
	text-align-last: center;
	line-height: 54px;
	padding: 0 40px;
	cursor: pointer;
	position: relative;
	z-index: 2
}

select {
	-webkit-appearance: none
}

.select-wrapper::after {
	content: '▼';
	position: absolute;
	left: 35px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: gold;
	pointer-events: none;
	z-index: 3
}

#searchform {
	display: flex;
	align-items: center;
	background: 0 0;
	border: 2px solid #ffc107;
	border-radius: 30px;
	padding: 4px 10px;
	width: fit-content;
	margin: 0 auto;
	gap: 8px
}

#ajax-search-input {
	padding: 8px 12px;
	border-radius: 20px;
	width: 180px;
	color: #fff
}

.searchsubmit {
	background: 0 0;
	border: none;
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center
}

.searchsubmit svg {
	width: 18px;
	height: 18px;
	fill: #ffc107
}

.no-results {
	color: #999;
	padding: 10px
}

.music-meta,
.music-stats {
	color: #ccc;
	font-size: .85rem;
	font-family: Vazirmatn, sans-serif
}

.music-meta {
	margin-top: 4px
}

.music-stats {
	margin-top: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	direction: rtl
}

.music-stats button.like-button {
	all: unset;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px
}

.music-share .share-button {
	margin: 0 auto;
	display: inline-block
}

.stat-item,
.theme-switch {
	display: flex;
	align-items: center;
	gap: 6px
}

.stat-item .icon {
	font-size: 1.3rem;
	line-height: 1;
	display: flex;
	align-items: center
}

.stat-number {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	display: inline-block;
	position: relative;
	top: -1px
}

.share-menu a,
.share-menu button {
	display: block;
	width: 100%;
	padding: 6px 8px;
	margin: 4px 0;
	background-color: #222;
	color: #fff;
	border: none;
	border-radius: 6px;
	text-decoration: none;
	font-size: .85rem;
	cursor: pointer;
	text-align: center;
	font-family: Vazirmatn, sans-serif;
	box-sizing: border-box;
	line-height: 1.2
}

.share-button {
	background-color: transparent;
	border: 1px solid gold;
	color: gold;
	padding: 5px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-family: Vazirmatn, sans-serif;
	font-size: .9rem;
	transition: .2s
}

.share-button:hover {
	background-color: gold;
	color: #000
}

.share-menu {
	display: none;
	position: absolute;
	bottom: 120%;
	right: 50%;
	transform: translateX(50%);
	background-color: #111;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 10px;
	z-index: 999;
	width: 160px;
	flex-direction: column
}

.topbar-nav,
.topbar-nav .social-btn {
	background-color: transparent;
	display: flex
}

.topbar-nav {
	padding: 18px 30px;
	font-size: 18px;
	border-radius: 0;
	border: none;
	box-shadow: none;
	justify-content: space-between;
	align-items: center;
	font-family: Vazirmatn, sans-serif;
	color: #fff;
	max-width: 1300px;
	margin: 20px auto 0
}

.topbar-container {
	position: sticky;
	top: 0;
	z-index: 9999;
	padding: 6px 0;
	transition: padding .3s;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px)
}

.topbar-menu,
body {
	padding: 0;
	margin: 0
}

body:not(.light-mode) .topbar-container {
	background-color: rgba(11, 11, 20, .5)
}

body.light-mode .topbar-nav {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #111
}

.topbar-menu li a:hover,
body,
body:not(.light-mode) .highlight-track {
	color: #fff
}

.topbar-menu {
	list-style: none;
	display: flex;
	gap: 20px
}

.topbar-menu li a {
	text-decoration: none;
	color: #ffd369;
	font-weight: 600;
	transition: color .2s
}

.topbar-nav .social-center,
.volume-wrapper {
	display: flex;
	align-items: center;
	gap: 10px
}

.topbar-nav .social-btn {
	border: 1px solid #ffd369;
	color: #ffd369;
	padding: 6px 14px;
	border-radius: 12px;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	transition: .3s;
	text-decoration: none
}

.topbar-nav .social-btn:hover {
	background-color: #ffd369;
	color: #000
}

.topbar-nav .social-btn img {
	width: 22px;
	height: 22px
}

.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px
}

.slider,
.slider:before {
	position: absolute;
	transition: .3s
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0
}

.slider {
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #444;
	border-radius: 24px
}

.slider:before {
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	border-radius: 50%
}

input:checked+.slider {
	background-color: #fc0
}

input:checked+.slider:before {
	transform: translateX(20px)
}

.share-menu a:hover,
.share-menu button:hover {
	background-color: #333
}

.site-content {
	margin-right: 200px
}

body {
	font-family: Vazirmatn, sans-serif;
	background-color: #121212;
	font-size: 14px
}

body.light-mode {
	background-color: #fffefc;
	color: #111
}

body.light-mode #ajax-search-results ul.search-suggestions {
	background: #fff;
	border: 2px solid #ffc107;
	border-radius: 10px;
	padding: 10px;
	list-style: none;
	margin: 0;
	font-family: Vazirmatn, sans-serif
}

body.light-mode #ajax-search-results ul.search-suggestions li a {
	color: #333;
	text-decoration: none;
	transition: .3s
}

body.light-mode #ajax-search-results ul.search-suggestions li a:hover {
	background: #f5f5f5;
	color: #000
}

body.light-mode .custom-header-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	padding: 10px 20px;
	margin: 0 auto 20px;
	width: 100%;
	max-width: 1350px;
	box-sizing: border-box;
	gap: 20px
}

body.light-mode .music-title-box {
	padding: 14px 24px;
	font-size: 18px;
	font-weight: 700;
	font-family: Vazirmatn, sans-serif
}

body.light-mode .music-card {
	background-color: #fff;
	border: 1px solid #333;
	color: #000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .1)
}

body.light-mode .music-title .artist {
	color: #007acc
}

body.light-mode .comment-author,
body.light-mode .comment-content,
body.light-mode .comment-date,
body.light-mode .music-title .song {
	color: #333
}

body.light-mode .music-empty {
	color: #777
}

body.light-mode .select-wrapper select,
body.light-mode .top-liked-info span,
body.light-mode .top-liked-info strong {
	color: #000
}

body.light-mode .search-form:focus-within {
	outline: 0;
	border-color: #000
}

body.light-mode .music-pagination .page-numbers {
	background-color: #fff;
	color: #000;
	border: 1px solid #000
}

body.light-mode .music-pagination .current,
body.light-mode .share-button:hover {
	background-color: #000;
	color: #fff
}

body.light-mode .share-button {
	border-color: #000;
	color: #000
}

body.light-mode .select-wrapper {
	border: 2px solid #000;
	background-color: #fff
}

body.light-mode .site-header {
	background-color: #fff;
	border-bottom: 1px solid #000
}

body.light-mode .menu-list>li>a {
	background-color: #f7f7f7;
	color: #000
}

body.light-mode .menu-list>li>a:hover {
	background-color: #ddd
}

.sort-title span.icon,
.stage-banner .light-mode-image,
body.light-mode .music-title-box::before,
body.light-mode .stage-banner .dark-mode-image {
	display: none
}

.highlight-play:hover,
body.light-mode #ajax-search-input,
body.light-mode .search-form input {
	background-color: #fff;
	color: #000
}

body.light-mode .search-submit svg {
	stroke: #000;
	fill: #000
}

body.light-mode #searchform {
	border: 2px solid #000
}

body.light-mode .searchsubmit svg {
	fill: #000
}

body.light-mode .music-title-box,
body.light-mode .music-title-box *,
body.light-mode .music-title-box svg,
body.light-mode .top-liked-month h2,
body.light-mode .top-liked-month h2 *,
body.light-mode .top-liked-month i,
body.light-mode .top-liked-month svg {
	color: #000;
	fill: #000
}

body.light-mode .music-sort-container {
	background: 0 0;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0 auto 20px
}

body.light-mode .wp-pagenavi a,
body.light-mode .wp-pagenavi span {
	background-color: #fff;
	color: #000;
	border: 2px solid #000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	font-weight: 700
}

body.light-mode .wp-pagenavi .current {
	background-color: #000;
	color: #fff;
	border: 2px solid #000;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

body.light-mode #ajax-search-input::placeholder,
body.light-mode .search-field::placeholder,
body.light-mode input::placeholder,
body.light-mode input[type=search]::placeholder {
	color: #666;
	font-weight: 500;
	opacity: 1
}

.top-liked-month {
	max-width: 1300px;
	margin: 0 auto 40px;
	background-color: #0b0b14;
	border-radius: 15px;
	padding: 25px;
	border: 1px solid gold;
	box-shadow: 0 0 4px rgba(255, 215, 0, .15);
	position: relative;
	z-index: 5
}

body.light-mode .top-liked-month {
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	padding: 20px;
	margin: 0 auto 20px;
	max-width: 1350px;
	width: 100%;
	box-sizing: border-box
}

body.light-mode .top-liked-month::after,
body.light-mode .top-liked-month::before {
	display: none;
	content: none;
	height: 0;
	border: none;
	background: 0 0;
	margin: 0;
	padding: 0
}

body.light-mode .site-header {
	border-bottom: none;
	box-shadow: none
}

body:not(.light-mode) {
	background-color: #0d0d0d;
	color: #f5f5f5
}

b body.light-mode .music-header-section,
body.light-mode .ajax-search-wrapper,
body.light-mode .custom-header-wrapper {
	background-color: #fff;
	border: 1px solid #000;
	box-shadow: 0 0 8px rgba(0, 0, 0, .08);
	color: #111
}

body.light-mode .music-header-section #ajax-search-input,
body.light-mode .music-header-section .music-title-box,
body.light-mode .music-header-section .search-form,
body.light-mode .music-header-section .searchsubmit {
	background-color: #fff;
	color: #111;
	border-color: #000
}

body.light-mode .music-header-section .search-form input::placeholder {
	color: #555
}

body.light-mode .ajax-search-wrapper {
	background: 0 0;
	box-shadow: none;
	border: none
}

body.light-mode .music-header-section {
	margin-top: 0;
	margin-bottom: 20px
}

body.light-mode .stat-number {
	color: #000;
	font-weight: 600;
	opacity: 1
}

.sort-title::before {
	content: "⏷";
	margin-left: 6px;
	font-size: 18px;
	color: gold;
	position: relative;
	top: 1px
}

body.light-mode .main-header-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid #000;
	border-radius: 20px;
	padding: 10px 25px;
	height: 100px;
	box-sizing: border-box;
	margin-bottom: 30px;
	gap: 20px;
	direction: rtl
}

body.light-mode .main-header-box .logo img {
	height: 55px;
	display: block
}

body.light-mode .main-header-box .search-form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	max-width: 400px
}

body.light-mode .main-header-box .search-form input[type=text] {
	padding: 10px 20px;
	border: 1px solid #aaa;
	border-radius: 30px;
	font-size: 14px;
	width: 100%;
	background: #fff;
	color: #000;
	margin: 0
}

body.light-mode .main-header-box .search-form button {
	background: 0 0;
	border: none;
	margin-right: -35px;
	cursor: pointer
}

body.light-mode .main-header-box .social-icons {
	display: flex;
	gap: 10px
}

body.light-mode .main-header-box .social-icons a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid #000;
	border-radius: 12px;
	text-decoration: none;
	font-size: 13px;
	color: #000;
	white-space: nowrap
}

body.light-mode .main-header-box .social-icons img {
	height: 20px
}

.light-mode .contact-form label,
body.light-mode .music-subtitle,
body.light-mode .song-header-eng {
	color: #111
}

.top-liked-month .top-liked-card {
	width: 180px;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	border-radius: 16px;
	overflow: hidden;
	transition: transform .3s
}

.top-liked-month .top-liked-card img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

.top-liked-month .top-liked-card:hover {
	transform: scale(1.03)
}

.top-liked-month .top-liked-info {
	margin-top: 8px;
	font-size: 14px;
	color: #fff
}

.single-music-container {
	max-width: 1200px;
	margin: 40px auto;
	padding: 20px;
	box-sizing: border-box;
	color: #f5f5f5;
	font-family: Vazirmatn, sans-serif
}

.lyrics-content,
.share-toggle,
.toggle-lyrics-btn {
	font-family: Vazir, sans-serif
}

.music-header {
	margin-bottom: 30px
}

.music-thumbnail {
	width: 240px;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
	margin: 0 auto;
	display: block
}

.music-player {
	margin: 30px auto
}

.music-player audio {
	width: 100%;
	max-width: 500px;
	outline: 0
}

.music-download {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 30px 0
}

.music-description,
.music-lyrics {
	background-color: #111;
	padding: 20px;
	border-radius: 12px;
	margin: 20px 0;
	line-height: 2;
	box-shadow: 0 2px 8px rgba(255, 215, 0, .08)
}

.music-lyrics pre {
	white-space: pre-wrap;
	direction: rtl;
	font-size: 16px
}

.music-description h3,
.music-lyrics h3,
.related-music h3 {
	color: gold;
	margin-bottom: 12px;
	font-size: 20px
}

.like-button {
	background: 0 0;
	color: gold;
	border: none;
	font-size: 18px;
	cursor: pointer
}

.comment-form label,
.view-count,
body:not(.light-mode) .comment-respond h3,
body:not(.light-mode) .comment-respond label,
body:not(.light-mode) .comment-respond small {
	color: #ccc
}

.related-music ul {
	list-style: none;
	padding: 0
}

.related-music li {
	margin: 6px 0
}

.related-music li a {
	color: gold;
	text-decoration: none
}

.single-music-wrapper {
	flex: 1;
	background-color: #0b0b14;
	border: 2px solid #fdd835;
	border-radius: 20px;
	padding: 40px 30px;
	margin: 5px auto 50px;
	max-width: 900px;
	overflow: hidden;
	box-shadow: 0 0 20px #00000066
}

.lyrics-box {
	background: #fef1df;
	border-radius: 10px;
	padding: 30px 20px;
	margin: 40px 0;
	box-shadow: 0 0 10px #00000033
}

.lyrics-title {
	background: #b23217;
	font-size: 15px
}

.lyrics-text {
	color: #333;
	font-size: 16px;
	line-height: 2;
	white-space: pre-wrap;
	text-align: justify;
	max-width: 700px;
	margin: 0 auto
}

.modern-player {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #2d2d2d;
  padding: 10px;
  border-radius: 10px;
}

.player-top-row,
.progress-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* حالت دسکتاپ */
@media screen and (min-width: 768px) {
  .modern-player {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .player-top-row,
  .progress-group {
    flex: none;
    gap: 15px;
  }

  .player-top-row {
    order: 1;
  }

  .progress-group {
    order: 2;
    flex-grow: 1;
  }

  .bar {
    flex-grow: 1;
    position: relative;
    height: 4px;
    background: #555;
    border-radius: 2px;
    cursor: pointer;
  }

  .bar-fill {
    height: 100%;
    background: #ff5b7f;
    border-radius: 2px;
  }

  .time {
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
  }
}


.music-player-box {
	background: #14141e;
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 30px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

.music-player-box audio {
	width: 100%;
	max-width: 500px;
	margin: 0 auto 10px;
	display: block
}

.download-buttons {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-top: 10px
}

.download-btn {
	background-color: #c8102e;
	color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	transition: .3s
}

.download-buttons {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-top: 10px
}

.download-btn {
	background-color: #c8102e;
	color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	transition: background-color 0.3s
}

.download-btn:hover {
	background-color: #a30820
}

.progress-container {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px
}

.play-toggle,
.toggle-lyrics-btn {
	color: #fff;
	transition: background .3s;
	cursor: pointer
}

.lyrics-toggle-box {
	margin-top: 30px;
	text-align: center
}

.toggle-lyrics-btn {
	background-color: #b02c1e;
	padding: 10px 25px;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 15px
}

.toggle-lyrics-btn:hover {
	background-color: #922718
}

.lyrics-content {
	background-color: #f9e8d0;
	border-radius: 12px;
	padding: 20px;
	color: #222;
	line-height: 2;
	overflow: hidden;
	transition: .4s
}

.lyrics-title,
.share-toggle {
	padding: 8px 20px;
	font-weight: 700
}

.lyrics-title {
	color: #fff;
	background-color: #b02c1e;
	display: inline-block;
	border-radius: 6px;
	margin-bottom: 20px
}

.share-box a:hover,
.share-box button:hover,
.share-toggle {
	color: #facc15
}

.share-wrapper {
	position: relative;
	display: inline-block;
	text-align: center;
	margin-top: 20px
}

.share-toggle {
	background-color: #1e1e1e;
	border: 1px solid #facc15;
	border-radius: 8px;
	cursor: pointer
}

share-box {
	position: relative;
	right: 0;
	background: #1f1f2e;
	border: 1px solid #facc15;
	border-radius: 10px;
	padding: 10px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 140px;
	text-align: right
}

.share-box a,
.share-box button {
	color: #fff;
	text-decoration: none;
	background: 0 0;
	border: none;
	font-family: Vazir, sans-serif;
	font-size: 14px;
	cursor: pointer;
	transition: .2s
}

@keyframes heart-bounce {

	0%,
	100% {
		transform: scale(1)
	}

	30% {
		transform: scale(1.4)
	}

	60% {
		transform: scale(.9)
	}
}

.like-button.liked .icon {
	animation: .4s forwards heart-bounce
}

.music-stats .icon {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle
}

.music-stats .stat-number {
	margin-right: 3px;
	font-size: 15px;
	vertical-align: middle
}

body.light-mode .share-menu {
	background-color: #fff;
	border: 1px solid #ccc
}

body.light-mode .share-menu a,
body.light-mode .share-menu button {
	background-color: #f9f9f9;
	color: #222
}

body.light-mode .share-menu a:hover,
body.light-mode .share-menu button:hover {
	background-color: #eee
}

body.light-mode .single-music-wrapper {
	background-color: #fff;
	color: #111;
	border: 2px solid #ddd;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .05)
}

body.light-mode body.light-mode .modern-player .current-time,
body.light-mode .modern-player .duration,
body.light-mode body.light-mode .post-meta-footer {
	background-color: #fff;
	color: #111;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

body.light-mode .music-info-header {
	background-color: #fff;
	color: #111;
	border: 2px solid #ddd;
	border-radius: 15px;
	padding: 15px;
	text-align: center;
	font-weight: 700;
	margin-bottom: 20px
}

body.light-mode .music-share .share-button {
	background-color: #fff;
	color: #111;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 8px 16px;
	font-family: Vazirmatn, sans-serif;
	font-size: .9rem;
	cursor: pointer;
	transition: .3s
}

body.light-mode .music-share .share-button:hover {
	background-color: #f0f0f0;
	color: #000
}

.music-share-wrapper {
	text-align: center;
	margin-top: 10px
}

.music-share {
	display: inline-block;
	position: relative;
	margin-top: 10px;
	margin-bottom: 10px
}

.comment-respond input:focus,
.comment-respond textarea:focus {
	border-color: #00b4ff;
	outline: 0
}

.comment-reply-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	color: #00b4ff;
	text-decoration: none
}

.comment-reply-link::before {
	content: "↩️ "
}

.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	font-size: 14px;
	margin-bottom: 20px;
	color: #555
}

.comment-form-cookies-consent input[type=checkbox] {
	margin-right: 8px;
	width: 16px;
	height: 16px
}

.comment-respond textarea {
	width: 100%;
	box-sizing: border-box;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px 15px;
	color: #333;
	margin-bottom: 20px;
	font-family: Vazirmatn, Vazir, sans-serif;
	font-size: 15px
}

.comment-list,
.comment-list li,
.comment-list>li {
	padding: 0;
	list-style: none
}

.comment-respond .form-submit {
	text-align: center;
	margin-top: 20px
}

.comment-respond .form-submit input[type=submit] {
	width: auto;
	background-color: #ffa600;
	border: none;
	padding: 12px 30px;
	color: #fff;
	font-weight: 700;
	border-radius: 8px;
	cursor: pointer;
	font-family: Vazirmatn, Vazir, sans-serif;
	font-size: 16px;
	transition: background-color .3s;
	display: inline-block
}

.comment-respond .form-submit input[type=submit]:hover {
	background-color: #f80
}

.comment-list {
	margin: 0
}

.comment-item,
.comment-list>li {
	margin-bottom: 20px
}

.comment-list>li {
	border: none;
	background: 0 0
}

.comment-box {
	margin-bottom: 30px;
	background-color: #0b0b14;
	border-radius: 12px;
	padding: 15px 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4)
}

.comment-box:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .5)
}

.comment-date {
	order: 2;
	margin-left: 0;
	margin-right: auto;
	font-size: 14px;
	color: #bbb
}

.comment-author-date {
	font-weight: 700;
	color: #333
}

.comment-list li {
	margin: 0;
	border: 0;
	background: 0 0;
	box-shadow: none
}

.comment-reply {
	text-align: left;
	font-size: 14px;
	margin-top: 10px
}

.comment-form input[type=email],
.comment-form input[type=text],
.comment-form textarea {
	background-color: #1a1a1a;
	color: #fff;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 10px;
	font-size: 16px
}

.comment-form input[type=email]::placeholder,
.comment-form input[type=text]::placeholder,
.comment-form textarea::placeholder {
	color: #999;
	opacity: 1
}

.comment-form input[type=checkbox] {
	accent-color: #ffaa00
}

.comment-submit {
	background-color: #fa0;
	color: #000;
	border: none;
	padding: 12px 30px;
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .3s
}

.comment-submit:hover {
	background-color: #ffc107
}

body:not(.light-mode) .comment-respond {
	background: 0 0;
	border: none;
	padding: 30px
}

body:not(.light-mode) .comment-form {
	background: 0 0
}

.comment {
	background-color: #0b0b14;
	border: 1px solid #222;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 20px;
	transition: .3s
}

.comment:hover {
	box-shadow: 0 0 15px rgba(255, 255, 255, .05)
}

.commentlist>li.comment {
	background: #0b0b14;
	border: 1px solid #222;
	border-radius: 16px;
	margin-bottom: 25px;
	padding: 20px;
	list-style: none;
	transition: .3s
}

.commentlist>li.comment:hover {
	background: #12121b;
	box-shadow: 0 0 15px rgba(255, 255, 255, .08)
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: 14px;
	color: #bbb
}

.comment-author {
	font-weight: 400;
	color: #bbb
}

.comment-divider {
	border-bottom: 1px solid #444;
	margin-bottom: 10px
}

.comment-content {
	color: #bbb;
	font-size: 16px;
	line-height: 1.7
}

.comment-reply a {
	color: #1e90ff;
	font-size: 14px;
	transition: .3s
}

.comment-reply a:hover {
	color: #63b3ed
}

body.light-mode .comment-form input[type=email],
body.light-mode .comment-form input[type=text],
body.light-mode .comment-form textarea {
	background-color: #fff;
	color: #333;
	border: 1px solid #ccc
}

body.light-mode .comment-submit {
	background-color: #fa0;
	color: #000
}

body.light-mode .comment-box {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333
}

.light-mode .left-column>div {
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .08);
	color: #000
}

.cover-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: rgba(255, 213, 0, .7);
	color: #000;
	font-weight: 700;
	font-size: 18px;
	padding: 8px 12px;
	border-bottom-left-radius: 8px;
	font-family: Vazirmatn, sans-serif;
	z-index: 2;
	pointer-events: none;
	line-height: 1.5;
	max-width: 80px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.custom-header-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 20px;
	gap: 10px
}

.header-search,
.site-logo {
	flex: 0 0 auto
}

.stage-banner {
	flex: 1 1 auto;
	text-align: center
}

.stage-banner img {
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto
}

body.light-mode .stage-banner .light-mode-image {
	display: block
}

.contact-form {
	max-width: 600px;
	margin: 50px auto;
	padding: 30px;
	background: #0b0b14;
	border-radius: 16px;
	border: 1px solid #fff;
	color: #fff;
	font-family: Vazirmatn;
	box-sizing: border-box
}

.contact-form h1 {
	text-align: center;
	font-size: 24px;
	margin-bottom: 30px
}

.contact-form label {
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-size: 15px
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 12px;
	margin-bottom: 20px;
	border-radius: 8px;
	border: 1px solid #444;
	background: #0b0b14;
	color: #fff;
	font-size: 15px;
	box-sizing: border-box;
	transition: border .3s
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: #fff;
	outline: 0
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #ccc
}

.contact-form .upload-button {
	background: #1a1a1a;
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	border: 1px solid #fff;
	cursor: pointer;
	display: inline-block;
	font-family: Vazirmatn
}

.contact-form #file-list {
	color: #ccc;
	font-size: 14px;
	margin-top: 10px
}

.contact-form button#remove-files {
	display: none;
	background: 0 0;
	border: none;
	font-size: 18px;
	color: #ff4d4d;
	cursor: pointer;
	margin-top: 10px
}

.contact-form textarea {
	resize: none;
	overflow: hidden;
	transition: height .2s
}

.light-mode .contact-form {
	background: #f9f9f9;
	color: #111;
	border: 1px solid #000;
	box-shadow: 0 0 10px rgba(0, 0, 0, .03)
}

.light-mode .contact-form input,
.light-mode .contact-form textarea {
	background: #fff;
	color: #111;
	border: 1px solid #ccc
}

.light-mode .upload-button {
	background: #eaeaea;
	color: #111;
	border: 1px solid #ccc
}

.highlight-wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	margin: 20px 0;
	flex-wrap: wrap
}

.highlight-title {
	font-size: 18px;
	color: #ffd369;
	font-weight: 700;
	white-space: nowrap;
	margin-top: -40px;
	animation: 1.5s ease-in-out infinite shake-title
}

@keyframes shake-title {

	0%,
	100% {
		transform: translate(0, 0)
	}

	25%,
	75% {
		transform: translate(-1px, 0)
	}

	50% {
		transform: translate(1px, 0)
	}
}

.highlight-content {
	display: flex;
	align-items: center;
	gap: 20px;
	background: rgba(255, 255, 255, .04);
	border-radius: 16px;
	padding: 15px 20px;
	box-shadow: 0 0 12px rgba(255, 211, 105, .1)
}

.highlight-cover img {
	width: 100px;
	height: 100px;
	border-radius: 12px;
	object-fit: cover;
	border: 2px solid #444
}

.highlight-info {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.highlight-track {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	direction: rtl;
	text-align: right
}

.highlight-play {
	background-color: #ffd369;
	color: #0b0b14;
	border: none;
	padding: 8px 20px;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	width: fit-content;
	transition: .2s ease-in-out
}

body.light-mode .highlight-track {
	color: #222
}

body.light-mode .highlight-content {
	border: 1px solid #ddd;
	background-color: #fefefe;
	box-shadow: 0 0 15px rgba(0, 0, 0, .05);
	border-radius: 12px
}

ul.topbar-menu li a {
	font-family: Vazirmatn, sans-serif;
	font-size: 18px;
	color: #ffc019;
	text-shadow: 0 1px 0 #000;
	transition: .3s
}

body.light-mode .topbar-menu li a {
	color: #111;
	text-shadow: none;
	font-weight: 600;
	font-family: Vazirmatn, sans-serif
}

body.light-mode .topbar-container {
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
	border-bottom: 1px solid rgba(0, 0, 0, .08)
}

body.light-mode .topbar-menu li a:hover {
	color: #ff8c00
}

.video-player-wrapper {
	margin: 30px 0;
	text-align: center
}

@font-face {
	font-family: Shabnam;
	src: url('fonts/Shabnam.woff2') format('woff2'), url('fonts/Shabnam.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

.music-title .artist,
.music-title .song {
	font-family: IRANSans, Shabnam, sans-serif !important;
	font-weight: 500;
	text-align: center;
	direction: rtl;
	display: block;
	margin-bottom: 5px;
	font-size: 16px
}

@font-face {
	font-family: Vazirmatn;
	src: url('fonts/Vazirmatn-Regular.woff2')format('woff2');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: Vazirmatn;
	src: url('fonts/Vazirmatn-Bold.woff2')format('woff2');
	font-weight: 700;
	font-style: normal
}

#ajax-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	width: 100%
}

.search-suggestions {
	background: #0b0b14;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2)
}

body.light-mode .post-meta-footer {
  background-color: #ffffff;
  color: #000000;
}