:root { 
    --dark-bg: #09090b;          /* مشکی بسیار تیره */
    --panel-bg: #121215;         /* پس‌زمینه پنل‌ها و کارت‌ها */
    --border-color: #27272a;     /* بوردرهای ملایم و تاریک */
    --text-color: #f4f4f5;       /* متن اصلی سفید */
    --text-muted: #a1a1aa;      /* متن فرعی خاکستری */
    --accent-purple: #ff0033;   /* قرمز اصلی رادیو جوان */
    --accent-gold: #fbbf24;      /* رنگ ستاره‌ها و بخش‌های ویژه */
    --accent-red: #ef4444;       
    --accent-green: #10b981;
}
body { 
    font-family: 'Vazirmatn', sans-serif; margin: 0; background-color: var(--dark-bg); 
    color: var(--text-color); padding-bottom: 80px; /* --- ارتفاع مینی-پلیر --- */
}
.container { max-width: 900px; margin: 0 auto; padding: 0.5rem; }

/* --- Header --- */
.main-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; 
    background-color: var(--panel-bg); border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem; 
    border-radius: 0.75rem;
}
.page-header { font-size: 1.4rem; font-weight: 900; color: var(--accent-purple); margin: 0; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
    background-color: transparent; color: var(--text-muted); 
    border: 1px solid var(--border-color); 
    width: 38px; height: 38px; border-radius: 50%;
    cursor: pointer; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.icon-btn:hover, .icon-btn.active {
    background-color: var(--panel-bg); color: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* --- Auth Dropdown --- */
.auth-dropdown { position: relative; }
.auth-dropdown-menu {
    display: none; position: absolute; top: 120%; left: 0;
    width: 220px; background-color: var(--panel-bg);
    border: 1px solid var(--border-color); border-radius: 0.5rem;
    padding: 0.5rem; z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.auth-dropdown.open .auth-dropdown-menu { display: block; }
.auth-user-info {
    padding: 0.75rem; border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem; display: none;
}
.auth-user-info .user-email {
    display: block; font-size: 0.9rem; color: var(--text-color);
    font-weight: 700; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis;
}
.auth-user-info .user-label { font-size: 0.75rem; color: var(--accent-green); }
.auth-dropdown-menu button {
    background-color: transparent; color: var(--text-muted); width: 100%;
    text-align: right; padding: 0.5rem 0.75rem; font-weight: 500;
    border: none; border-radius: 0.25rem; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.2s, color 0.2s;
}
.auth-dropdown-menu button:hover {
    background-color: rgba(139, 92, 246, 0.1); color: var(--accent-purple);
}

/* --- Search Box --- */
.search-box-container {
    display: none; 
    position: relative; margin-bottom: 0.75rem;
    animation: slideDown 0.3s ease forwards;
}
.search-box-container.open { display: block; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-input {
    width: 100%; padding: 0.6rem 1rem 0.6rem 3rem; background-color: var(--panel-bg);
    border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color);
    font-family: 'Vazirmatn', sans-serif; font-size: 0.95rem; box-sizing: border-box;
}
.search-input:focus { outline: none; border-color: var(--accent-purple); box-shadow: 0 0 0 2px var(--accent-purple); }
.search-icon { position: absolute; top: 50%; right: auto; left: 1rem; transform: translateY(-50%); color: var(--text-muted); }

/* --- Home Sections --- */
.top-static-banner {
    width: 100%; height: auto; border-radius: 0.75rem;
    margin-bottom: 0.75rem; 
    display: block; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.ad-banner-slider {
    margin-bottom: 0.75rem; 
    border-radius: 0.75rem; overflow: hidden; 
}
.ad-banner-slider a { display: block; }
.ad-banner-slider img { width: 100%; border-radius: 0.75rem; display: block; }
.ad-banner-slider .swiper-pagination-bullet-active { background-color: var(--accent-gold); }
.track-list { display: flex; flex-direction: column; gap: 0.5rem; }
.track-item {
    display: flex; align-items: center; gap: 0.75rem;
    background-color: var(--panel-bg); padding: 0.5rem 0.75rem; 
    border-radius: 0.5rem; cursor: pointer; border: 1px solid var(--border-color);
}
.track-item.playing { background-color: var(--accent-purple); color: white; }
.track-item img { width: 45px; height: 45px; border-radius: 0.25rem; object-fit: cover; } 
.track-info { flex-grow: 1; overflow: hidden; }
.track-info .title { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-item.playing .artist-link { color: #e5e7eb; } 
.track-play-icon { font-size: 1.2rem; }
.swiper-container { width: 100%; padding-bottom: 25px; overflow: hidden; }
.swiper-slide { height: auto; }
.swiper-pagination-bullet { background-color: var(--text-muted); opacity: 0.8; width: 6px; height: 6px; } 
.swiper-pagination-bullet-active { background-color: var(--accent-purple); }
.slider-track-item {
    display: flex; flex-direction: column; 
    background-color: var(--panel-bg); border-radius: 0.75rem;
    border: 1px solid var(--border-color); overflow: hidden; 
    cursor: pointer; position: relative; height: 100%; 
}
.slider-track-item img { width: 100%; height: 120px; object-fit: cover; } 
.slider-track-item .track-info { padding: 0.6rem; flex-grow: 1; }
.slider-track-item .title { font-weight: 700; font-size: 0.95rem; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slider-track-item .track-play-icon {
    position: absolute; bottom: 0.5rem; right: 0.5rem; font-size: 1.5rem;
    color: var(--accent-purple); background-color: rgba(31, 41, 55, 0.7); 
    border-radius: 50%; width: 36px; height: 36px; display: flex;
    align-items: center; justify-content: center; opacity: 0; 
    transition: opacity 0.2s, background-color 0.2s; backdrop-filter: blur(2px);
}
.slider-track-item:hover .track-play-icon { opacity: 1; }
.slider-track-item.playing { box-shadow: 0 0 0 2px var(--accent-purple); background-color: #2a3445; }
.slider-track-item.playing .track-play-icon { opacity: 1; color: var(--accent-gold); }
.slider-track-item.playing .artist-link { color: var(--text-muted); } 
.slider-track-item.playing .title { color: var(--accent-purple); }
.artist-link {
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block; 
}
.artist-link:hover {
    color: var(--accent-purple);
    text-decoration: underline;
}
.slider-track-item .artist-link {
    margin-bottom: 0.25rem;
}
.star-rating { color: var(--accent-gold); font-size: 0.75rem; }
.star-rating .stars-outer { position: relative; display: inline-block; }
.star-rating .stars-inner {
    position: absolute; top: 0; left: 0; white-space: nowrap;
    overflow: hidden; width: 0; color: var(--accent-gold);
}
.star-rating .stars-outer::before { content: '☆☆☆☆☆'; color: #555; }
.star-rating .stars-inner::before { content: '★★★★★'; }

.review-open-btn {
   display: none;
}

/* --- Modal Styles --- */
#review-modal-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
    display: flex; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    align-items: center; justify-content: center; z-index: 1010; padding: 1rem;
}
#review-modal-overlay.open { opacity: 1; visibility: visible; }
#review-modal-content {
    background-color: var(--panel-bg); border-radius: 0.75rem; padding: 1rem;
    border: 1px solid var(--border-color); width: 100%; max-width: 500px;
    max-height: 85vh; overflow-y: auto; position: relative; z-index: 1001;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
}
#review-modal-overlay.open #review-modal-content { transform: scale(1) translateY(0); }
#review-login-prompt { text-align: center; font-weight: 500; font-size: 0.9rem; }
#review-login-prompt a { color: var(--accent-purple); text-decoration: none; }
.review-form { display: none; } 
.review-form .rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.review-form .rating-input input[type="radio"] { display: none; }
.review-form .rating-input label {
    font-size: 1.5rem; color: #555; cursor: pointer; transition: color 0.2s;
}
.review-form .rating-input input[type="radio"]:checked ~ label,
.review-form .rating-input label:hover,
.review-form .rating-input label:hover ~ label { color: var(--accent-gold); }
.review-form textarea {
    width: 100%; background-color: #374151; border: 1px solid var(--border-color);
    color: white; padding: 0.5rem; border-radius: 0.5rem; font-family: inherit;
    margin-top: 0.75rem; min-height: 60px; box-sizing: border-box;
}
.review-form button {
    background-color: var(--accent-green); color: white; border: none; padding: 0.5rem 1rem;
    border-radius: 0.5rem; font-weight: 700; cursor: pointer; margin-top: 0.75rem; width: 100%;
}
#review-list { margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem; }
.review-item-public { border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
.review-item-public:last-child { border-bottom: none; margin-bottom: 0; }
.review-header { display: flex; align-items: center; gap: 0.5rem; }
.review-header .username { font-weight: 700; }
.review-header .date { font-size: 0.75rem; color: var(--text-muted); }
.review-comment { margin-top: 0.25rem; }

/* --- Pagination & Artist Header --- */
.load-more-btn {
    display: none; width: 100%; padding: 0.75rem;
    background-color: var(--panel-bg); border: 1px solid var(--border-color);
    color: var(--text-color); font-weight: 700; font-family: inherit;
    border-radius: 0.5rem; cursor: pointer; margin-top: 1rem;
    transition: all 0.2s;
}
.load-more-btn:hover { background-color: var(--accent-purple); }
.load-more-btn:disabled { background-color: #333; color: #777; cursor: not-allowed; }
#all-tracks-header {
    transition: color 0.2s; display: flex; align-items: center; 
}
#all-tracks-filter-label {
    font-size: 0.9rem; font-weight: 500;
    color: var(--text-muted); margin-right: 10px;
}
.section-header {
    font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 1rem; 
    border-bottom: 2px solid var(--accent-purple); padding-bottom: 0.25rem; color: var(--text-color);
}
.loading { text-align: center; padding: 1.5rem; font-size: 1rem; }

/* --- Mobile Fixes --- */
@media (max-width: 640px) {
    .slider-track-item img { height: 110px; } 
    .slider-track-item .title { font-size: 0.9rem; }
}

/* --- Tabbed Section --- */
.tabs-container {
    width: 100%;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}
.tabs-nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0.75rem;
}
.tab-link {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    position: relative;
    margin-bottom: -2px;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.tab-link:hover {
    color: var(--text-color);
    background-color: var(--panel-bg);
    border-color: var(--accent-purple);
}
.tab-link.active {
    color: var(--text-color);
    background-color: var(--panel-bg);
    border-color: var(--accent-purple);
    border-bottom: 2px solid var(--panel-bg); 
    text-shadow: 0 0 8px var(--accent-purple); 
}
.tabs-content .tab-pane { display: none; }
.tabs-content .tab-pane.active { display: block; }

/* --- Artist Tab Styles --- */
#artists-list-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.artist-list-item {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem 0.75rem;
    text-align: center;
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.artist-list-item:hover {
    background-color: #2a3445;
    border-color: var(--accent-purple);
    color: var(--accent-purple);
}

/* --- Featured Section --- */
.featured-section {
    background-color: #008080;
    border: 2px solid #FFD700;
    border-radius: 0.75rem;
    margin-top: 1.5rem; /* فاصله بیشتر از تب‌ها */
    padding: 1.25rem;
}
.featured-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-gold); /* رنگ طلایی برای "ویژه" */
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 0.25rem;
    margin: 0 0 1rem 0;
    text-align: center;
}
.featured-slots-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* دو ستون در موبایل */
    gap: 1rem;
}
.featured-slot-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2a3445; /* پس‌زمینه کمی متفاوت */
    border: 2px dashed var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    min-height: 150px; /* ارتفاع برای هماهنگی با آیتم‌های اسلایدر */
    text-align: center;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1rem; /* بزرگتر کردن فونت */
}
.featured-slot-placeholder i {
    font-size: 1rem;
    color: var(--accent-gold); /* هماهنگ با تیتر */
    margin-bottom: 0.5rem;
}
/* --- Artist Profile Link Styles --- */
.artist-profile-link {
    color: var(--accent-gold) !important; /* رنگ طلایی برای تمایز */
    font-weight: 700;
    text-decoration: none;
    position: relative;
    z-index: 5;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.artist-profile-link:hover {
    color: #fff !important;
    text-shadow: 0 0 5px var(--accent-gold);
}

.artist-profile-link i {
    font-size: 0.8em; /* آیکون تیک کوچک کنار اسم */
}

/* استایل مخصوص داخل پلیر کامل برای لینک */
#full-player-artist .artist-profile-link {
    font-size: 1.1rem;
    border-bottom: 1px dashed var(--accent-gold);
}

/* ========================================
--- Player Redesign Styles ---
========================================
*/
#player-container {
    position: fixed; 
    bottom: 0; 
    right: 0; 
    left: 0;
    
    /* --- افکت شیشه‌ای برای کل مینی‌پلیر --- */
    background-color: rgba(31, 41, 55, 0.5) !important; /* رنگ تیره و نیمه‌شفاف */
    backdrop-filter: blur(15px) !important; /* مات کردن پس‌زمینه */
    -webkit-backdrop-filter: blur(15px) !important; /* پشتیبانی مرورگرهای اپل */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* حاشیه ملایم شیشه‌ای */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); /* سایه نرم برای جدا شدن از پس‌زمینه */
    
    padding: 0.75rem; 
    display: grid; 
    grid-template-columns: 1fr auto; 
    align-items: center; 
    gap: 0.75rem; 
    z-index: 900;
}

#player-info-wrapper {
    display: flex; align-items: center; gap: 0.75rem;
    overflow: hidden; cursor: pointer;
    transition: background-color 0.2s; border-radius: 0.25rem;
    padding-left: 0.5rem;
}
#player-info-wrapper:hover { background-color: #2a3445; }
#player-open-full-btn {
    font-size: 1.1rem; padding: 0 0.25rem; color: var(--text-muted);
}
#player-open-full-btn:hover { color: var(--text-color); }
#mini-player-progress-bar {
    position: absolute; top: -2px; left: 0; right: 0;
    height: 3px; background-color: var(--border-color);
}
#mini-player-progress {
    width: 0%; height: 100%; background-color: var(--accent-purple);
    transition: width 0.1s linear;
}
#player-cover { 
    width: 45px; height: 45px; border-radius: 0.25rem; 
    object-fit: cover; flex-shrink: 0;
}
#player-info { 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    line-height: 1.3; flex-grow: 1;
}
#player-title { 
    font-weight: 700; font-size: 0.9rem; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#player-artist { font-size: 0.75rem; color: var(--text-muted); }
#player-mini-controls {
    display: flex; align-items: center; gap: 0.5rem;
}
.player-btn {
    background: none; border: none; color: var(--text-muted); font-size: 1.1rem;
    cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s;
}
.player-btn:hover { color: var(--text-color); }
#player-prev-btn, #player-next-btn { font-size: 1rem; }
#player-play-pause-btn, #full-player-play-pause-btn { 
    font-size: 1.8rem; color: var(--text-color); 
}
#player-play-pause-btn:hover, #full-player-play-pause-btn:hover { 
    color: var(--accent-purple); 
}
.player-btn.active { color: var(--accent-purple); }
.player-btn.repeat-one .fa-repeat { position: relative; }
.player-btn.repeat-one .fa-repeat::after {
    content: '1'; position: absolute;
    top: -3px; right: -5px; font-size: 0.5rem; font-weight: 900;
    background-color: var(--accent-purple); color: white;
    border-radius: 50%; width: 10px; height: 10px;
    display: flex; align-items: center; justify-content: center;
}
#audio-player { display: none; }
#full-player-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000; background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(15px); display: flex;
    opacity: 0; visibility: hidden;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#full-player-overlay.open {
    opacity: 1; visibility: visible; transform: translateY(0);
}
#full-player-bg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover; background-position: center;
    filter: blur(40px) brightness(0.4); opacity: 0.7;
    z-index: -1; transform: scale(1.1);
}
#full-player-close-btn {
    position: absolute; top: 1rem; left: 49%; font-size: 1.5rem;
}
#full-player-content {
    width: 100%; max-width: 500px; margin: 0 auto;
    padding: 1rem; padding-top: 4rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; box-sizing: border-box; gap: 1.5rem;
}

/* --- Visualizer Hidden --- */
#visualizer-canvas {
    width: 100%; height: 80px; opacity: 0.7;
    display: none; /* --- مخفی کردن ویژوالایزر --- */
}

#full-player-cover {
    width: 60%; max-width: 250px; aspect-ratio: 1 / 1;
    border-radius: 1rem; object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#full-player-info { text-align: center; }
#full-player-title {
    font-size: 1.5rem; font-weight: 900; color: white;
}
#full-player-artist {
    font-size: 1rem; color: var(--text-muted); font-weight: 500;
}
.player-progress-container { 
    width: 100%; display: flex; align-items: center; gap: 0.75rem; 
    font-size: 0.75rem; color: var(--text-muted); 
}
.player-seek-bar {
    flex-grow: 1; -webkit-appearance: none; appearance: none; 
    width: 100%; height: 5px; background: rgba(255,255,255,0.2); 
    border-radius: 5px; outline: none; cursor: pointer;
    transition: height 0.2s;
}
.player-seek-bar:hover { height: 7px; }
.player-seek-bar::-webkit-slider-thumb { 
    -webkit-appearance: none; appearance: none; 
    width: 14px; height: 14px; background: var(--text-color); 
    border-radius: 50%; margin-top: -4.5px; 
}
.player-seek-bar:hover::-webkit-slider-thumb {
    background: var(--accent-purple);
}
#full-player-controls {
    width: 100%; display: flex; justify-content: space-around;
    align-items: center;
}
#full-player-controls .player-btn { font-size: 1.4rem; }
#full-player-controls #full-player-play-pause-btn { font-size: 2.8rem; }
#full-player-review-btn {
    color: #DC2626; /* <-- رنگ صورتی برای مثال */
}
#full-player-download-btn {
    color: #10B981; /* <-- رنگ دلخواه خود را اینجا بگذارید */
}
/* --- استایل کاور پلیر: گرد، شیشه‌ای و چرخش همیشگی --- */
#player-cover { 
    width: 48px !important; 
    height: 48px !important; 
    border-radius: 50% !important; /* دایره کامل */
    object-fit: cover !important; 
    flex-shrink: 0 !important;
    
    /* افکت شیشه‌ای (Glassmorphism) و هاله نور بنفش */
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 15px var(--accent-purple), 
                inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
                
    /* چرخش دائمی و بدون توقف (بدون نیاز به جاوااسکریپت) */
    animation: spinCover 5s linear infinite !important;
}

/* انیمیشن چرخش 360 درجه */
@keyframes spinCover {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ========================================
--- Submit Work Modal Styles ---
========================================
*/
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px); /* افکت تار شدن بک‌گراند */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.custom-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

.custom-modal-content {
    background: #1f2937; /* رنگ تیره مشابه کاور پلیر */
    border: 1px solid rgba(251, 191, 36, 0.4); /* حاشیه طلایی */
    border-radius: 16px;
    width: 90%;
    max-width: 450px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(0) scale(1);
    transition: transform 0.3s ease;
    color: #f3f4f6;
    direction: rtl; /* راست‌چین */
}

.custom-modal.hidden .custom-modal-content {
    transform: translateY(-20px) scale(0.95);
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.8rem;
}

.custom-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: #fbbf24; /* رنگ طلایی */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
    padding: 0;
    line-height: 1;
}

.close-modal-btn:hover {
    color: #ef4444;
}

.submit-requirements {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.submit-requirements li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: #e5e7eb;
}

.submit-requirements li:last-child {
    margin-bottom: 0;
}

.submit-requirements li i {
    color: #fbbf24;
}

.instagram-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.ig-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    text-decoration: none;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ig-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4);
    color: white;
}
/* ========================================
--- Submit Work Button Styles ---
======================================== */
#submit-work-btn {
    color: var(--accent-gold); /* تغییر رنگ به طلایی */
    font-weight: 800; /* بولد و ضخیم کردن فونت */
    text-decoration: none; /* حذف خط زیر لینک */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

#submit-work-btn i {
    font-size: 1.1rem; /* کمی بزرگ‌تر کردن آیکون آپلود */
}

/* افکت هنگام قرار گرفتن موس روی دکمه (هاور) */
#submit-work-btn:hover {
    background-color: rgba(251, 191, 36, 0.15); /* هاله طلایی ملایم در پس‌زمینه */
    color: #fff; /* سفید شدن متن برای خوانایی بیشتر */
    text-shadow: 0 0 8px var(--accent-gold); /* درخشش طلایی متن */
}
/* ========================================
--- Support Button Styles ---
======================================== */
#support-btn {
    color: #3b82f6; /* رنگ آبی */
    font-weight: 800; /* ضخیم کردن فونت */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

#support-btn i {
    font-size: 1.1rem;
    color: inherit; /* آیکون هم‌رنگ متن می‌شود */
}

/* افکت هنگام قرار گرفتن موس روی دکمه (هاور) */
#support-btn:hover {
    background-color: rgba(59, 130, 246, 0.15); /* هاله آبی ملایم در پس‌زمینه */
    color: #fff; /* سفید شدن متن برای خوانایی بیشتر */
    text-shadow: 0 0 8px #3b82f6; /* درخشش آبی متن و آیکون */
}