/* --- CORE VARIABLES --- */
:root {
    --sidebar-width: 185px;
    --header-height-mobile: 65px;
    --footer-height-mobile: 64px;
    --player-height: 69px;
    
    --bg-color: #ffffff;
    --text-color: #333333;
    --content-bg: #f4f4f4;
    
    --sidebar-bg: #000000;
    --sidebar-border: #333333;
    --cream-text: #fdfdf0;
    --accent-blue: #0073e6;
    
    --transition-speed: 0.3s;
    --scrollbar-bg: #f4f4f4;
    --scrollbar-thumb: #bbb;
    --scrollbar-thumb-hover: #999;
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --content-bg: #1e1e1e;
    --scrollbar-bg: #121212;
    --scrollbar-thumb: #444;
    --scrollbar-thumb-hover: #666;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; border: 2px solid var(--scrollbar-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

body.admin-bar #mobile-header, body.admin-bar .socialheader { top: 32px !important; }
body.admin-bar #mobile-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #mobile-header { top: 46px !important; } }

#site-wrapper {
    position: relative; width: 100%; min-height: 100vh; background-color: var(--bg-color);
    transition: transform var(--transition-speed) ease; z-index: 10;
}

.socialheader {
    position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100%;
    background-color: var(--sidebar-bg); border-right: 1.5px solid var(--sidebar-border);
    color: var(--cream-text); display: flex; flex-direction: column; z-index: 100;
    transition: width var(--transition-speed) ease, transform var(--transition-speed) ease;
    overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none;
}
.socialheader::-webkit-scrollbar { display: none; width: 0; }

.sh-logo { padding: 20px; text-align: center; }
.sh-logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.sh-search-trigger {
    padding: 10px 20px; cursor: pointer; color: #aaa; border-bottom: 1px solid #333;
    display: flex; align-items: center; gap: 10px; transition: color 0.2s;
}
.sh-search-trigger:hover { color: #fff; }

.sh-menu-title { padding: 15px 20px 5px; font-size: 11px; text-transform: uppercase; color: #888; }
.sh-credits { padding: 0 20px 10px; font-size: 13px; font-weight: bold; color: var(--cream-text); }

.sh-menu-links li a {
    display: block; padding: 10px 20px; color: #ccc; transition: 0.2s;
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.sh-menu-links li a:hover { background-color: #222; color: #fff; border-left: 3px solid var(--accent-blue); }

.sh-spacer { flex-grow: 1; min-height: 20px; }

.sh-auth { padding: 15px 20px; border-top: 1px solid #333; position: relative; }
.auth-btn {
    background: #333; color: #fff; padding: 8px 12px; border-radius: 4px; text-align: center;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; white-space: nowrap;
}

/* BuddyPress Avatar styling for auth replace */
.bp-avatar-wrap {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: #222; padding: 5px 10px; border-radius: 20px; transition: background 0.2s;
}
.bp-avatar-wrap:hover { background: #333; }
.bp-avatar-wrap img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.bp-avatar-wrap span { font-size: 13px; font-weight: bold; color: #fff; }

.login-bubble-menu {
    position: fixed; bottom: 150px; left: 184px; width: 160px; background: #000; border: 1px solid #333;
    border-radius: 4px; box-shadow: 4px 4px 12px rgba(0,0,0,0.5); display: none; flex-direction: column;
    overflow: hidden; z-index: 200; transition: left var(--transition-speed) ease;
}
.login-bubble-menu.active { display: flex; }
.login-bubble-menu a { padding: 10px 15px; color: #fff; font-size: 13px; }
.login-bubble-menu a:hover { background: #333; }

.theme-toggle-container { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; color: #fff; font-size: 13px; cursor: pointer; }
.theme-toggle-container:hover { background: #333; }
.theme-switch { position: relative; display: inline-block; width: 32px; height: 18px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .3s; border-radius: 18px; }
.theme-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
.theme-switch input:checked + .theme-slider { background-color: var(--accent-blue); }
.theme-switch input:checked + .theme-slider:before { transform: translateX(14px); }

#footer_global { padding: 20px; font-size: 11px; color: #888; line-height: 1.6; border-top: 1px solid #333; }
#footer_global a { color: #888; }
#footer_global a:hover { text-decoration: underline; }

.secondary-search-aside {
    position: fixed; top: 0; left: -190px; width: 190px; height: 100%; background-color: var(--sidebar-bg);
    border-right: 1.5px solid var(--sidebar-border); z-index: 99; transition: left var(--transition-speed) ease;
    color: var(--cream-text); padding: 20px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
}
.sec-search-header { display: flex; justify-content: space-between; align-items: center; }
.sec-search-header h3 { font-size: 16px; margin: 0; color: #fff; }
.close-sec-search { cursor: pointer; color: #888; }
.close-sec-search:hover { color: #fff; }

.sec-search-input-group { display: flex; background: #222; border-radius: 20px; padding: 6px 10px; align-items: center; }
.sec-search-input-group input { background: transparent; border: none; color: #fff; width: 100%; outline: none; font-size: 13px; }
.sec-search-input-group button { background: transparent; border: none; color: #aaa; cursor: pointer; }
.sec-search-input-group button:hover { color: #fff; }

.sec-search-section h4 { font-size: 11px; color: #888; margin-bottom: 8px; text-transform: uppercase; border-bottom: 1px solid #333; padding-bottom: 4px; }
.sec-search-section ul { list-style: none; padding: 0; margin: 0; }
.sec-search-section ul li { font-size: 13px; color: #ccc; padding: 6px 0; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: color 0.2s; }
.sec-search-section ul li i { color: #666; font-size: 12px; }
.sec-search-section ul li:hover { color: #fff; }
.sec-search-section ul li:hover i { color: var(--accent-blue); }

.speed-dial-menu {
    position: fixed; bottom: calc(var(--footer-height-mobile) + 15px); right: 15px; width: 80px;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.8);
    display: flex; flex-direction: column; align-items: center; padding: 20px 5px; gap: 16px; z-index: 999;
    transform: translateX(150%); opacity: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease; pointer-events: none;
}
body.dark-mode .speed-dial-menu { background: rgba(30, 30, 30, 0.95); border: 1px solid rgba(100, 100, 100, 0.3); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.1); }
.speed-dial-menu.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.sd-close {
    background: #f4f4f4; color: #555; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 16px; margin-bottom: 5px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: background 0.2s;
}
.sd-close:hover { background: #e0e0e0; }
body.dark-mode .sd-close { background: #444; color: #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
body.dark-mode .sd-close:hover { background: #555; }
.sd-item { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-color); text-decoration: none; gap: 6px; width: 100%; transition: transform 0.2s ease; }
.sd-item:hover { transform: scale(1.1); }
.sd-item i { font-size: 22px; text-shadow: 1px 2px 3px rgba(0,0,0,0.3); }
body.dark-mode .sd-item i { text-shadow: 1px 2px 4px rgba(0,0,0,0.6); }
.sd-item span { font-size: 10px; font-weight: 700; line-height: 1.1; }
.sd-item.c-red i { color: #e53935; } .sd-item.c-blue i { color: #1e88e5; } .sd-item.c-tv i { color: #8e24aa; }
.sd-item.c-news i { color: #fb8c00; } .sd-item.c-map i { color: #43a047; } .sd-item.c-viz i { color: #00acc1; } .sd-item.c-donate i { color: #4caf50; }

.socialpagecontent {
    padding: 8px 8px 5px 8px; margin-left: var(--sidebar-width); min-height: 100vh;
    background-color: var(--bg-color); transition: margin-left var(--transition-speed);
    padding-bottom: calc(var(--player-height) + 20px);
}
.content-area { background: var(--content-bg); padding: 20px; border-radius: 4px; min-height: 80vh; }

#mobile-header {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height-mobile); background: #000;
    color: var(--cream-text); z-index: 90; align-items: center; justify-content: space-between; padding: 0 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); overflow: hidden;
}
.mh-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mh-hamburger { font-size: 20px; cursor: pointer; flex-shrink: 0; }
.mh-logo { font-size: 18px; font-weight: bold; display: flex; align-items: center; min-width: 0;}
.mh-logo img { max-width: 77px; width: 100%; height: auto; object-fit: contain; flex-shrink: 0; }

.mh-login { 
    font-size: 12px; font-weight: bold; cursor: pointer; background: linear-gradient(135deg, #e53935, #b71c1c); 
    color: #ffffff !important; padding: 5px 12px; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, background 0.2s ease; white-space: nowrap; flex-shrink: 0;
}
.mh-login:hover { transform: scale(1.05); background: linear-gradient(135deg, #ef5350, #c62828); }

.mh-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mh-icon { position: relative; font-size: 18px; color: #fff; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
@keyframes vibrate-periodic { 0%, 96% { transform: rotate(0deg); } 97% { transform: rotate(-15deg); } 98% { transform: rotate(15deg); } 99% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } }
.vibrate-icon { animation: vibrate-periodic 60s infinite; transform-origin: top center; }

#mobile-footer {
    display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: var(--footer-height-mobile);
    background: #000; border-top: 1px solid #333; z-index: 90; justify-content: space-around; align-items: center;
}
.mf-item { color: #888; font-size: 20px; display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; }
.mf-item.active, .mf-item:hover { color: #fff; }
.notif-badge {
    position: absolute; top: -5px; right: -5px; background: var(--accent-blue); color: white;
    font-size: 10px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #000;
}

#mobile-notif-menu {
    position: fixed; bottom: var(--footer-height-mobile); left: 0; width: 100%; background: #fff; color: #000;
    border-top-left-radius: 15px; border-top-right-radius: 15px; box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 85; padding-bottom: 20px;
}
#mobile-notif-menu.active { transform: translateY(0); }
.mn-header { padding: 15px; border-bottom: 1px solid #eee; font-weight: bold; display: flex; justify-content: space-between; }
.mn-list li { padding: 15px; border-bottom: 1px solid #f4f4f4; display: flex; gap: 10px; cursor: pointer; transition: background 0.2s; }
.mn-list li:hover { background: #eee; }

#player-wrapper {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 200;
    display: flex; flex-direction: column; pointer-events: none;
}
#global-player {
    height: var(--player-height); width: 100%; background: #ffffff; border-top: 1px solid #ddd;
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
    pointer-events: auto; transition: background 0.3s; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); position: relative;
}
body.dark-mode #global-player { background: #1a1a1a; border-top: 1px solid #333; box-shadow: 0 -2px 10px rgba(0,0,0,0.5); }
#player-queue {
    position: absolute; bottom: var(--player-height); left: 0; width: 100%; height: 190px;
    transform: translateY(20px); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: auto; z-index: 199; display: flex; flex-direction: column;
}

@media screen and (min-width: 769px) {
    #player-wrapper:hover #player-queue { transform: translateY(0); opacity: 1; visibility: visible; }
    #mobile-header, #mobile-footer, #mobile-notif-menu, .speed-dial-menu { display: none !important; }
    #site-wrapper { transform: none !important; }
    
    body.search-active .socialheader { width: 70px; }
    body.search-active .nav-text, body.search-active .nav-badge, body.search-active .sh-menu-title, body.search-active #footer_global { display: none; }
    body.search-active .sh-search-trigger, body.search-active .sh-menu-links li a { justify-content: center; padding-left: 0; padding-right: 0; }
    body.search-active .sh-menu-links li a:hover { border-left: none; color: var(--accent-blue); }
    body.search-active .sh-auth { padding: 15px 0; }
    body.search-active .auth-btn { background: transparent; padding: 10px 0; }
    body.search-active .auth-btn:hover { color: var(--accent-blue); }
    body.search-active .login-bubble-menu { left: 70px; }
    body.search-active .secondary-search-aside { left: 71px; }
    body.search-active .socialpagecontent { margin-left: 261px; }
}

.queue-top { height: 36px; background: #272727; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.queue-bottom { height: 154px; background: rgba(98, 98, 98, 0.95); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; overflow-x: auto; padding: 0 20px; gap: 15px; }
.queue-bottom::-webkit-scrollbar { height: 6px; }
.queue-bottom::-webkit-scrollbar-track { background: transparent; }
.queue-bottom::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); border-radius: 3px; }

.queue-card { width: 166px; height: 131px; background: #2a2a2a; border: 1px solid #444; display: flex; flex-direction: column; overflow: hidden; color: #fff; flex-shrink: 0; border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.2s; }
.queue-card:hover { transform: translateY(-3px); }
.queue-card img { width: 100%; height: 85px; object-fit: cover; }
.qc-info { padding: 6px; text-align: center; }
.qc-title { font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff;}
.qc-artist { font-size: 10px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;}

.gp-left { display: flex; align-items: center; gap: 15px; min-width: 250px; }
.gp-thumb { width: 45px; height: 45px; border-radius: 4px; object-fit: cover; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.gp-meta { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gp-title { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); }
.gp-artist { font-size: 12px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark-mode .gp-artist { color: #aaa; }

.eb-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin-left: 5px; cursor: pointer; }
.eb-icon-wrap i { font-size: 20px; color: var(--text-color); transition: color 0.2s; }
.eb-icon-wrap:hover i { color: var(--accent-blue); }
.eb-badge { position: absolute; top: -8px; right: -10px; background: #e53935; color: white; font-size: 9px; font-weight: bold; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bg-color); }

.gp-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; max-width: 500px; margin: 0 20px;}
.gp-controls { display: flex; align-items: center; gap: 20px; font-size: 16px; color: var(--text-color); }
.gp-controls i { cursor: pointer; transition: color 0.2s; }
.gp-controls i:hover { color: var(--accent-blue); }
.play-btn { width: 34px; height: 34px; background: var(--text-color); color: var(--bg-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s; }
.play-btn:hover { transform: scale(1.1); }
.gp-progress-container { position: absolute; top: -2px; left: 0; width: 100%; display: flex; align-items: center; cursor: pointer; padding: 4px 0; z-index: 10; transition: padding 0.15s;}
.gp-progress-bar { width: 100%; height: 3px; background: #ddd; border-radius: 0; position: relative; overflow: hidden;}
body.dark-mode .gp-progress-bar { background: #444; }
.gp-progress-fill { width: 35%; height: 100%; background: var(--accent-blue); border-radius: 0; }
.gp-progress-container:hover .gp-progress-bar { height: 5px; }.gp-progress-bar { transition: height 0.15s; }

.gp-right { display: flex; align-items: center; gap: 15px; min-width: 200px; justify-content: flex-end; color: var(--text-color); font-size: 14px;}
.gp-right i { cursor: pointer; transition: color 0.2s; }
.gp-right i:hover { color: var(--accent-blue); }
.gp-time { font-size: 11px; margin-right: 10px; color: #777; font-weight: bold; }
body.dark-mode .gp-time { color: #aaa; }
.gp-mobile-play { display: none; }

.secondary-search-aside::-webkit-scrollbar { width: 6px; }
.secondary-search-aside::-webkit-scrollbar-track { background: var(--sidebar-bg); }
.secondary-search-aside::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.secondary-search-aside::-webkit-scrollbar-thumb:hover { background: #555; }

@media screen and (max-width: 768px) {
    .socialheader { left: -185px; width: 185px; border-right: none; z-index: 80; padding-top: var(--header-height-mobile); padding-bottom: calc(var(--footer-height-mobile) + var(--player-height) + 10px); }
    .socialpagecontent { margin-left: 0; padding-top: calc(var(--header-height-mobile) + 10px); padding-bottom: calc(var(--footer-height-mobile) + var(--player-height) + 20px); }
    #mobile-header, #mobile-footer { display: flex; }
    .sh-search-trigger, .socialheader .sh-auth { display: none; }
    body.nav-open #site-wrapper { transform: translateX(186px); }
    body.nav-open .socialheader { transform: translateX(185px); }
    .secondary-search-aside { display: flex; top: 60px; height: calc(100% - 60px); z-index: 85; }
    body.search-active .secondary-search-aside { left: 0; }
    .login-bubble-menu { top: calc(var(--header-height-mobile) + 10px); bottom: auto; right: 10px; left: auto; width: 180px; z-index: 95; }
    #mobile-notif-menu { bottom: 140px; }
    #player-wrapper { bottom: var(--footer-height-mobile); }
    #player-queue { display: none !important; }
    #global-player { padding: 0 15px; gap: 10px; }
    .gp-thumb, .gp-center, .gp-time, .fa-shuffle, .fa-repeat { display: none; }
    .gp-left { min-width: 0; flex: 1; }
    .gp-right { min-width: 0; flex: 0; justify-content: flex-end; gap: 15px; }
    .gp-mobile-play { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--text-color); color: var(--bg-color); border-radius: 50%; cursor: pointer; flex-shrink: 0; }
}