/* === COMMON GRADIENT BARS (Top & Bottom) === */
.chat_head, .chat_footer, .top_background, .modal_top, .background_header {
  background: linear-gradient(90deg, #e4c6f8, #d5e2ff, #c7f3ff);
  color: #000;
}

/* === BUTTONS (Curved & Gradient) === */
button, .theme_btn, .default_btn, .sub_btn, .ok_btn, .warn_btn, .delete_btn {
  background: linear-gradient(135deg, #b88cf7, #94e4ff);
  color: white !important;
  border-radius: 30px !important;
  border: none !important;
  padding: 8px 15px;
  transition: all 0.3s ease;
}
button:hover {
  opacity: 0.9;
}

/* === SEND ICON & CHAT BUTTON === */
#chat_form button, .send_btn {
  background: linear-gradient(135deg, #b88cf7, #94e4ff);
  color: white !important;
  border-radius: 50% !important;
  padding: 10px;
}

/* === LIGHT MODE STYLING === */
body.light_mode,
body.light_mode .background_chat,
body.light_mode .chat_panel,
body.light_mode .modal_menu,
body.light_mode .panel_top,
body.light_mode .panel_bar,
body.light_mode .background_box,
body.light_mode .element_color {
  background: #ffffff !important;
  color: #444 !important;
}
body.light_mode .sub_menu_item,
body.light_mode .side_bar,
body.light_mode .chat_side_panel,
body.light_mode .modal_in {
  background: #f5f5f5 !important;
  color: #333 !important;
}

/* === DARK MODE STYLING === */
body.dark_mode,
body.dark_mode .background_chat,
body.dark_mode .chat_panel,
body.dark_mode .modal_menu,
body.dark_mode .panel_top,
body.dark_mode .panel_bar,
body.dark_mode .background_box,
body.dark_mode .element_color {
  background: #111 !important;
  color: #ddd !important;
}
body.dark_mode .sub_menu_item,
body.dark_mode .side_bar,
body.dark_mode .chat_side_panel,
body.dark_mode .modal_in {
  background: #181818 !important;
  color: #ccc !important;
}

/* === TEXT INPUT & AREA === */
input, textarea, .post_input_container {
  background: #f0f0f0 !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
}
body.dark_mode input, body.dark_mode textarea, 
body.dark_mode .post_input_container {
  background: #222 !important;
  color: #eee !important;
  border: 1px solid #444 !important;
}

/* === ONLINE/OFFLINE TAG STYLING FIX === */
.sub_list_item, .ulist_item, .sub_list {
  background: transparent !important;
}

/* === CURVED LOGIN BUTTONS (Login/Guest Login) === */
.login_btn, .guest_btn {
  border-radius: 30px !important;
}

/* === ICON VISIBILITY === */
.menui, .menuo, .menup, .sub_menu_icon {
  color: #5b17c9 !important;
}

/* === ROOM ICON COLORS === */
.boy { border-color: #b88cf7; }
.girl { border-color: #f7b8f1; }
.nosex { border-color: #ccc; }

/* === CLEAN UP ADD ROOM, ALERTS, TOOLTIPS ETC === */
.bnotify, .boom_warning, .boom_error, .boom_success {
  border-radius: 10px !important;
}
/* === Profile Picture Ring (Gender Based) === */
.boy {
  border: 3px solid #03add8 !important; /* Blue for males */
  border-radius: 50% !important;
  padding: 2px;
}

.girl {
  border: 3px solid #ff99ff !important; /* Pink for females */
  border-radius: 50% !important;
  padding: 2px;
}
/* === Smooth Light Purple Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #c084fc, #d8b4fe); /* Light pastel purple gradient */
  border-radius: 10px;
  border: 1px solid #e9d5ff; /* subtle border */
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #d8b4fe, #e9d5ff); /* Slightly brighter on hover */
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: #d8b4fe transparent;
}
/* === TOP & BOTTOM BAR === */
.top_background, .chat_head, .chat_footer, .panel_top, .background_header {
  background: linear-gradient(to right, #d8c4f2, #c8eaff);
  color: #333;
  border: none;
}

/* === ADMIN PANEL DASHBOARD ICONS === */
.sp_icon {
  background: #c8b1ff;
  color: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px #c8b1ff80;
  transition: 0.3s ease;
}
.sp_icon:hover {
  background: #e0c8ff;
  color: #333;
  box-shadow: 0 0 14px #e0c8ff;
}

/* === ADMIN PANEL BACKGROUND === */
.sp_box {
  background: #1e1e1e;
  color: #ccc;
  border-radius: 10px;
  padding: 10px;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #c8b1ff;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e0c8ff;
}

/* === GENERAL TEXT / LINK COLOR === */
a, .theme_color, .menuo, .menui {
  color: #ba91ff;
}
a:hover {
  color: #c39cf9;
}

/* === BUTTONS === */
button, .theme_btn, .default_btn, .sub_btn, .ok_btn {
  background: #c1a8f3;
  border: none;
  color: white;
  border-radius: 8px;
}
button:hover, .theme_btn:hover {
  background: #d8c4f2;
  color: #333;
  box-shadow: 0 0 8px #dfc6f5;
}

/* === LOGIN MODAL HEADER === */
.modal_top {
  background: linear-gradient(to right, #dccdfc, #c8eaff);
  color: #000 !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
/* ✅ Fix popup rounded corners (login, register, etc.) */
.modal_in,
.modal_box {
  border-radius: 12px !important;
  /* 🔁 No overflow: hidden — to prevent dropdown cutoff */
}

/* 🎨 Round only the top of the modal header */
.modal_top {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* ❌ Remove internal rounding so everything aligns smoothly */
.modal_menu,
.modal_selected,
.tab_selected {
  border-radius: 0 !important;
}
/* Thinner gender-based profile rings */
.boy {
  border: 2px solid #03add8 !important; /* Blue for males */
}

.girl {
  border: 2px solid #ff99ff !important; /* Pink for females */
}
.music_button {
	background: #944ce4;
	color: #fff;
	border: none;
	padding: 5px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.3s ease;
}
.music_button:hover {
	background: #b675ff;
}
/* === Profile & Broadcast Icon Visibility Fix === */
.profile_icons i,
.cover_icons i,
.broadcast_icons i,
.modal_top i,
#profile_icon_close,
#broadcast_close {
  color: white !important;
  text-shadow: 0 0 4px #000, 0 0 6px #000;
}

/* === Rank, Username, and Mood Shadow on Dark Backgrounds === */
.user_name,
.user_rank,
#profile_mood {
  color: white !important;
  text-shadow: 0 0 4px #000, 0 0 6px #000;
}