/* ============================================
   FORJAMU — WebEngine Template Override
   Unifies all internal pages with the home premium design
   ============================================ */

/* --- Google Fonts (same as home) --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* --- CSS Variables --- */
:root {
  --obsidian: #08080c;
  --void: #0c0c12;
  --forge-black: #111118;
  --steel-dark: #1a1a24;
  --steel: #2a2a38;
  --steel-light: #3d3d50;
  --ash: #6b6b80;
  --smoke: #9898a8;
  --bone: #d4d4dc;
  --ivory: #eaeaf0;
  --ember: #8b2500;
  --flame: #c43c1a;
  --fire: #e04a20;
  --blaze: #ff6030;
  --spark: #ff8a50;
  --gold: #c9981a;
  --gold-light: #e8b84a;
  --font-display: 'Cinzel', serif;
  --font-heading: 'Rajdhani', sans-serif;
  --font-body: 'Inter', 'PT Sans', sans-serif;
}

/* --- Reset defaults --- */
html {
  min-width: 0 !important;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--obsidian) !important;
  background-image: none !important;
  color: var(--ivory) !important;
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.6;
}

::selection {
  background: rgba(196, 60, 26, 0.4);
  color: var(--ivory);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-light); }

a {
  color: var(--flame) !important;
  transition: all 0.2s ease !important;
}
a:hover {
  color: var(--blaze) !important;
  text-decoration: none !important;
}

/* --- Top Bar --- */
.global-top-bar {
  background: rgba(8, 8, 12, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(196, 60, 26, 0.1) !important;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.global-top-bar-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.global-top-bar a {
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s ease !important;
  padding: 4px 12px;
}

.global-top-bar a:hover {
  color: var(--ivory) !important;
}

.global-top-bar-separator {
  color: var(--steel-light) !important;
  margin: 0 4px;
}

/* --- Navbar --- */
#navbar {
  background: rgba(17, 17, 24, 0.9) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(196, 60, 26, 0.15) !important;
  position: sticky;
  top: 35px;
  z-index: 999;
}

#navbar ul li a {
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 24px !important;
  position: relative;
}

#navbar ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--flame);
  transition: width 0.3s ease;
}

#navbar ul li a:hover {
  color: var(--ivory) !important;
}

#navbar ul li a:hover::after,
#navbar ul li a:focus::after {
  width: 60%;
}

/* --- Header / Logo --- */
#header {
  background: linear-gradient(180deg, var(--forge-black) 0%, var(--obsidian) 100%) !important;
  padding: 40px 0 20px !important;
  text-align: center;
  border-bottom: 1px solid rgba(196, 60, 26, 0.08);
}

/* Replace old MU logo with ForjaMU logo image */
#header a[href="/"] img,
#header a[href="https://forjamu.com/"] img {
  content: url('../img/logo-forjamu.png') !important;
  max-height: 120px !important;
  width: auto !important;
  filter: drop-shadow(0 0 30px rgba(196, 60, 26, 0.25)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  mix-blend-mode: lighten;
  transition: filter 0.3s ease;
}

#header a[href="/"] img:hover,
#header a[href="https://forjamu.com/"] img:hover {
  filter: drop-shadow(0 0 40px rgba(196, 60, 26, 0.4)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

.webengine-mu-logo {
  content: url('../img/logo-forjamu.png') !important;
  max-height: 120px !important;
  mix-blend-mode: lighten;
}

/* --- Hide Top Online ranking tab --- */
a[href*="rankings/online"],
a[href*="rankings/online/"] {
  display: none !important;
}

/* --- Hide player profile links everywhere --- */
a[href*="profile/player/"] {
  pointer-events: none;
  color: var(--smoke) !important;
  text-decoration: none !important;
  cursor: default;
}

/* --- Header Info (online, time) --- */
.header-info-container {
  background: var(--forge-black) !important;
  border-bottom: 1px solid rgba(196, 60, 26, 0.1);
}

.header-info {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
  background: transparent !important;
  color: var(--smoke) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem;
}

.header-info-block {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
}

.online-count {
  color: var(--flame) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-size: 1rem;
}

.webengine-online-bar {
  background: var(--steel-dark) !important;
  border-radius: 4px !important;
  overflow: hidden;
  height: 4px !important;
  margin: 4px 0 8px;
}

.webengine-online-bar-progress {
  background: linear-gradient(90deg, var(--flame), var(--blaze)) !important;
  border-radius: 4px !important;
  height: 100% !important;
  transition: width 0.5s ease;
}

/* --- Main Container --- */
#container {
  background: var(--forge-black) !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 30px 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  min-height: 60vh;
}

#content {
  padding: 20px 30px !important;
}

/* --- Page Titles --- */
.page-title {
  color: var(--ivory) !important;
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--flame), var(--gold), transparent) 1;
}

/* --- Tables (Rankings, data) --- */
.table {
  background: transparent !important;
  color: var(--ivory) !important;
  font-family: var(--font-body) !important;
  border-collapse: separate;
  border-spacing: 0;
}

.table > thead > tr > th {
  background: var(--steel-dark) !important;
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--flame) !important;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 12px 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  vertical-align: middle !important;
  font-size: 0.9rem;
  color: var(--bone) !important;
}

.table > tbody > tr {
  transition: background 0.15s ease;
}

.table > tbody > tr:hover {
  background: rgba(196, 60, 26, 0.06) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.015) !important;
}

.table-striped > tbody > tr:nth-of-type(odd):hover {
  background: rgba(196, 60, 26, 0.06) !important;
}

.table-bordered {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Rankings specific */
.rankings-table-place {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--flame) !important;
}

.rankings-table-place:nth-child(1) { color: var(--gold-light) !important; }

.rankings_menu {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rankings_menu a {
  display: inline-block;
  padding: 8px 20px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--smoke) !important;
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease !important;
}

.rankings_menu a:hover,
.rankings_menu a.active {
  color: var(--ivory) !important;
  background: rgba(196, 60, 26, 0.15) !important;
  border-color: var(--flame) !important;
}

.rankings-update-time {
  color: var(--ash) !important;
  font-size: 0.75rem;
  margin-bottom: 16px;
}

.rankings-class-image {
  filter: brightness(1.2) drop-shadow(0 0 4px rgba(196, 60, 26, 0.2));
  transition: filter 0.2s ease;
}

.rankings-class-image:hover {
  filter: brightness(1.4) drop-shadow(0 0 8px rgba(196, 60, 26, 0.4));
}

.online-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* --- Forms (Login, Register, UserCP) --- */
.form-control {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ivory) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
  padding: 10px 14px !important;
  height: auto !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus {
  border-color: var(--flame) !important;
  box-shadow: 0 0 0 2px rgba(196, 60, 26, 0.15) !important;
  outline: none !important;
  color: var(--ivory) !important;
  background: var(--steel-dark) !important;
}

.form-control::placeholder {
  color: var(--ash) !important;
}

.control-label {
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-group {
  margin-bottom: 16px;
}

.help-block {
  color: var(--ash) !important;
  font-size: 0.8rem;
}

/* --- Buttons --- */
.btn-primary {
  background: linear-gradient(135deg, var(--flame) 0%, #d4380d 100%) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 28px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: all 0.3s ease !important;
  position: relative;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(135deg, var(--fire) 0%, var(--flame) 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(196, 60, 26, 0.3), 0 4px 20px rgba(196, 60, 26, 0.2) !important;
  transform: translateY(-1px);
}

/* Small buttons (btn-xs) — no clip-path, readable */
.btn-xs.btn-primary,
.btn-xs.btn-primary:hover {
  clip-path: none !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  background: rgba(196, 60, 26, 0.15) !important;
  color: var(--flame) !important;
  border: 1px solid rgba(196, 60, 26, 0.3) !important;
}

.btn-xs.btn-primary:hover {
  background: rgba(196, 60, 26, 0.25) !important;
  color: var(--fire) !important;
}

/* Pull-right buttons in tables (Cambiar email/password) */
.myaccount-table .btn-xs.pull-right,
.table .btn-xs.pull-right {
  clip-path: none !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  background: rgba(196, 60, 26, 0.12) !important;
  color: var(--flame) !important;
  border: 1px solid rgba(196, 60, 26, 0.25) !important;
  transform: none !important;
}

.myaccount-table .btn-xs.pull-right:hover,
.table .btn-xs.pull-right:hover {
  background: rgba(196, 60, 26, 0.25) !important;
  color: var(--fire) !important;
}

.btn-default {
  background: transparent !important;
  border: 1px solid var(--steel-light) !important;
  color: var(--ivory) !important;
  font-family: var(--font-heading) !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
}

.btn-default:hover {
  border-color: var(--flame) !important;
  color: var(--flame) !important;
}

/* --- Alerts --- */
.alert-danger {
  background: rgba(196, 60, 26, 0.12) !important;
  border: 1px solid rgba(196, 60, 26, 0.3) !important;
  color: #ffb4a0 !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
}

.alert-success {
  background: rgba(34, 139, 34, 0.12) !important;
  border: 1px solid rgba(34, 139, 34, 0.3) !important;
  color: #a0ffb4 !important;
  border-radius: 0 !important;
}

.alert-warning {
  background: rgba(201, 152, 26, 0.12) !important;
  border: 1px solid rgba(201, 152, 26, 0.3) !important;
  color: var(--gold-light) !important;
  border-radius: 0 !important;
}

.alert-info {
  background: rgba(100, 149, 237, 0.12) !important;
  border: 1px solid rgba(100, 149, 237, 0.3) !important;
  color: #a0c4ff !important;
  border-radius: 0 !important;
}

/* --- Panels (News, content blocks) --- */
.panel-news {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
}

.panel-news:hover {
  border-color: rgba(196, 60, 26, 0.2) !important;
  box-shadow: 0 4px 20px rgba(196, 60, 26, 0.08) !important;
}

.panel-news .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.panel-news .panel-title {
  color: var(--ivory) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.2rem !important;
  font-weight: 600;
}

.panel-news .panel-body {
  color: var(--smoke) !important;
  font-size: 0.9rem;
  line-height: 1.7;
}

.panel-news .panel-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--ash) !important;
  font-size: 0.8rem;
}

/* --- Thumbnails / Cards --- */
.thumbnail {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

.thumbnail:hover {
  border-color: rgba(196, 60, 26, 0.2) !important;
}

/* --- Pagination --- */
.pagination > li > a,
.pagination > li > span {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-weight: 500;
  transition: all 0.2s ease !important;
}

.pagination > li > a:hover {
  background: rgba(196, 60, 26, 0.15) !important;
  border-color: var(--flame) !important;
  color: var(--ivory) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--flame) !important;
  border-color: var(--flame) !important;
  color: #fff !important;
}

/* --- Footer --- */
.footer {
  background: var(--void) !important;
  color: var(--ash) !important;
  font-family: var(--font-body) !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 30px !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(196, 60, 26, 0.1);
  font-size: 0.85rem;
}

.footer a {
  color: var(--smoke) !important;
}

.footer a:hover {
  color: var(--flame) !important;
  text-decoration: none !important;
}

.footer hr {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-social-link {
  opacity: 0.5;
  transition: all 0.3s ease;
  filter: grayscale(1);
}

.footer-social-link:hover {
  opacity: 1;
  filter: grayscale(0);
}

.webengine-powered {
  color: var(--ash) !important;
  font-size: 0.75rem;
  opacity: 0.5;
}

/* --- Donation / WebShop specific --- */
.donation-package,
.webshop-item {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 20px !important;
  transition: all 0.3s ease !important;
  text-align: center;
}

.donation-package:hover,
.webshop-item:hover {
  border-color: rgba(196, 60, 26, 0.3) !important;
  box-shadow: 0 0 20px rgba(196, 60, 26, 0.1) !important;
}

/* --- UserCP sidebar --- */
.usercp-sidebar,
.sidebar-menu {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.usercp-sidebar a,
.sidebar-menu a {
  color: var(--smoke) !important;
  padding: 10px 16px !important;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family: var(--font-heading) !important;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.15s ease !important;
}

.usercp-sidebar a:hover,
.usercp-sidebar a.active,
.sidebar-menu a:hover {
  color: var(--ivory) !important;
  background: rgba(196, 60, 26, 0.08) !important;
  border-left: 2px solid var(--flame);
}

/* --- Sidebar info blocks --- */
.header-info .row {
  color: var(--smoke) !important;
}

/* --- Well / Panel --- */
.well {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  color: var(--smoke) !important;
  box-shadow: none !important;
}

.panel {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.panel-default > .panel-heading {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--ivory) !important;
}

.panel-body {
  color: var(--smoke) !important;
}

/* --- Modal --- */
.modal-content {
  background: var(--forge-black) !important;
  border: 1px solid rgba(196, 60, 26, 0.2) !important;
  border-radius: 0 !important;
  color: var(--ivory) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- AdminCP button --- */
.admincp-button {
  background: var(--flame) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  padding: 6px 16px !important;
}

/* --- Castle Siege specific --- */
.cs-guild-info {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(196, 60, 26, 0.15) !important;
}

/* --- Profile pages --- */
.profile-header {
  background: linear-gradient(180deg, var(--steel-dark), var(--forge-black)) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* --- Responsive fixes --- */
@media (max-width: 768px) {
  #container {
    width: 100% !important;
    padding: 10px 0 !important;
  }

  #content {
    padding: 10px 15px !important;
  }

  .footer {
    width: 100% !important;
    padding: 20px 15px !important;
  }

  #navbar ul li a {
    padding: 12px 14px !important;
    font-size: 0.8rem !important;
  }

  .page-title {
    font-size: 1.4rem !important;
  }

  .table {
    font-size: 0.8rem;
  }
}

/* --- Selection style for inputs --- */
input::selection,
textarea::selection {
  background: rgba(196, 60, 26, 0.4);
  color: var(--ivory);
}

/* --- Dropdown menus --- */
.dropdown-menu {
  background: var(--forge-black) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
}

.dropdown-menu > li > a {
  color: var(--smoke) !important;
}

.dropdown-menu > li > a:hover {
  background: rgba(196, 60, 26, 0.1) !important;
  color: var(--ivory) !important;
}

/* --- Breadcrumbs --- */
.breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: 0.8rem;
}

.breadcrumb > li + li:before {
  color: var(--ash) !important;
}

/* --- Labels / Badges --- */
.label-primary {
  background: var(--flame) !important;
}

.badge {
  background: var(--flame) !important;
}

/* --- Text colors override --- */
.text-muted {
  color: var(--ash) !important;
}

.text-primary {
  color: var(--flame) !important;
}

.text-success {
  color: #a0ffb4 !important;
}

.text-danger {
  color: #ffb4a0 !important;
}

/* --- Nav tabs (used in some modules) --- */
.nav-tabs {
  border-bottom: 2px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.nav-tabs > li {
  flex: 1 !important;
  text-align: center !important;
}

.nav-tabs > li > a {
  color: var(--smoke) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  padding: 10px 20px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.nav-tabs > li > a:hover {
  background: rgba(196, 60, 26, 0.08) !important;
  border: none !important;
  color: var(--ivory) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--flame) !important;
  color: var(--ivory) !important;
}

/* --- Progress bars --- */
.progress {
  background: var(--steel-dark) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--flame), var(--blaze)) !important;
  box-shadow: none !important;
}

/* --- Input groups --- */
.input-group-addon {
  background: var(--steel) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--smoke) !important;
  border-radius: 0 !important;
}

/* --- Close button (modals) --- */
.close {
  color: var(--smoke) !important;
  opacity: 0.6;
  text-shadow: none !important;
}

.close:hover {
  color: var(--ivory) !important;
  opacity: 1;
}

/* --- List groups --- */
.list-group-item {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--smoke) !important;
}

.list-group-item:hover {
  background: rgba(196, 60, 26, 0.06) !important;
}

/* --- Fix number inputs --- */
input[type=text],
input[type=password],
input[type=number],
input[type=email],
textarea,
select {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ivory) !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease !important;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus,
select:focus {
  border-color: var(--flame) !important;
  box-shadow: 0 0 0 2px rgba(196, 60, 26, 0.15) !important;
  outline: none !important;
}

select option {
  background: var(--forge-black);
  color: var(--ivory);
}

/* ============================================
   DONATION / PAYMENT PAGES
   ============================================ */

/* Donation main - payment method cards */
.thumbnail {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  transition: all 0.3s ease !important;
  position: relative;
}

.thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.thumbnail:hover {
  border-color: rgba(196, 60, 26, 0.4) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(196, 60, 26, 0.15) !important;
}

.thumbnail:hover::after {
  border-color: var(--flame);
}

.thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.9);
  transition: filter 0.3s ease;
}

.thumbnail:hover img {
  filter: brightness(1.1);
}

/* MercadoPago / PayPal gateway containers */
.paypal-gateway-container {
  width: 100%;
  margin-bottom: 16px;
}

.paypal-gateway-content {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  overflow: auto;
  transition: all 0.3s ease;
}

.paypal-gateway-content:hover {
  border-color: rgba(196, 60, 26, 0.2) !important;
  box-shadow: 0 4px 20px rgba(196, 60, 26, 0.08);
}

.paypal-gateway-logo {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-radius: 0 !important;
  height: 60px !important;
  margin-bottom: 16px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.mercadopago-gateway-logo {
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 0.03) url('../img/donation/mercadopago.png') no-repeat center;
  background-size: contain;
  margin-bottom: 16px;
  border-radius: 0;
}

.paypal-gateway-form {
  width: 100%;
  margin: 16px auto !important;
  text-align: center;
}

.paypal-gateway-form div {
  color: var(--ivory) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.paypal-gateway-conversion-rate {
  color: var(--smoke) !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
}

.paypal-gateway-continue {
  text-align: center;
  margin-top: 16px !important;
}

.paypal-gateway-continue input[type=submit] {
  background: linear-gradient(135deg, var(--flame) 0%, #d4380d 100%) !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 32px !important;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: all 0.3s ease;
}

.paypal-gateway-continue input[type=submit]:hover {
  background: linear-gradient(135deg, var(--fire) 0%, var(--flame) 100%) !important;
  box-shadow: 0 0 30px rgba(196, 60, 26, 0.3);
}

/* btn-success override for MercadoPago donate buttons */
.btn-success {
  background: linear-gradient(135deg, var(--flame) 0%, #d4380d 100%) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 32px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: all 0.3s ease !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: linear-gradient(135deg, var(--fire) 0%, var(--flame) 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(196, 60, 26, 0.3), 0 4px 20px rgba(196, 60, 26, 0.2) !important;
  transform: translateY(-1px);
}

/* Page content wrapper */
.page-content {
  color: var(--ivory) !important;
}

/* ============================================
   LOGIN / REGISTER PAGES
   ============================================ */

/* Center login/register forms better */
.form-horizontal {
  max-width: 500px;
  margin: 0 auto;
  background: var(--steel-dark);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 30px;
}

/* ============================================
   USERCP PAGES
   ============================================ */

/* Sidebar for UserCP */
.col-xs-4 .page-title {
  font-size: 1rem !important;
  margin-bottom: 10px !important;
}

/* ============================================
   GENERAL LAYOUT POLISH
   ============================================ */

/* Smooth page transition feel */
#content {
  animation: fadeInPage 0.4s ease-out;
}

@keyframes fadeInPage {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Better link colors in content */
#content a {
  color: var(--flame) !important;
  transition: color 0.2s ease !important;
}

#content a:hover {
  color: var(--blaze) !important;
}

/* Image polish */
#content img {
  max-width: 100%;
  height: auto;
}

/* Horizontal rules */
hr {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Fix text visibility on all color/text paragraphs */
p, li, span, div {
  color: inherit;
}

#content .col-xs-12,
#content .col-xs-8,
#content .col-xs-4,
#content .col-xs-6 {
  color: var(--ivory);
}

/* ============================================
   MOBILE RESPONSIVE OVERRIDE
   ============================================ */

@media (max-width: 768px) {
  .global-top-bar-content {
    padding: 0 10px;
  }

  .global-top-bar a {
    font-size: 0.75rem;
    padding: 4px 6px;
  }

  #navbar {
    position: relative;
    top: 0;
  }

  #navbar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #navbar ul li a {
    padding: 10px 12px !important;
    font-size: 0.75rem !important;
  }

  #container {
    width: 100% !important;
    padding: 10px 0 !important;
  }

  #content {
    padding: 15px !important;
  }

  .form-horizontal {
    padding: 20px 15px;
  }

  .page-title {
    font-size: 1.3rem !important;
  }

  .footer {
    width: 100% !important;
    padding: 20px 15px !important;
  }

  .paypal-gateway-form div {
    font-size: 1.1rem !important;
  }

  .paypal-gateway-content {
    padding: 16px !important;
  }

  .col-xs-4 {
    width: 100% !important;
    margin-bottom: 16px;
  }

  /* Stack donation cards vertically on mobile */
  .row .col-xs-4 .thumbnail {
    margin-bottom: 12px;
  }

  .panel-sidebar {
    margin-bottom: 12px;
  }

  .rankings_menu a {
    font-size: 0.7rem !important;
    padding: 8px 10px !important;
  }

  /* Mobile: Registration form — full width labels */
  .form-horizontal .control-label {
    text-align: left !important;
    padding-bottom: 4px !important;
  }

  .form-horizontal .col-sm-4,
  .form-horizontal .col-sm-8,
  .form-horizontal .col-sm-offset-4 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 10px !important;
  }

  .col-xs-8.col-xs-offset-2 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 15px !important;
  }

  /* Mobile: header info bar smaller */
  .header-info-container {
    font-size: 0.75rem !important;
  }

  /* Mobile: sidebar panels full width */
  .col-xs-4.sidebar,
  .sidebar {
    width: 100% !important;
    float: none !important;
  }

  .col-xs-8 {
    width: 100% !important;
    float: none !important;
  }

  /* Mobile: UserCP panel menu */
  .panel-usercp ul li a {
    font-size: 11px !important;
    padding: 12px 14px !important;
  }

  .panel-usercp ul li a::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 11px !important;
  }
}

/* Hide "Powered by WebEngine" everywhere */
.webengine-powered,
a[href*="webenginecms.org"] {
  display: none !important;
}

/* ============================================
   PANEL SIDEBAR (News page, UserCP sidebar)
   ============================================ */

.panel-sidebar,
.panel-sidebar-events {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ivory) !important;
}

.panel-sidebar > .panel-heading,
.panel-sidebar-events > .panel-heading {
  background: rgba(196, 60, 26, 0.08) !important;
  color: var(--ivory) !important;
  border: none !important;
  border-bottom: 1px solid rgba(196, 60, 26, 0.12) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  padding: 12px 16px !important;
}

.panel-sidebar > .panel-body,
.panel-sidebar-events > .panel-body {
  background: transparent !important;
  color: var(--smoke) !important;
  padding: 12px 16px !important;
}

.panel-sidebar .smalltext,
.panel-sidebar-events .smalltext {
  color: var(--ash) !important;
  font-size: 0.8rem;
}

.panel-sidebar a,
.panel-sidebar-events a {
  color: var(--flame) !important;
}

.panel-sidebar a:hover,
.panel-sidebar-events a:hover {
  color: var(--blaze) !important;
}

/* Sidebar banner */
.sidebar-banner {
  box-shadow: none !important;
}

.sidebar-banner img {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ============================================
   HOME NEWS BLOCK (WebEngine /news page)
   ============================================ */

.home-news-block,
.home-news-block-articles {
  color: var(--ivory) !important;
}

.home-news-block-article-title,
.home-news-block-article-title a {
  color: var(--ivory) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  font-size: 1.1rem;
}

.home-news-block-article-title a:hover {
  color: var(--flame) !important;
}

.home-news-block-article-date {
  color: var(--ash) !important;
  font-size: 0.8rem;
}

.home-news-block-article-body,
.home-news-block-article-body p {
  color: var(--smoke) !important;
}

.home-news-block-article-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.home-news-block-article-footer a {
  color: var(--flame) !important;
}

/* ============================================
   DOWNLOADS PAGE
   ============================================ */

.panel-downloads,
.panel.panel-downloads {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
}

.panel-downloads .panel-heading,
.panel-downloads > .panel-heading {
  background: rgba(196, 60, 26, 0.08) !important;
  color: var(--ivory) !important;
  border-bottom: 1px solid rgba(196, 60, 26, 0.12) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel-downloads .panel-body {
  background: transparent !important;
  color: var(--smoke) !important;
}

.panel-downloads .panel-title {
  color: var(--ivory) !important;
  font-family: var(--font-heading) !important;
}

.download-description {
  color: var(--smoke) !important;
}

/* ============================================
   RANKINGS TABLE (non-Bootstrap variant)
   ============================================ */

.rankings-table,
table.rankings-table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.rankings-table tr td,
.rankings-table tr th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--bone) !important;
  padding: 10px 14px !important;
  background: transparent !important;
}

.rankings-table tr:first-child td,
.rankings-table thead td,
.rankings-table thead th {
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  border-bottom: 2px solid rgba(196, 60, 26, 0.2) !important;
  border-top: none !important;
  background: rgba(196, 60, 26, 0.04) !important;
}

.rankings-table tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Rankings class filter */
.rankings-class-filter,
.rankings-class-filter select {
  background: var(--steel-dark) !important;
  color: var(--ivory) !important;
  border: 1px solid var(--steel) !important;
  font-family: var(--font-body) !important;
}

/* ============================================
   GENERAL TABLE UI (used in various modules)
   ============================================ */

.general-table-ui {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.general-table-ui tr td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--bone) !important;
  padding: 10px 14px !important;
}

.general-table-ui tr:first-child td {
  color: var(--smoke) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  background: rgba(196, 60, 26, 0.04) !important;
  border-bottom: 2px solid rgba(196, 60, 26, 0.2) !important;
}

.general-table-ui tr:nth-child(2n) td {
  background: rgba(255, 255, 255, 0.015) !important;
}

.general-table-ui tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ============================================
   USERCP PANEL & MODULES
   ============================================ */

/* Sidebar */
.panel-usercp {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
}

.panel-usercp > .panel-heading {
  background: rgba(196, 60, 26, 0.08) !important;
  color: var(--ivory) !important;
  border-bottom: 1px solid rgba(196, 60, 26, 0.12) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  padding: 12px 16px !important;
}

.panel-usercp ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.panel-usercp ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.panel-usercp ul li a {
  color: var(--smoke) !important;
  padding: 10px 16px !important;
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
}

.panel-usercp ul li a:hover,
.panel-usercp ul li a:active,
.panel-usercp ul li a:focus {
  color: var(--ivory) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  text-decoration: none !important;
}

.panel-usercp ul li.active a,
.panel-usercp ul li.current a {
  color: var(--flame) !important;
  border-left: 3px solid var(--flame) !important;
  background: rgba(196, 60, 26, 0.05) !important;
}

/* Add Stats Panel */
.panel-addstats {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  padding: 20px !important;
  color: var(--ivory) !important;
}

.panel-addstats .character-name {
  color: var(--ivory) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

.panel-addstats label {
  color: var(--smoke) !important;
}

.panel-addstats input[type="text"],
.panel-addstats input[type="number"] {
  background: var(--obsidian) !important;
  border: 1px solid var(--steel) !important;
  color: var(--ivory) !important;
}

/* My Account Table */
.myaccount-table {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.myaccount-table tr td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--bone) !important;
  padding: 10px 14px !important;
}

.myaccount-table tr td:first-child {
  color: var(--ivory) !important;
  font-weight: 600;
  font-family: var(--font-heading) !important;
}

/* My Account Character Block */
.myaccount-character-block {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.myaccount-character-block a {
  color: var(--flame) !important;
}

/* ============================================
   TOS / LEGAL PAGES
   ============================================ */

.tos_list {
  color: var(--ivory) !important;
}

.tos_list li {
  color: var(--flame) !important;
  margin-bottom: 12px !important;
}

.tos_list li p {
  color: var(--smoke) !important;
  line-height: 1.6;
}

/* ============================================
   GENERIC PANEL OVERRIDES (catch-all)
   ============================================ */

.panel {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.panel > .panel-heading {
  background: rgba(196, 60, 26, 0.08) !important;
  color: var(--ivory) !important;
  border-bottom: 1px solid rgba(196, 60, 26, 0.12) !important;
  border-radius: 0 !important;
}

.panel > .panel-body {
  background: transparent !important;
  color: var(--smoke) !important;
}

.panel > .panel-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--ash) !important;
}

/* ============================================
   PROFILES (profiles.css overrides)
   ============================================ */

.profiles_guild_card,
.profiles_player_card {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--ivory) !important;
}

.profiles_guild_card a,
.profiles_player_card a {
  color: var(--flame) !important;
}

/* ============================================
   EVENT SCHEDULE (sidebar)
   ============================================ */

.event-schedule-closed {
  color: var(--ash) !important;
}

.event-schedule-open {
  color: var(--success, #4ecc6e) !important;
}

.event-schedule-inprogress {
  color: var(--gold-light) !important;
}

/* ============================================
   MODULE REQUIREMENTS & MISC
   ============================================ */

.module-requirements {
  color: var(--smoke) !important;
  font-size: 0.85rem;
}

/* Well (Bootstrap) */
.well {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  color: var(--smoke) !important;
  box-shadow: none !important;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent !important;
  color: var(--ash) !important;
}

.breadcrumb > li + li::before {
  color: var(--ash) !important;
}

.breadcrumb > .active {
  color: var(--smoke) !important;
}

/* Labels */
.label-default { background: var(--steel) !important; color: var(--ivory) !important; }
.label-primary { background: var(--flame) !important; color: #fff !important; }
.label-success { background: #22c55e !important; color: #000 !important; }
.label-info { background: #3b82f6 !important; color: #fff !important; }
.label-warning { background: var(--gold) !important; color: #000 !important; }
.label-danger { background: #cc4e4e !important; color: #fff !important; }

/* Dropdown menus */
.dropdown-menu {
  background: var(--forge-black) !important;
  border: 1px solid var(--steel) !important;
}

.dropdown-menu > li > a {
  color: var(--smoke) !important;
}

.dropdown-menu > li > a:hover {
  background: var(--steel-dark) !important;
  color: var(--ivory) !important;
}

/* Tooltip */
.tooltip-inner {
  background: var(--forge-black) !important;
  color: var(--ivory) !important;
  border: 1px solid var(--steel) !important;
}

/* Progress bars */
.progress {
  background: var(--steel-dark) !important;
  border-radius: 0 !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--flame), var(--fire)) !important;
}

/* ────────────────────────────────────────
   HIDE TOS / TERMS LINKS
   ──────────────────────────────────────── */

/* Hide "Al registrarse acepta nuestros Terminos" text below register form */
a[href*="/tos"] {
  display: none !important;
}

/* Hide the parent text that contains the TOS link on register page */
form .help-block a[href*="/tos"],
.register-tos,
p:has(> a[href*="/tos"]) {
  display: none !important;
}

/* Footer TOS link */
footer a[href*="/tos"],
#footer a[href*="/tos"],
.footer a[href*="/tos"] {
  display: none !important;
}

/* ────────────────────────────────────────
   HIDE SIDEBAR DOWNLOAD BANNER
   ──────────────────────────────────────── */
.sidebar-banner {
  display: none !important;
}

/* Hide YouTube video embed on downloads page */
iframe[src*="youtube"],
iframe[src*="youtu.be"],
.embed-responsive,
.panel-downloads iframe {
  display: none !important;
}

/* Hide "Video" heading if it exists */
h2:has(+ .embed-responsive),
h3:has(+ .embed-responsive) {
  display: none !important;
}

/* ────────────────────────────────────────
   USERCP PANEL — PREMIUM MENU
   ──────────────────────────────────────── */

.panel-usercp ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.panel-usercp ul li {
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.2s !important;
}

.panel-usercp ul li:last-child {
  border-bottom: none !important;
}

.panel-usercp ul li:hover {
  background: rgba(196, 60, 26, 0.06) !important;
}

/* Hide old ugly icon images */
.panel-usercp ul li img {
  display: none !important;
}

/* Menu links — uppercase, tracked, icon via ::before */
.panel-usercp ul li a {
  color: var(--smoke) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  transition: all 0.25s ease !important;
}

.panel-usercp ul li a:hover {
  color: var(--ivory) !important;
  padding-left: 20px !important;
}

/* Unicode icon base */
.panel-usercp ul li a::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: "Segoe UI Symbol", "Apple Color Emoji", sans-serif !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.25s ease !important;
}

/* Mi Cuenta */
.panel-usercp ul li a[href*="myaccount"]::before {
  content: '\2726' !important;
  background: rgba(235, 225, 210, 0.08) !important;
  color: var(--ivory) !important;
  border: 1px solid rgba(235, 225, 210, 0.12) !important;
}

/* Destrabar personaje */
.panel-usercp ul li a[href*="unstick"]::before {
  content: '\26A1' !important;
  background: rgba(78, 204, 110, 0.08) !important;
  color: #4ecc6e !important;
  border: 1px solid rgba(78, 204, 110, 0.12) !important;
}

/* Tienda de Creditos */
.panel-usercp ul li a[href*="donation"]::before {
  content: '\2B23' !important;
  background: rgba(196, 60, 26, 0.08) !important;
  color: var(--flame) !important;
  border: 1px solid rgba(196, 60, 26, 0.12) !important;
}

/* Comprar VIP */
.panel-usercp ul li a[href*="buyvip"]::before {
  content: '\2605' !important;
  background: rgba(201, 152, 26, 0.08) !important;
  color: #c9981a !important;
  border: 1px solid rgba(201, 152, 26, 0.12) !important;
}

/* MARKETPLACE — featured item, stands out */
.panel-usercp ul li a[href*="mercado"]::before {
  content: '\25C8' !important;
  background: rgba(51, 153, 255, 0.12) !important;
  color: #3399ff !important;
  border: 1px solid rgba(51, 153, 255, 0.2) !important;
}

.panel-usercp ul li a[href*="mercado"] {
  color: #3399ff !important;
  position: relative !important;
}

.panel-usercp ul li a[href*="mercado"]::after {
  content: '\2192' !important;
  margin-left: auto !important;
  font-size: 14px !important;
  color: rgba(51, 153, 255, 0.5) !important;
  transition: all 0.25s ease !important;
}

.panel-usercp ul li a[href*="mercado"]:hover {
  color: #5cb3ff !important;
  background: rgba(51, 153, 255, 0.04) !important;
}

.panel-usercp ul li a[href*="mercado"]:hover::after {
  color: #5cb3ff !important;
  transform: translateX(4px) !important;
}

/* Hover glow on icons */
.panel-usercp ul li a:hover::before {
  transform: scale(1.1) !important;
}

/* ────────────────────────────────────────
   DONATION PAGE
   ──────────────────────────────────────── */

/* Payment method cards */
.donation-package,
.panel-donation,
.donation-method,
.col-xs-6 > .panel,
.col-md-6 > .panel {
  background: var(--steel-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

.donation-package:hover,
.panel-donation:hover,
.col-xs-6 > .panel:hover,
.col-md-6 > .panel:hover {
  border-color: rgba(196, 60, 26, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Payment method images - make them cleaner */
.donation-method img,
.panel-donation img,
img[src*="PayPal"],
img[src*="paypal"],
img[src*="MercadoPago"],
img[src*="mercadopago"] {
  max-width: 180px !important;
  height: auto !important;
  filter: brightness(1.1) !important;
  border-radius: 8px !important;
  margin: 10px auto !important;
  display: block !important;
}

/* Credit package buttons */
.donation-package .btn,
.panel-donation .btn,
input[type="submit"][name*="donate"],
button[name*="donate"] {
  background: var(--flame) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 24px !important;
  transition: all 0.2s !important;
}

.donation-package .btn:hover,
.panel-donation .btn:hover {
  background: var(--fire) !important;
}

/* Package price styling */
.donation-package h3,
.donation-package .price,
.panel-donation h3 {
  color: var(--flame) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* Package description */
.donation-package p,
.panel-donation p {
  color: var(--smoke) !important;
}

/* Hide social icons in footer (FB, IG) */
.footer-social-link img[src*="facebook"],
.footer-social-link img[src*="instagram"],
a.footer-social-link[href*="facebook"],
a.footer-social-link[href*="instagram"] {
  display: none !important;
}

/* Hide footer privacy, refunds, TOS links */
footer a[href*="/privacy"],
footer a[href*="/refunds"],
footer a[href*="/tos"],
.footer a[href*="/privacy"],
.footer a[href*="/refunds"],
.footer a[href*="/tos"] {
  display: none !important;
}

/* Hide separators next to hidden links */
footer .footer-container a[href*="/privacy"] + span,
footer .footer-container a[href*="/refunds"] + span,
footer .footer-container a[href*="/tos"] + span {
  display: none !important;
}

/* Make Discord social icon bigger */
.footer-social-link img[src*="discord"] {
  width: 60px !important;
}

/* =============================================
   HIDE SERVER INFO & CASTLE SIEGE FROM SIDEBAR
   ============================================= */

/* Castle Siege widget — always hide */
.castle-owner-widget,
.panel.castle-owner-widget,
div[class*="castle-owner"] {
  display: none !important;
}

/* Server info panel — hide the panel that contains .table (not .panel-usercp) */
.panel-sidebar:has(.table):not(.panel-usercp) {
  display: none !important;
}

/* Fallback for browsers without :has() — hide by structure */
.col-xs-4 > .panel-sidebar:nth-child(n+3) {
  display: none !important;
}

/* Nuclear fallback: hide all sidebar-banner images and extra panels */
.col-xs-4 > .panel-sidebar .table {
  display: none !important;
}

/* If .table is hidden, hide its parent panel too */
.col-xs-4 > .panel-sidebar:not(.panel-usercp):last-of-type {
  display: none !important;
}