/* ================= متغیرها و تم مدرن دارک ================= */
:root {
    --primary: #ff334b;
    --primary-glow: rgba(255, 51, 75, 0.45);
    --bg-card: #141418;
    --bg-card-hover: #1c1c22;
    --border-subtle: rgba(255, 255, 255, 0.07);
    --text-main: #f5f5f7;
    --text-muted: #8e8e93;
}

#ajax-content {
    background: radial-gradient(circle at 50% -20%, #201322 0%, #0d0d11 60%);
    min-height: 100vh;
    padding-bottom: 40px;
}

.tabs-container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* ================= ۱. استایل بخش برترین هنرمندان ================= */
.home-artists-section {
    padding: 15px 0 30px 0;
    width: 100%;
    overflow: hidden;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding: 0 4px;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title-wrap .section-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 6px var(--primary-glow));
}

.section-title-wrap h2, .section-header h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.view-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.view-all:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 14px var(--primary-glow);
}

.artists-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.artists-scroll-row {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 12px 6px 18px 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scroll-snap-type: x mandatory;
}
.artists-scroll-row::-webkit-scrollbar { display: none; }

.artist-circle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex: 0 0 105px;
    width: 105px;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.artist-circle-card:hover {
    transform: translateY(-6px);
}

.artist-avatar-ring {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 3px;
    background: linear-gradient(135deg, var(--primary) 0%, #2a2030 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.artist-circle-card:hover .artist-avatar-ring {
    transform: scale(1.04);
    box-shadow: 0 8px 22px var(--primary-glow);
    background: linear-gradient(135deg, #ff5e70 0%, var(--primary) 100%);
}

.artist-avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.no-avatar-circle {
    width: 100%;
    height: 100%;
    background: #1c1c24;
    border-radius: 50%;
}

.artist-name-text {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    max-width: 95px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
    line-height: 1.4;
}

.artist-circle-card:hover .artist-name-text {
    color: var(--primary);
}

.artist-nav-btn {
    background: rgba(18, 18, 24, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 5;
    transition: all 0.25s ease;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

.artist-nav-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 15px var(--primary-glow);
}

.artist-nav-btn.prev-btn { right: -10px; }
.artist-nav-btn.next-btn { left: -10px; }

@media (min-width: 900px) {
    .artist-nav-btn { display: flex; }
}

@media (max-width: 600px) {
    .artists-scroll-row { gap: 14px; padding: 6px 2px 14px 2px; }
    .artist-circle-card { flex: 0 0 80px; width: 80px; }
    .artist-avatar-ring { width: 75px; height: 75px; margin-bottom: 6px; }
    .artist-name-text { font-size: 11.5px; max-width: 80px; }
    .section-title-wrap h2, .section-header h2 { font-size: 18px; }
}

/* ================= ۲. تب‌بار مدرن و کپسولی (Pill Tabs) ================= */
.tabs-nav {
    display: flex;
    gap: 10px;
    margin: 25px 0 35px 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    width: fit-content;
    max-width: 100%;
}
.tabs-nav::-webkit-scrollbar { display: none; }

.tab-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    flex-shrink: 0;
}

.tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.tab-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 16px var(--primary-glow);
}

.tab-pane {
    display: none;
    animation: modernFade 0.4s ease;
}
.tab-pane.active { display: block; }

@keyframes modernFade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================= ۳. کارت‌های موزیک و گرید مدرن ================= */
.albums-grid, .tracks-grid, .podcasts-grid, .maddahis-grid, .fifas-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); 
    gap: 18px; 
}

.album-card, .podcast-card, .maddahi-card, .fifas-card, .track-card { 
    background: var(--bg-card); 
    border-radius: 16px; 
    overflow: hidden; 
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.album-card:hover, .podcast-card:hover, .fifas-card:hover, .maddahi-card:hover, .track-card:hover { 
    transform: translateY(-8px); 
    background: var(--bg-card-hover);
    border-color: rgba(255, 51, 75, 0.3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 51, 75, 0.15);
}

.album-link, .video-link { text-decoration: none; color: inherit; display: block; }

.album-image-container, .podcast-image-container, .fifas-image-container, .maddahi-image-container, .track-image-container { 
    position: relative; 
    padding-top: 100%; 
    overflow: hidden; 
    border-radius: 14px 14px 0 0;
}

.album-cover, .podcast-cover, .fifas-cover, .maddahi-cover, .track-cover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.4s ease;
}

.album-card:hover .album-cover, .track-card:hover .track-cover, .podcast-card:hover .podcast-cover, .fifas-card:hover .fifas-cover, .maddahi-card:hover .maddahi-cover {
    transform: scale(1.07);
}

/* انیمیشن و دکمه شیک پخش (Play Button) */
.album-overlay, .play-btn-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    border: none; 
    cursor: pointer; 
}

.album-card:hover .album-overlay, .track-card:hover .play-btn-overlay, .podcast-card:hover .play-btn-overlay, .fifas-card:hover .play-btn-overlay, .maddahi-card:hover .play-btn-overlay { 
    opacity: 1; 
}

.play-btn-overlay svg { 
    background: var(--primary); 
    border-radius: 50%; 
    padding: 12px; 
    color: #fff; 
    width: 44px; 
    height: 44px; 
    box-shadow: 0 6px 18px var(--primary-glow); 
    pointer-events: none;
    transform: translateY(10px) scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.track-card:hover .play-btn-overlay svg, 
.podcast-card:hover .play-btn-overlay svg,
.maddahi-card:hover .play-btn-overlay svg,
.fifas-card:hover .play-btn-overlay svg {
    transform: translateY(0) scale(1);
}

.view-album-btn { 
    background: var(--primary); 
    color: #fff; 
    padding: 8px 18px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: 700;
    box-shadow: 0 4px 14px var(--primary-glow);
}

/* اطلاعات کارت */
.album-info, .podcast-info, .fifas-info, .maddahi-info, .track-info { 
    padding: 14px 12px; 
    text-align: center; 
    background: transparent;
}

.album-info h3, .podcast-info h3, .fifas-info h3, .maddahi-info h3, .track-info h3 { 
    margin: 0 0 6px 0; 
    font-size: 13.5px; 
    font-weight: 700;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.album-info h3 a, .podcast-info h3 a, .fifas-info h3 a, .maddahi-info h3 a, .track-info h3 a { 
    color: var(--text-main); 
    text-decoration: none; 
    transition: color 0.2s;
}

.album-info h3 a:hover, .track-info h3 a:hover {
    color: var(--primary);
}

.artist-name, .track-info .artist-name { 
    font-size: 12px; 
    color: var(--text-muted); 
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.track-info .artist-name a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.track-info .artist-name a:hover { color: #fff; }

/* ================= ۴. باکس لوکس محبوب‌ترین‌ها بر اساس لایک ================= */
.top-liked-standalone-box {
    margin-top: 55px;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(30, 20, 32, 0.8) 0%, rgba(18, 18, 22, 0.95) 100%);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    border: 1px solid rgba(255, 51, 75, 0.25);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.top-liked-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
}

.top-liked-header h2 {
    font-size: 21px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.like-badge-tag {
    position: absolute;
    top: 9px;
    right: 9px;
    background: rgba(10, 10, 14, 0.75);
    color: #ff4757;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    z-index: 2;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 71, 87, 0.35);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* ================= ۵. استایل اختصاصی تاپ ۱۰ ================= */
.top10-container {
    margin: 50px 0;
    background: linear-gradient(145deg, rgba(22, 22, 29, 0.8) 0%, rgba(13, 13, 17, 0.95) 100%);
    padding: 26px;
    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.top10-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    transition: all 0.25s ease;
}

.top10-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(-4px);
    border-color: rgba(255, 51, 75, 0.25);
}

.top10-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.top10-play-btn svg {
    display: block;
    fill: #ffffff;
    width: 16px;
    height: 16px;
    pointer-events: none;
    margin-right: -2px; /* تنظیم تقارن بصری مثلث پلی در مرکز دایره */
}

.top10-play-btn:hover {
    background: var(--primary);
    box-shadow: 0 4px 14px var(--primary-glow);
    transform: scale(1.08);
}

.top10-play-btn:hover svg {
    fill: #ffffff;
}
/* ویدیوها */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-card { background: var(--bg-card); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.3); transition: all 0.35s; display: flex; flex-direction: column; border: 1px solid var(--border-subtle); }
.video-card:hover { transform: translateY(-7px); border-color: rgba(255, 51, 75, 0.3); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
.video-image-container { position: relative; padding-top: 56.25%; overflow: hidden; }
.video-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; }
.video-card:hover .video-overlay { opacity: 1; }
.play-video-icon { width: 52px; height: 52px; background: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; box-shadow: 0 4px 16px var(--primary-glow); }
.play-video-icon svg { width: 24px; height: 24px; fill: currentColor; }
.video-info { padding: 15px 12px; text-align: center; background: transparent; }
.video-info h3 { margin: 0 0 8px 0; font-size: 14.5px; font-weight: 700; color: #fff; }

/* استایل دکمه افزودن به پلی لیست */
.guest-playlist-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0a0a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
}

.guest-playlist-add-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.05);
}

/* حالتی که موزیک در پلی لیست کاربر موجود است */
.guest-playlist-add-btn.is-in-playlist {
    background: rgba(46, 213, 115, 0.15);
    border-color: rgba(46, 213, 115, 0.4);
    color: #2ed573;
}

.guest-playlist-add-btn.is-in-playlist .icon-add {
    display: none !important;
}

.guest-playlist-add-btn.is-in-playlist .icon-added {
    display: block !important;
}


/* ریسپانسیو اختصاصی */
@media (max-width: 768px) {
    .tabs-container { padding: 10px 12px; }
    .albums-grid, .tracks-grid, .podcasts-grid, .maddahis-grid, .fifas-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .videos-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .top-liked-standalone-box { padding: 18px 14px; margin-top: 35px; border-radius: 18px; }
    .top10-container { padding: 18px 14px; margin: 35px 0; border-radius: 18px; }
    .play-btn-overlay svg { width: 36px; height: 36px; padding: 9px; }
}

@media (max-width: 480px) {
    .albums-grid, .tracks-grid, .podcasts-grid, .maddahis-grid, .fifas-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; }
    .videos-grid { grid-template-columns: 1fr; }
    .album-info, .podcast-info, .fifas-info, .maddahi-info, .track-info { padding: 10px 6px; }
    .album-info h3, .track-info h3 { font-size: 12px; }
    .tab-btn { padding: 8px 16px; font-size: 13px; }
    .top10-item { padding: 8px 10px; }
}

/* ===================================================
   Home Moods & Activities Section
   =================================================== */
.home-moods-section {
    margin: 45px 0;
    width: 100%;
}

.home-section-header {
    margin-bottom: 22px;
}

.home-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0;
}

.title-accent-dot {
    width: 8px;
    height: 8px;
    background: #ff334b;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 51, 75, 0.8);
    display: inline-block;
}

.section-subtitle {
    color: #7b8394;
    font-size: 0.88rem;
    margin: 0;
}

/* Grid Layout */
.moods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* Individual Mood Card */
.mood-card {
    position: relative;
    border-radius: 14px;
    text-decoration: none;
    overflow: hidden;
    background: #141721;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
}

.mood-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

.mood-card-inner {
    padding: 18px 16px;
    position: relative;
    z-index: 2;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mood-emoji {
    font-size: 2rem;
    display: inline-block;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.28s ease;
}

.mood-card:hover .mood-emoji {
    transform: scale(1.15) rotate(6deg);
}

.mood-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.mood-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

/* Background Glow using the CSS Variable */
.mood-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: var(--mood-gradient);
    opacity: 0.15;
    filter: blur(28px);
    pointer-events: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
    z-index: 1;
}

.mood-card:hover .mood-glow {
    opacity: 0.35;
    filter: blur(20px);
}

/* Responsive */
@media (max-width: 600px) {
    .moods-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .mood-card-inner {
        padding: 14px;
        min-height: 95px;
    }
    .mood-title {
        font-size: 0.95rem;
    }
}