/* ===============================
   CSS STYLES (تم طلایی و تیره) - استخراج شده از music9 (2).php و تقویت شده برای وردپرس
   =============================== */
:root {
    --primary-color: #ffc107; /* طلایی/زرد */
    --background-dark: #000000;
    --background-medium: #101010;
    --text-light: #ffffff;
    --text-muted: #aaa;
    --track-hover: #181818;
    --border-color: #222;
    --nav-background: #101010;
}

/* ایزوله کردن کل محتوای افزونه در یک محدوده */
#vernat-music-app {
    max-width: 600px !important;
    margin: 0 auto !important;
    background: var(--background-dark) !important;
    font-family: system-ui, Tahoma !important;
    direction: rtl !important;
    padding-bottom: 125px !important; /* فضای کافی برای پلیر */
    min-height: 100vh !important;
    /* تضمین می‌کند که از کادر سفید قالب خارج نشود */
    box-sizing: border-box !important;
}

body {
    /* اطمینان از حذف padding و margin قالب */
    margin: 0 !important;
    padding: 0 !important;
}

header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px !important;
    padding-top: 10px !important;
    background: var(--background-dark) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}
header .title {
    font-size: 18px !important;
    font-weight: 600 !important;
    flex-grow: 1 !important;
    text-align: right !important;
    padding-right: 10px !important;
}
header .back-btn {
    font-size: 20px !important;
    cursor: pointer !important;
    color: var(--text-light) !important;
    transition: color 0.2s !important;
    margin-right: 15px !important;
}
.header-right {
    display: flex !important;
    align-items: center !important;
}
.header-right span {
    color: var(--primary-color) !important;
    font-weight: bold !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Search Box Styles */
#search-section {
    padding: 15px !important;
    background: var(--background-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: none !important; 
}
#search-input {
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 30px !important;
    border: none !important;
    background: #2d2d2d !important;
    color: var(--text-light) !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    text-align: right !important;
    direction: rtl !important;
    outline: none !important;
}
#search-section.active {
    display: block !important; 
}

/* Track List */
ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.track, .artist {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--border-color) !important;
    justify-content: space-between !important;
}
.track:hover, .artist:hover {
    background: var(--track-hover) !important;
}
.track img, .artist img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    margin-right: 15px !important;
    background: #333 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}
.info {
    flex: 1 !important;
    overflow: hidden !important;
    order: 2 !important;
}
.track img { order: 3 !important; }
.actions { order: 1 !important; margin-left: 15px !important; }

.info h3 {
    margin: 0 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
    color: var(--text-light) !important; /* تقویت شده */
}
.info p {
    margin: 2px 0 0 !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.actions i {
    color: var(--text-muted) !important;
    font-size: 22px !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}
.actions i.fa-download {
    color: var(--primary-color) !important;
}
.info p i.fa-heart {
    color: var(--primary-color) !important;
    font-size: 10px !important;
}


/* Fixed Footer/Player & Navigation */
.fixed-footer-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 600px !important; /* فقط در محدوده محتوا */
    margin: 0 auto !important;
    z-index: 50 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) !important;
}
#player-wrapper {
    background: var(--primary-color) !important;
    padding: 5px 10px !important;
    border-top: none !important;
    display: flex !important; 
    align-items: center !important;
    justify-content: space-between !important;
}
#player {
    flex-grow: 1 !important;
    background: transparent !important;
    height: 50px !important; 
}
/* استایل‌های سفارشی برای پلیر */
#player::-webkit-media-controls-panel {
    background-color: var(--primary-color) !important;
    color: var(--background-dark) !important;
    padding: 5px !important;
}
#player::-webkit-media-controls-play-button,
#player::-webkit-media-controls-pause-button,
#player::-webkit-media-controls-volume-slider,
#player::-webkit-media-controls-time-display,
#player::-webkit-media-controls-current-time-display,
#player::-webkit-media-controls-duration-display,
#player::-webkit-media-controls-mute-button {
    filter: invert(1) !important;
}
/* دکمه‌های جدید پلیر */
.player-controls {
    display: flex !important;
    gap: 8px !important;
    margin-right: 10px !important;
}
.player-controls i {
    font-size: 20px !important;
    color: var(--background-dark) !important;
    cursor: pointer !important;
    padding: 5px !important;
    opacity: 0.6 !important;
}
.player-controls i.active {
    opacity: 1 !important;
    color: #333 !important; 
}

/* نوار ناوبری */
#nav-bar {
    display: flex !important;
    justify-content: space-around !important;
    padding: 10px 0 8px 0 !important;
    background: var(--nav-background) !important;
}
.nav-item {
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    cursor: pointer !important;
    flex: 1 !important;
    transition: color 0.2s !important;
}
.nav-item i {
    font-size: 24px !important;
    display: block !important;
    margin-bottom: 3px !important;
}
.nav-item.active {
    color: var(--primary-color) !important;
}