/* ================================================
   ChatFurry Theme for CodyChat
   Author: ChatFurry
   Colors: #E87C3E (orange) · #F5A96B (light orange)
           #7A4B2A (brown)  · #3D2B1A (dark brown)
           #C4561A (deep orange)
   ================================================ */

/* ── General ─────────────────────────────────── */
a { color: #E87C3E; }
body { background: #140A04; color: #fff; }
button { background: transparent; color: #fff; }
input, textarea, .post_input_container {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #3D2B1A !important;
  color: #F5C89A;
}
.setdef { color: #fff; }

/* ── Global background (background.jpg) ────────── */
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('./images/background.jpg') no-repeat center center / cover;
  opacity: 0.18;
  box-shadow: inset 0 0 220px #060301;
}

/* ── Extra dark overlay so text stays readable ── */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(8, 3, 1, 0.62);
  pointer-events: none;
}

/* ── Furry character overlay at chat bottom ────── */
/* Sits above background, below chat messages       */
.back_chat {
  position: relative;
  background: transparent;
  overflow: hidden;
}
.back_chat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(160px, 28%, 340px);
  background: url('./images/furry-characters.png') no-repeat center bottom / contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.52;
  /* Soft fade at the top so characters blend into chat */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 30%, black 65%);
  mask-image:         linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 30%, black 65%);
}
/* Keep actual chat messages above the overlay */
.back_chat > * { position: relative; z-index: 1; }

/* ── Cookie box ─────────────────────────────── */
.cookie_wrap { background: #3D2B1A; color: #fff; }

/* ── Background utility classes ─────────────── */
.bback        { background: rgba(232,124,62,0.07); }
.bbackb       { background: rgba(232,124,62,0.07); border: 1px solid rgba(255,255,255,0.07); }
.bhover:hover { background: rgba(232,124,62,0.08); }
.bbackhover        { background: rgba(232,124,62,0.07); }
.bbackhover:hover  { background: rgba(232,124,62,0.04); }
.bbackhoverb       { background: rgba(232,124,62,0.07); }
.bbackhoverb:hover { background: rgba(255,255,255,0.08); border: 1px solid rgba(232,124,62,0.25); }
.blisting          { border-bottom: 1px solid rgba(255,255,255,0.03); }
.blisting:hover    { background: rgba(255,255,255,0.04); }
.blist             { border-bottom: 1px solid rgba(255,255,255,0.03); }

/* ── Private panel top ───────────────────────── */
.back_ptop { background: rgba(20,10,4,0.72); color: #fff; }

/* ── Page / sub menus ───────────────────────── */
.bpmenu:hover { background: rgba(255,255,255,0.05); }
.bsub         { background: rgba(0,0,0,0.12); }
.bsub:hover   { background: rgba(255,255,255,0.03); }
.bmenu, .submenu          { border-bottom: 1px solid rgba(255,255,255,0.04); }
.bmenu:hover, .submenu:hover { background: rgba(255,255,255,0.03); }

/* ── Shadows ─────────────────────────────────── */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed {
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,124,62,0.06);
}

/* ── Selection states ───────────────────────── */
.bselected  { background: rgba(232,124,62,0.15); }
.rselected  { background: rgba(232,124,62,0.15); }
.pselected  { color: #E87C3E; }
.cselected, .liked { background: rgba(232,124,62,0.07); }

/* ── Pagination ─────────────────────────────── */
.pag_btn               { background: rgba(232,124,62,0.07); }
.pagselected, .pag_btn:hover { background: rgba(255,255,255,0.1); }

/* ── Tags ───────────────────────────────────── */
.gtag { background: #0e0704; border: 1px solid rgba(232,124,62,0.25); }

/* ── Border helpers ─────────────────────────── */
.bborder { border-bottom: 1px solid rgba(232,124,62,0.22); }
.tborder { border-top:    1px solid rgba(232,124,62,0.22); }
.lborder, .ppanel { border-left:  1px solid rgba(232,124,62,0.22); }
.rborder { border-right:  1px solid rgba(232,124,62,0.22); }
.fborder { border:        1px solid rgba(232,124,62,0.22); }
.float_top  { border-bottom: 1px solid rgba(232,124,62,0.22); }
.float_ctop { border-bottom: 1px solid rgba(232,124,62,0.22); }

/* ── Headers / footer / modals ──────────────── */
.bhead {
  background: rgba(20,10,4,0.82);
  color: #fff;
  border-bottom: 1px solid rgba(232,124,62,0.28);
  box-shadow: 0 1px 12px rgba(232,124,62,0.08);
}
.bsidebar {
  background: rgba(20,10,4,0.82);
  color: #fff;
  border-bottom: 1px solid rgba(232,124,62,0.22);
}
.modal_top { background: rgba(20,10,4,0.72); color: #fff; }
.pro_top   { background: rgba(20,10,4,0.72); color: #fff; }
.bfoot {
  background: rgba(20,10,4,0.82);
  color: #fff;
  border-top: 1px solid rgba(232,124,62,0.22);
  box-shadow: 0 -1px 12px rgba(232,124,62,0.06);
}
.foot {
  background: rgba(20,10,4,0.82);
  color: #fff;
  border-top: 1px solid rgba(232,124,62,0.22);
}

/* ── Major panel / box backgrounds ─────────── */
.backglob   { background: transparent; }
.back_priv  { background: rgba(30,18,8,0.78); }
.back_panel { background: rgba(30,18,8,0.78); }
.back_menu  { background: rgba(30,18,8,0.88); border: 1px solid rgba(232,124,62,0.22); }
.back_pmenu { background: rgba(20,10,4,0.88); border-right: 1px solid rgba(232,124,62,0.22); }
.back_box   { background: rgba(30,18,8,0.92); border: 1px solid rgba(232,124,62,0.22); }
.back_input {
  background: rgba(20,10,4,0.85);
  border-top: 1px solid rgba(232,124,62,0.28);
  box-shadow: 0 -2px 16px rgba(232,124,62,0.06);
}
.back_modal { background: rgba(30,18,8,0.80); }
.page_element { background: rgba(30,18,8,0.78); }
.back_quote { background: rgba(30,18,8,0.72); z-index: 9999; }

/* ── Accent gradient on inner elements ──────── */
.back_input::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,124,62,0.35), transparent);
  margin-bottom: 0;
  position: absolute;
  top: 0; left: 0; right: 0;
}
.back_input { z-index: 9999; }

/* ── Theme colours ───────────────────────────── */
.theme_color   { color: #E87C3E; }
.default_color { color: #7A4B2A; }
.error         { color: #e05c5c; }
.success       { color: #6abf40; }
.warn          { color: #F5A96B; }

/* ── Buttons ────────────────────────────────── */
.theme_btn, .back_theme {
  background: linear-gradient(135deg, #C4561A, #E87C3E);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,124,62,0.35);
  transition: box-shadow 0.2s, transform 0.15s;
}
.theme_btn:hover, .back_theme:hover {
  box-shadow: 0 4px 14px rgba(232,124,62,0.5);
  transform: translateY(-1px);
}
.default_btn, .back_default { background: #3D2B1A; color: #fff; }
.defaultd_btn { background: #5A3A22; color: #fff; }
.ok_btn       { background: #6abf40; color: #fff; }
.warn_btn     { background: #F5A96B; color: #fff; }
.delete_btn   { background: #b02828; color: #fff; }
.send_btn     { color: #E87C3E; }

/* ── Usernames & system text ─────────────────── */
.user        { color: #fff; }
.chat_system { color: #9C7A5E; }
.offline     { opacity: 0.5; }

/* ── Icons ───────────────────────────────────── */
.menui { color: #E87C3E; }
.subi  { color: #E87C3E; }

/* ── Wall / news ────────────────────────────── */
.reply_item     { background: rgba(30,18,8,0.72); }
.main_post_item { color: rgba(255,255,255,0.5); }
.input_item     { color: #7A4B2A; }

/* ── Private chat bubbles ───────────────────── */
.target_private, .hunt_quote { color: #fff; background: #5A3A22; }
.hunter_private, .targ_quote { color: #fff; background: #3D2B1A; }

/* ── Chat quote background ───────────────────── */
.cquote {
  background: rgba(61,43,26,0.65);
  color: #fff;
  border-left: 3px solid rgba(232,124,62,0.5);
}

/* ── Tabs ────────────────────────────────────── */
.tab_menu      { box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.tab_selected  { background: rgba(232,124,62,0.12); }

/* ── Modal menus ─────────────────────────────── */
.modal_mback    { background: rgba(255,255,255,0.04); }
.modal_mborder  { border-bottom: 1px solid rgba(255,255,255,0.07); }
.modal_selected { background: rgba(232,124,62,0.15); }
.modal_back     { background-color: rgba(0,0,0,0.65); }

/* ── Chat logs ───────────────────────────────── */
.mbubble   { color: #fff; background: rgba(61,43,26,0.65); }
.topic_log { background: rgba(70,55,30,0.55); color: #FFD9A8; }

/* ── Upload / progress ───────────────────────── */
.bprogress { background: #E87C3E; color: #fff; }

/* ── Notifications ───────────────────────────── */
.bnotify              { background: #C4561A; color: #fff; }
.foot_notify, .head_notify { border: 1px solid #fff; }

/* ── Date & secondary text ───────────────────── */
.sub_date         { color: #6B4E35; }
.sub_chat, .sub_priv { color: #7A4B2A; }
.sub_text, .list_mood { color: #6B4E35; }

/* ── Profile likes ───────────────────────────── */
.plikes { background-color: rgba(100,70,40,0.25); color: #fff; }

/* ── Spinner ─────────────────────────────────── */
.bspin { color: rgba(255,255,255,0.3); }

/* ── Special chat items ──────────────────────── */
.my_notice   { color: #fff; background: #C4561A; }
.system_text { background: rgba(232,124,62,0.07); color: #7A4B2A; }

/* ── Outside pages ───────────────────────────── */
.back_page  { background: #0e0704; color: #fff; }

/* ── Video ───────────────────────────────────── */
.post_video { background: rgb(0,0,0); }

/* ── Scrollbar styling ───────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: rgba(20,10,4,0.4); }
::-webkit-scrollbar-thumb        { background: rgba(122,75,42,0.6); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(232,124,62,0.7); }

/* ── Text selection ──────────────────────────── */
::selection      { background: rgba(232,124,62,0.35); color: #fff; }
::-moz-selection { background: rgba(232,124,62,0.35); color: #fff; }

/* ── Slider ──────────────────────────────────── */
.boom_slider .ui-widget-content { background: #3D2B1A; }
.boom_slider .ui-state-default  { background: #ccc !important; }
.boom_slider .ui-state-active   { background: #ccc !important; }
.boom_slider .ui-slider-range   { background: #7A4B2A; }

/* ── SelectBoxIt ─────────────────────────────── */
.selectboxit-list, .selectboxit-btn {
  background-color: rgba(0,0,0,0.5);
  border: 1px solid #3D2B1A;
  color: #fff;
}
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: #3D2B1A; color: #fff; }
.selectboxit-default-arrow { border-top: 4px solid #7A4B2A; }
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active { background: rgba(0,0,0,0.5); color: #fff; }
.selectboxit-options { background: #3D2B1A; color: #fff; }
.selectboxit-list .selectboxit-option-anchor { color: #7A4B2A; }

/* ── Custom overrides ────────────────────────── */
.modal_in  { border: 1px solid rgba(232,124,62,0.22); }
.card_menu { border: none; }
#intro_top { background: none; }