/* ==============================================
   1. FONTS & ANIMATIONS 
   ============================================== */
@import url("https://fonts.googleapis.com/css?family=Merienda");
@import url("https://fonts.googleapis.com/css?family=Lalezar");
@import url("https://fonts.googleapis.com/css?family=Mada");
@import url('https://fonts.googleapis.com/css2?family=Salsa&display=swap');

body, input, textarea, button, select, .font_text, .text_reg, .username, .user_item_name { 
    font-family: 'Salsa', cursive; 
}

/* Custom Sleek Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #5b5d618f rgba(0,0,0,0.2); }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
*::-webkit-scrollbar-thumb { background-color: #554c53; border-radius: 10px; }

/* Animations */

@keyframes heartbeat { from { transform: scale(1); } 10% { transform: scale(0.91); } 17% { transform: scale(0.98); } 33% { transform: scale(0.87); } 45% { transform: scale(1); } }
@keyframes off-on { from { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.652)); } to { filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.604)); } }
@keyframes shadow-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
@keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } }

/* Apply Animations */
.cavatar, .acav, .avatar_private img, .puser_avatar img, .chat_avatar img, .avavatar { animation: rotate-center .6s ease-in-out both; }
.head_logo img, .chat_head_logo img { animation: off-on 2s ease-in-out infinite alternate; }
.bnotify, .foot_notify, .head_notify { animation: shadow-pulse 1.5s infinite; }
.my_mood, .list_mood { animation: bounceInUp 1s both; }

/* Solid Overlay for Modals */
.small_modal_out, .large_modal_out, .over_modal_out, .over_emodal_out, .top_modal_out {
    background-color: rgba(0, 0, 0, 0.85); 
}

/* ==============================================
   2. CORE THEME COLORS (Solid Gradients + Modern Shapes)
   ============================================== */

/* general colors & Smooth Effects */
a { color:#aaa; text-shadow:0 0 5px rgba(255,255,255,0.2); transition: all 0.3s ease; }
a:hover { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
body { background:#1f1d1d; color:#fff; }
button { background:transparent; color:#fff; transition: all 0.3s ease; }

/* Modern Rounded Inputs */
input, textarea, .post_input_container { 
    background:#2f2e34; 
    border:1px solid #534c4c; 
    color:#e6dfdf; 
    border-radius: 10px; 
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
input:focus, textarea:focus { border: 1px solid #888; }
.setdef { color:#e6dfdf; }

/* cookie box */
.cookie_wrap { background:#1c1b1b; color:#fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }

/* Interactive Hover States */
.bback { background:rgba(255,255,255,0.05); transition: all 0.3s ease; }
.bbackb { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius: 8px; transition: all 0.3s ease; }
.bhover:hover { background:rgba(255,255,255,0.06); transform: translateY(-1px); }
.bbackhover { background:rgba(255,255,255,0.05); transition: all 0.3s ease; }
.bbackhover:hover { background:rgba(255,255,255,0.08); transform: translateY(-1px); }
.bbackhoverb { background:rgba(255,255,255,0.05); transition: all 0.3s ease; border-radius: 8px; }
.bbackhoverb:hover { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.1); box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: translateY(-2px); }

/* --- FIX: MENUS, SEPARATOR LINES & ADDONS --- */
.blisting, .blist, .bmenu, .submenu, .avitem { 
    border-bottom: 1px solid #333 !important; 
    transition: all 0.2s ease; 
}
.blisting:hover { background: rgba(255,255,255,0.04); padding-left: 4px; border-left: 2px solid #554c53; }
.bmenu:hover, .submenu:hover, .avitem:hover { background:rgba(255,255,255,0.05); }

/* Remove border from the last item so it looks clean at the bottom */
.card_menu .avitem:last-child { border-bottom: none !important; }

/* private panel top */
.back_ptop { background:linear-gradient(#050405, #433f44); color:#fff; border-radius: 12px 12px 0 0; }
.bpmenu:hover { background: rgba(255,255,255,0.05); }
.bsub { background:#111; }
.bsub:hover { background:rgba(255,255,255,0.05); }

/* Modern Box Shadows */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed { box-shadow:0 4px 10px rgba(0,0,0,0.5); border-radius: 12px; }

/* Selections */
.bselected, .rselected { background:rgba(255,255,255,0.08); border-radius: 6px; }
.cselected, .liked { background:rgba(255,255,255,0.05); border-radius: 6px; }

/* Pagination & Tags */
.pag_btn { background:rgba(255,255,255,0.05); border-radius: 5px; transition: all 0.3s ease; }
.pagselected, .pag_btn:hover { background:rgba(255,255,255,0.1); }
.gtag { background:#554c53; border:1px solid #333; border-radius: 4px; display: inline-block; vertical-align: middle; }

/* Solid Borders */
.bborder { border-bottom:1px solid #333; }
.tborder { border-top:1px solid #333; }
.lborder, .ppanel { border-left:1px solid #333; }
.rborder { border-right:1px solid #333; }
.fborder { border:1px solid #333; }
.float_top, .float_ctop { border-bottom:1px solid #333; }

/* Headers, Footer and Top Panels */
.bhead { background:linear-gradient(#050405, #433f44); color:#fff; }
.bsidebar { background:linear-gradient(to right, #050405, #433f44); color:#fff; }
.modal_top { background:linear-gradient(#000000, #353136); color:#fff; border-radius: 12px 12px 0 0; }
.pro_top { background:linear-gradient(#000000, #353136); color:#fff; border-radius: 12px 12px 0 0; }
.bfoot { background:linear-gradient(to top, #050405, #433f44); color:#fff; }
.foot { background:linear-gradient(to top, #000, #353136); color:#fff; }

/* Backgrounds */
.backglob { background:#1f1d1d; }
.back_chat { background:#1f1d1d; }
.back_chat::before{content:'';position:absolute;top:0;left:0;opacity:.4;box-shadow:inset 0 0 60px #000;width:100%;height:100%;background:url('./images/background.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover}

/* Main Boxes */
.back_priv, .back_box, .back_modal, .page_element, .back_quote { 
    background: #1c1b1b; 
    border: 1px solid #333; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.back_priv { box-shadow: inset 0 0 10px #000; }
.back_panel { background:#282525; border-radius: 10px; }
.back_menu, .back_pmenu { background: #0d0a07; border: 1px solid #333; border-radius: 10px;} 
.back_input {background:#0d0a07; border-top: 1px solid #333; background:linear-gradient(to top, #050405, #433f44); border-radius: 0 0 12px 12px;}

/* login background and buttons */
#intro_top{ background: none; }
#intro_top .bcell_mid{ width: 100%; }
#intro_top::before{content:'';position:absolute;z-index:-1;opacity:.2;top:0;left:0;width:100%;height:100%;background:url('./images/login_background.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover}
.intro_login_btn { background:linear-gradient(#554c53, #1f1d1d 20%); color:#fff; box-shadow:0 4px 8px rgba(0,0,0,.4); border-radius: 20px; transition: all 0.3s ease; }
.intro_login_btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.6); }
.intro_guest_btn { background:linear-gradient(#3c3c3c,#000 20%); color:#fff; border-radius: 20px; }

/* Theme Colors */
.theme_color { color:#554c53; }
.default_color { color:#aaa; }
.error  { color:#cc0000; }
.success { color:#74b20e; }
.warn { color:orange; }

/* Stylish Buttons */
.theme_btn, .back_theme { background:#554c53; color:#fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: all 0.3s ease; }
.theme_btn:hover { background:#6b6068; }
.default_btn, .back_default { background:#3e3a3d; color:#fff; border-radius: 8px; }
.defaultd_btn { background:#282525; color:#fff; border-radius: 8px; }
.ok_btn { background:#74b20e; color:#fff; border-radius: 8px; }
.warn_btn { background:orange; color:#fff; border-radius: 8px; }
.delete_btn { background:#cc0000; color:#fff; border-radius: 8px; }
.send_btn { color:#f6f6f6; }

/* Text & Icons */
.user { color:#fff; }
.chat_system { color:#aaa; }
.menui, .subi { color:#fff; }

/* --- FIX: BLACK AND WHITE OFFLINE USERS --- */
.offline { 
    opacity: 0.4 !important; 
    filter: grayscale(100%) !important; 
    -webkit-filter: grayscale(100%) !important; 
}

/* wall reply background */
.reply_item { background:#1c1b1b; border-radius: 8px; }
.main_post_item { color:rgba(255,255,255,0.5); }
.input_item { color:#aaa; }

/* Chat Bubbles (Modern Cool Shape) */
.mbubble { 
    color:#fff; 
    background:#2b2b2b; 
    border-radius: 12px 12px 12px 2px;
    padding: 8px 12px;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}
.topic_log { background:linear-gradient(to right, #282525, #1c1b1b); color:#e6dfdf; box-shadow: inset 0 0 10px rgba(0,0,0,.5); border-radius: 8px; }

/* private log bubble colors */
.target_private, .hunt_quote {color:#fff; background:#333; border-radius: 12px 12px 2px 12px; padding: 8px;}
.hunter_private, .targ_quote {color:#fff; background:#1c1b1b; border-radius: 12px 12px 12px 2px; padding: 8px;}

/* quote in chat background color */
.cquote { background: #282525; color:#fff; border-left: 3px solid #554c53; border-radius: 4px; padding-left: 8px; }

/* tab menu */
.tab_menu { box-shadow:0 2px 4px rgba(0,0,0,0.4); border-radius: 10px 10px 0 0; }
.tab_selected { background:rgba(255,255,255,0.05); border-bottom: 2px solid #554c53; }

/* modal menu */
.modal_mback { background:rgba(0,0,0,0.3); }
.modal_mborder { border-bottom: 1px solid #333; }
.modal_selected { background:rgba(255,255,255,0.08); border-left: 3px solid #554c53; }
.modal_back { background-color:rgba(0,0,0,0.85); } 

/* upload progress */
.bprogress { background:#74b20e; color:#fff; border-radius: 10px; }
.bnotify { background:red; color:#fff; border-radius: 50%; }

/* date colors */
.sub_date, .sub_text, .list_mood { color:#888; }
.sub_chat, .sub_priv { color:#aaa; }

/* --- FIX: ALIGN PROFILE LIKES & NUMBERS IN ONE LINE --- */
.plikes, .level_number, .level_count { 
    background-color: rgba(100,100,100,0.2); 
    color: #fff; 
    border-radius: 8px; 
    padding: 2px 6px; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;
}

/* special chat item */
.my_notice { color:#fff; background:linear-gradient(to top, #312f2f, #1f1d1f); border: 1px solid #000; border-radius: 8px; }
.system_text { background:rgba(255,255,255,0.05); color:#aaa; border-radius: 5px; }

/* outside pages background */
.back_page { background:#554c53; color:#fff; }
.post_video { background:rgb(0,0,0,1); border-radius: 8px; }

/* slider */
.boom_slider .ui-widget-content { background: #1c1b1b; }
.boom_slider .ui-state-default { background: #554c53 !important; border-radius: 50%; }
.boom_slider .ui-state-active { background: #554c53 !important; }
.boom_slider .ui-slider-range { background:#aaa; }

/* select input color */
.selectboxit-list, .selectboxit-btn { background-color: #2f2e34; border:1px solid #534c4c; color:#e6dfdf; border-radius: 8px; transition: all 0.3s ease; }
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: #3e3a3d; color:#e6dfdf; }
.selectboxit-default-arrow { border-top: 4px solid #aaa; }
.selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:active { background:#2f2e34; color:#e6dfdf; }
.selectboxit-options { background:#1c1b1b; color:#e6dfdf; border: 1px solid #333; border-radius: 8px; }
.selectboxit-list .selectboxit-option-anchor { color:#aaa; text-shadow: none !important;}

/* custom textured user list items */
.user_item {
    background-image: linear-gradient(374deg, transparent 0%, transparent 50%, rgba(159, 159, 159, 0.081) 50%, rgba(159, 159, 159, 0.07) 77%, transparent 77%, transparent 100%), linear-gradient(329deg, transparent 0%, transparent 91%, rgba(159, 159, 159, 0.07) 91%, rgba(159, 159, 159, 0.07) 99%, transparent 99%, transparent 100%), linear-gradient(329deg, rgb(0, 0, 0), rgb(0, 0, 0));
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}
.user_item:hover { filter: brightness(1.2); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.4); }

.modal_in { border:1px solid #333; border-radius: 8px; } 
.page_drop{ background: rgba(255,255,255,0.05); border-radius: 8px; }
.sp_icon{background:linear-gradient(#554c53,#1f1d1d)}

.panel_bar { display:table; width:100%; table-layout:fixed; height:40px; background:linear-gradient(#050405, #433f44);}

.fa-plus {color:#ffffff}
.fa-regular {color:white}
.fa-microphone {color:#ffffff}

/* responsive */
@media screen and (max-width: 576px){
    .back_chat::before{ background-position: left 38% center; opacity: 0.4; }
    .cleft2, .cright2 { background: #1c1b1b; } 
    .user_item { border-radius: 8px; }
}





.cavatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    cursor: pointer;
}


.user_item_avatar .acav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
}