/*
	Theme: DPG Retro
	Prometheus Version: 1.10.1
	Author: DarkPyro (DPG)
	Desc: "Cool Blue Gamer" retro look — a 1:1 port of the dpg_retro SourceBans++
	      theme onto Prometheus 1.10.1's real (Bootstrap-4) selectors. Near-black
	      backgrounds + neon grid + CRT scanlines + drifting starfield, neon-cyan
	      (#00d4ff) accents & glow, cyan->blue gradients, Orbitron/Rajdhani/Share
	      Tech Mono + the local TF2 brand font on the page title. Loaded AFTER
	      compiled/css/site.css, so every rule uses !important.

	NOTE: The source theme's floating particles are reproduced via
	      themes/dpg-retro/theme.js (spawns #particles-container + .particle),
	      loaded by a small per-theme theme.js hook added to inc/footer.php.
	      Honours prefers-reduced-motion (JS skips spawn; CSS hides the layer).
*/

/* ============================================================================
   FONTS — Orbitron (display), Rajdhani (body), Share Tech Mono (mono).
   The source also declares these local faces but never applies them; kept for parity.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

@font-face { font-family: 'danub';  src: url('DANUB___.TTF'); font-display: swap; }
@font-face { font-family: 'danube'; src: url('DANUBE__.TTF'); font-display: swap; }

/* ============================================================================
   KEYFRAMES
============================================================================ */
@keyframes dpgFadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dpgTextGlow {
	0%, 100% { text-shadow: 0 0 6px rgba(0, 212, 255, 0.45); }
	50%      { text-shadow: 0 0 16px rgba(0, 212, 255, 0.85), 0 0 26px rgba(0, 212, 255, 0.45); }
}
@keyframes dpgGlowPulse {
	0%, 100% { box-shadow: 0 0 6px rgba(0, 212, 255, 0.45); }
	50%      { box-shadow: 0 0 14px rgba(0, 212, 255, 0.85); }
}
@keyframes floatParticle {
	0%, 100% { transform: translateY(0) translateX(0);       opacity: 0.30; }
	25%      { transform: translateY(-30px) translateX(10px);  opacity: 0.60; }
	50%      { transform: translateY(-50px) translateX(-10px); opacity: 0.40; }
	75%      { transform: translateY(-30px) translateX(15px);  opacity: 0.50; }
}

/* ============================================================================
   PALETTE (mirrors the :root block of the source dpg_retro main.css)
============================================================================ */
:root {
	--neon-cyan: #00d4ff;
	--neon-blue: #0066ff;
	--bg-primary: #0a0a12;
	--bg-secondary: #0d0d18;
	--bg-tertiary: #12121f;
	--bg-card: #0d0d18;
	--bg-hover: rgba(0, 212, 255, 0.10);
	--text-primary: #e0e6ed;
	--text-secondary: #8892a0;
	--text-muted: #5a6270;
	--status-active: #00ff88;
	--status-banned: #ff4444;
	--status-warning: #ffaa00;
	--border-color: rgba(0, 212, 255, 0.20);
	--border-strong: rgba(0, 212, 255, 0.45);
	--glow-cyan: 0 0 20px rgba(0, 212, 255, 0.30);
	--glow-cyan-strong: 0 0 22px rgba(0, 212, 255, 0.55);
	--gradient-primary: linear-gradient(135deg, #00d4ff, #0066ff);
	--gradient-primary-rev: linear-gradient(135deg, #0066ff, #00d4ff);
	--gradient-header: linear-gradient(135deg, #12121f, #0d0d18);

	--font-display: 'Orbitron', 'Open Sans', Verdana, Arial, sans-serif;
	--font-body: 'Rajdhani', 'Open Sans', Verdana, Arial, sans-serif;
	--font-mono: 'Share Tech Mono', 'Consolas', monospace;
}

/* ============================================================================
   BACKDROP — html: dark + drifting neon starfield;  body: static neon grid;
   body::before: CRT scanline overlay on top.  (No z-index juggling needed:
   html canvas < body grid < page content < scanline overlay.)
============================================================================ */
html {
	background-color: var(--bg-primary) !important;
	background-image:
		linear-gradient(rgba(0, 212, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px) !important;
	background-size: 50px 50px, 50px 50px !important;
	background-attachment: fixed !important;
}

html, body {
	color: var(--text-primary) !important;
	font-family: var(--font-body) !important;
}

body { background-color: transparent !important; }

/* floating particles — DOM is spawned by themes/dpg-retro/theme.js */
#particles-container {
	position: fixed !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	pointer-events: none !important;
	overflow: hidden !important;
	z-index: -1 !important;
}
.particle {
	position: absolute !important;
	width: 4px; height: 4px;
	background: var(--neon-cyan) !important;
	border-radius: 50% !important;
	opacity: 0.30;
	box-shadow: 0 0 6px rgba(0, 212, 255, 0.7) !important;
	animation: floatParticle 20s infinite ease-in-out;
}

body::before {
	content: '' !important;
	position: fixed !important;
	top: 0; left: 0; right: 0; bottom: 0 !important;
	background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.045) 2px 4px) !important;
	pointer-events: none !important;
	z-index: 9999 !important;
}

.wrap { background-color: transparent !important; }
.content { color: var(--text-secondary) !important; animation: dpgFadeInUp 0.5s ease both; }

/* ----- links / rules / selection ----- */
a { color: var(--neon-cyan) !important; transition: color .2s ease, text-shadow .2s ease !important; }
a:hover, a:focus { color: #ffffff !important; text-shadow: 0 0 10px var(--neon-cyan) !important; }
hr { border: 0 !important; border-top: 1px solid var(--border-color) !important; }
::selection { background: rgba(0, 212, 255, 0.30); color: #ffffff; }
::-moz-selection { background: rgba(0, 212, 255, 0.30); color: #ffffff; }

/* ============================================================================
   TYPOGRAPHY
   .header is the big page title (40px) — gets the TF2 brand font + animated glow.
============================================================================ */
.header {
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	letter-spacing: 1px !important;
	text-shadow: 0 0 20px rgba(0, 212, 255, 0.35) !important;
	animation: dpgTextGlow 3s ease-in-out infinite;
}
h1 { color: var(--neon-cyan) !important; font-family: var(--font-display) !important; letter-spacing: 1px !important; }
h2 { color: var(--text-primary) !important; font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
h3 { color: var(--neon-cyan) !important; font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
h4, h5 { color: var(--text-primary) !important; font-family: var(--font-display) !important; }
h6 { color: var(--neon-cyan) !important; font-family: var(--font-display) !important; text-transform: uppercase !important; }
.featured-header {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border-bottom: 1px solid var(--border-color) !important;
	text-shadow: 0 0 12px rgba(0, 212, 255, 0.35) !important;
}

/* ============================================================================
   NAVBAR  (.navbar .nav-item .nav-link — real Bootstrap-4 structure)
============================================================================ */
.navbar { font-family: var(--font-display) !important; min-height: 0 !important; padding: 0 !important; }
.navbar-inverse {
	background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary)) !important;
	border-bottom: 1px solid var(--border-color) !important;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.55) !important;
}
.navbar .nav-item .nav-link {
	position: relative !important;
	color: var(--text-secondary) !important;
	background-color: transparent !important;
	background-image: none !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	/* compact, SourceBans-sized tabs (base is 18px text + 30px padding = far too tall) */
	font-size: 12px !important;
	line-height: 48px !important;
	padding: 0 15px !important;
	transition: color .25s ease, background-color .25s ease, text-shadow .25s ease !important;
}
.navbar .nav-item .nav-link i, .navbar .nav-item .nav-link svg { font-size: 12px !important; }
/* centered gradient underline — uses ::before so it never collides with the
   Bootstrap dropdown caret (.dropdown-toggle::after); grows from the middle */
.navbar .nav-item .nav-link::before {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	bottom: 0 !important;
	width: 0 !important;
	height: 3px !important;
	transform: translateX(-50%) !important;
	background: var(--gradient-primary) !important;
	transition: width .3s ease, box-shadow .3s ease !important;
	pointer-events: none !important;
}
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link:focus {
	color: var(--neon-cyan) !important;
	background-color: var(--bg-hover) !important;
	text-shadow: 0 0 10px var(--neon-cyan) !important;
}
.navbar .nav-item .nav-link:hover::before,
.navbar .nav-item .nav-link:focus::before { width: 80% !important; }
/* active tab: white text, a bottom-to-top cyan glow, full-width glowing line */
.navbar .nav-item.active .nav-link {
	color: #ffffff !important;
	background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.20)) !important;
}
.navbar .nav-item.active .nav-link::before {
	width: 100% !important;
	box-shadow: 0 0 10px var(--neon-cyan), 0 0 18px rgba(0, 212, 255, 0.55) !important;
}
/* navbar brand logo (pyro-logo.png) removed entirely — unwanted */
.navbar-brand { display: none !important; }

/* ============================================================================
   BUTTONS
============================================================================ */
.btn-prom {
	background-color: var(--bg-tertiary) !important;
	background-image: none !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all .2s ease !important;
}
.btn-prom:hover, .btn-prom:focus {
	background-color: var(--bg-hover) !important;
	color: var(--neon-cyan) !important;
	border-color: var(--border-strong) !important;
	box-shadow: var(--glow-cyan) !important;
	transform: translateY(-1px) !important;
}
.btn-default {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
	background-color: var(--bg-hover) !important;
	color: var(--neon-cyan) !important;
	border-color: var(--border-strong) !important;
}
button.close, .close { color: var(--neon-cyan) !important; opacity: .8 !important; text-shadow: 0 0 8px var(--neon-cyan) !important; }
button.close:hover, .close:hover { opacity: 1 !important; }

/* shine sweep for the primary action buttons */
.btn-prom::before, .buy-btn::before, .categoryLink::before {
	content: '' !important;
	position: absolute !important;
	top: 0; left: -100% !important;
	width: 100%; height: 100% !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
	transition: left .5s ease !important;
	pointer-events: none !important;
}
.btn-prom:hover::before, .buy-btn:hover::before, .categoryLink:hover::before { left: 100% !important; }

/* ============================================================================
   STORE — boxes, prices, buy button, categories
============================================================================ */
.store-box {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--glow-cyan) !important;
	transition: box-shadow .25s ease, transform .25s ease !important;
}
.store-box:hover { box-shadow: var(--glow-cyan-strong) !important; transform: translateY(-2px) !important; }
.store-box-header {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	letter-spacing: 1px !important;
	border-bottom: 1px solid var(--border-color) !important;
	border-left: 3px solid var(--neon-cyan) !important;
	text-shadow: 0 0 12px rgba(0, 212, 255, 0.35) !important;
	margin-bottom: 20px;
}
.store-box .store-box-upper span {
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	border-bottom: 1px solid var(--border-color) !important;
	text-shadow: 0 0 14px rgba(0, 212, 255, 0.4) !important;
}
.store-box .store-box-upper ul li { border-top: 1px solid var(--border-color) !important; }
.store-box .store-box-upper ul li:last-child { border-bottom: 1px solid var(--border-color) !important; }
.store-box .store-box-lower { color: var(--text-secondary) !important; }

.buy-btn {
	background: var(--gradient-primary) !important;
	background-color: #00d4ff !important;
	color: #ffffff !important;
	border: 1px solid var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all .25s ease !important;
}
.buy-btn:hover, .buy-btn:focus {
	background: var(--gradient-primary-rev) !important;
	background-color: #0066ff !important;
	color: #ffffff !important;
	border-color: var(--neon-cyan) !important;
	box-shadow: var(--glow-cyan-strong) !important;
	transform: translateY(-2px) !important;
}

.categoryLink {
	background: var(--gradient-primary) !important;
	background-color: #00d4ff !important;
	color: #ffffff !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all .25s ease !important;
}
.categoryLink:hover { color: #ffffff !important; box-shadow: var(--glow-cyan-strong) !important; transform: translateY(-1px) !important; }

/* ============================================================================
   TABLES
============================================================================ */
.table { color: var(--text-primary) !important; }
.table-striped thead {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
}
.table-striped thead th { border-bottom: 2px solid var(--neon-cyan) !important; }
.table thead th, .table th, .table td { border-color: var(--border-color) !important; }
.table-striped tbody tr { color: var(--text-primary) !important; transition: background-color .15s ease !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--bg-secondary) !important; }
.table-striped tbody tr:nth-of-type(even) { background-color: var(--bg-tertiary) !important; }
.table-striped tbody tr:hover { background-image: linear-gradient(var(--bg-hover), var(--bg-hover)) !important; }

/* ============================================================================
   FORMS  (real base: .form-control bg #282828)
============================================================================ */
.form-control {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
	font-family: var(--font-body) !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
}
.form-control:focus {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-primary) !important;
	border-color: var(--neon-cyan) !important;
	box-shadow: 0 0 12px rgba(0, 212, 255, 0.30) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
textarea, select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"] {
	font-family: var(--font-body) !important;
}

/* icheck (vendor) */
.icheckbox_line-red, .iradio_line-red { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
.icheckbox_line-red.checked, .iradio_line-red.checked { border-color: var(--neon-cyan) !important; }

/* ============================================================================
   PAGINATION  (Bootstrap-4 .page-link + legacy fallback)
============================================================================ */
.page-link, .pagination li a {
	background-color: var(--bg-secondary) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border-color) !important;
	transition: all .2s ease !important;
}
.page-link:hover, .pagination li a:hover, .page-link:focus {
	background-color: var(--bg-hover) !important;
	color: var(--neon-cyan) !important;
	border-color: var(--border-strong) !important;
	box-shadow: var(--glow-cyan) !important;
}
.page-item.active .page-link, .pagination > .active > a {
	background: var(--gradient-primary) !important;
	background-color: #00d4ff !important;
	color: #ffffff !important;
	border-color: var(--neon-cyan) !important;
}
.page-item.disabled .page-link { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; }

/* ============================================================================
   DROPDOWNS
============================================================================ */
.dropdown-menu {
	background-color: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--glow-cyan) !important;
}
.dropdown-menu a, .dropdown-menu .dropdown-item { color: var(--text-secondary) !important; transition: all .2s ease !important; }
.dropdown-menu a:hover, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
	background-color: var(--bg-hover) !important;
	color: var(--neon-cyan) !important;
}
.dropdown-menu .active a, .dropdown-menu .dropdown-item.active {
	background: var(--bg-tertiary) !important;
	color: var(--neon-cyan) !important;
}

/* ============================================================================
   PANELS
============================================================================ */
.panel-body {
	background-color: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--glow-cyan) !important;
}
.panel-body .panel-header {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	border-bottom: 1px solid var(--border-color) !important;
	border-left: 3px solid var(--neon-cyan) !important;
}
.panel-body .panel-inner { color: var(--text-secondary) !important; }

/* ============================================================================
   ADMIN — sidebar (.main-menu-box), content-page-top bar
============================================================================ */
.main-menu-box { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-right: 1px solid var(--border-color) !important; }
.main-menu-box .sub-menu { background-color: var(--bg-primary) !important; }
.main-menu-box .sub-menu .submenu-header {
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
}
.main-menu-box ul li { color: var(--text-secondary) !important; transition: all .15s ease !important; }
.main-menu-box .main-menu-outer-box ul a { color: inherit !important; }
.main-menu-box ul li:hover { background-color: var(--bg-hover) !important; color: var(--neon-cyan) !important; }
.main-menu-box .main-menu-outer-box li.active {
	background-color: var(--bg-tertiary) !important;
	color: var(--neon-cyan) !important;
	box-shadow: inset 3px 0 0 var(--neon-cyan) !important;
}
.main-menu-box .version-marker { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; font-family: var(--font-mono) !important; border-top: 1px solid var(--border-color) !important; }
.main-menu-box .version-marker a { color: var(--neon-cyan) !important; }

.content-page-top { background-color: var(--bg-secondary) !important; border-bottom: 1px solid var(--border-color) !important; }
.content-page-top:before { border-color: var(--bg-secondary) transparent transparent !important; }
.content-page-top span { color: var(--neon-cyan) !important; font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }
.help-box { color: var(--text-secondary) !important; }

/* ============================================================================
   DASHBOARD — sub-nav + stat widgets
============================================================================ */
.dashboard-nav { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
.dashboard-nav a {
	background: var(--bg-secondary) !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	transition: all .2s ease !important;
}
.dashboard-nav a:hover { background-color: var(--bg-hover) !important; color: var(--neon-cyan) !important; }
.dashboard-nav a.active { background-color: var(--bg-tertiary) !important; color: var(--neon-cyan) !important; box-shadow: inset 0 -3px 0 var(--neon-cyan) !important; }

.dashboard-widget-small-box {
	background-color: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
	border-top: 3px solid var(--neon-cyan) !important;
	box-shadow: var(--glow-cyan) !important;
	transition: box-shadow .25s ease, transform .25s ease !important;
}
.dashboard-widget-small-box:hover { box-shadow: var(--glow-cyan-strong) !important; transform: translateY(-2px) !important; }
.dashboard-widget-small-box .element { color: var(--neon-cyan) !important; text-shadow: 0 0 12px rgba(0, 212, 255, 0.4) !important; }
.dashboard-widget-small-box .caption { color: var(--text-secondary) !important; }
.dashboard-widget-small-box i, .dashboard-widget-small-box svg { color: var(--neon-cyan) !important; }

/* ============================================================================
   BOXES — options / stat / server / info / darker
============================================================================ */
.options { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
.stat-box { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
.stat-box-header {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	border-left: 3px solid var(--neon-cyan) !important;
}
.srv-box { color: var(--text-primary) !important; transition: all .2s ease !important; }
.srv-box:hover { background-color: var(--bg-hover) !important; box-shadow: var(--glow-cyan) !important; }
.srv-box svg, .srv-box i { color: var(--text-secondary) !important; }
.srv-box:hover svg, .srv-box:hover i { color: var(--neon-cyan) !important; }
.srv-label { background-color: var(--bg-tertiary) !important; color: var(--neon-cyan) !important; border: 1px solid var(--border-color) !important; }
.info-box { background: var(--bg-tertiary) !important; border-left: 3px solid var(--neon-cyan) !important; }
.darker-box { background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }

/* ============================================================================
   CREDITS — credit box + banner credit pill
============================================================================ */
.credit-box .credit-content { border: 1px solid var(--border-color) !important; }
.credit-box .credit-content span:nth-child(1) { color: var(--neon-cyan) !important; text-shadow: 0 0 12px rgba(0, 212, 255, 0.4) !important; font-family: var(--font-display) !important; }
.credit-box .credit-content span:nth-child(2) { color: var(--text-secondary) !important; }
.credit-box .credit-content span:nth-child(3) { border-top: 1px solid var(--border-color) !important; }
.credits {
	background: var(--bg-hover) !important;
	color: var(--neon-cyan) !important;
	border: 1px solid var(--border-color) !important;
	font-family: var(--font-display) !important;
	box-shadow: var(--glow-cyan) !important;
}

/* ============================================================================
   TICKETS
============================================================================ */
.ticket-header {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	letter-spacing: 0.6px !important;
	border-bottom: 1px solid var(--border-color) !important;
	border-left: 3px solid var(--neon-cyan) !important;
}

/* ============================================================================
   BANNER
============================================================================ */
.banner { border-bottom: 1px solid var(--border-color) !important; }
/* banner image — SourceBans #head-logo effect: natural cyan glow, stronger on hover */
.banner img {
	filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.30)) !important;
	transition: filter .3s ease, transform .3s ease !important;
}
.banner img:hover {
	filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.50)) !important;
	transform: scale(1.02) !important;
}

/* ============================================================================
   FOOTER — centered, SourceBans-style: the dpg.tf wordmark on top, credits
   stacked + centered below (overrides Prometheus's default left/right split).
   Theme-scoped: this file only loads for dpg-retro, so other themes keep the
   stock footer. Logo asset: dpg-footer.png (ported from the SourceBans theme).
============================================================================ */
.footer {
	background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-primary)) !important;
	color: var(--text-secondary) !important;
	border-top: 1px solid var(--border-color) !important;
	text-align: center !important;
}
.footer a { color: var(--neon-cyan) !important; }
.footer a:hover { color: #ffffff !important; text-shadow: 0 0 10px var(--neon-cyan) !important; }
.footer .tos-link { color: var(--text-secondary) !important; }
.footer .tos-link:hover { color: var(--neon-cyan) !important; }
.version { color: var(--text-muted) !important; font-family: var(--font-mono) !important; }

/* the dpg.tf wordmark logo — a real <img> rendered by inc/footer.php, centered on top */
.footer .footer-logo { display: inline-block !important; margin: 0 0 16px !important; line-height: 0 !important; }
.footer .footer-logo img {
	height: 48px !important;
	width: auto !important;
	filter: brightness(0.9) !important;            /* no glow at rest (matches SB #footer img) */
	transition: filter .3s ease, transform .3s ease !important;
}
.footer .footer-logo:hover img {
	filter: brightness(1.1) drop-shadow(0 0 12px var(--neon-cyan)) !important;   /* glow only on logo hover */
}
/* stack + center every footer column (kills the default left/right split) */
.footer .row { justify-content: center !important; text-align: center !important; }
.footer [class*="col-"], .footer .col {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	text-align: center !important;
	margin: 2px 0 !important;
}
.footer .col.text-right { text-align: center !important; }
/* keep the language / theme pickers centered */
.footer .bootstrap-select, .footer select { margin: 6px 4px 0 !important; }

/* ============================================================================
   CALLOUTS / ALERT BARS
============================================================================ */
.bs-callout { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
.bs-callout-info { border-left-color: var(--neon-cyan) !important; }
.bs-callout-success { border-left-color: var(--status-active) !important; }
.bs-callout-danger { border-left-color: var(--status-banned) !important; }
.bs-callout-warning { border-left-color: var(--status-warning) !important; }
.notSetup, .sale-box {
	background: var(--gradient-primary) !important;
	background-color: #0066ff !important;
	color: #ffffff !important;
	box-shadow: var(--glow-cyan) !important;
}
.notSetup a { color: #ffffff !important; text-decoration: underline !important; }

/* ============================================================================
   PACKAGE STEPS / NOTIFY BADGE / MODALS / NEWS / MISC
============================================================================ */
.pkg-step { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; transition: all .2s ease !important; }
.pkg-step:hover { background-color: var(--bg-hover) !important; box-shadow: var(--glow-cyan) !important; }
.pkg-step span { font-family: var(--font-display) !important; color: var(--neon-cyan) !important; text-transform: uppercase !important; }

.notify-icon {
	background-color: var(--neon-cyan) !important;
	border: 1px solid var(--neon-cyan) !important;
	color: var(--bg-primary) !important;
	box-shadow: var(--glow-cyan) !important;
	animation: dpgGlowPulse 2s ease-in-out infinite;
}

.modal-content { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--glow-cyan-strong) !important; }
.modal-header {
	background: var(--gradient-header) !important;
	color: var(--neon-cyan) !important;
	font-family: var(--font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border-bottom: 1px solid var(--border-color) !important;
}
.modal-header .modal-title { color: var(--neon-cyan) !important; font-family: var(--font-display) !important; }
.modal-body { color: var(--text-primary) !important; }
.modal-footer { background-color: var(--bg-tertiary) !important; border-top: 1px solid var(--border-color) !important; }

.news-block { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
.news-block a { color: var(--neon-cyan) !important; }
.news-block span { color: var(--text-secondary) !important; }

.progress { background-color: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }
.progress-bar { background: var(--gradient-primary) !important; }
.slider-track { background: var(--bg-tertiary) !important; }
.slider-selection { background: var(--gradient-primary) !important; }
.ui-sortable li { background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }
.ui-sortable li i, .ui-sortable li svg { color: var(--neon-cyan) !important; }

/* code / mono surfaces */
code, kbd, pre, samp, .mono { font-family: var(--font-mono) !important; }

/* ============================================================================
   NEON SCROLLBAR
============================================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-cyan), var(--neon-blue)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--neon-blue), var(--neon-cyan)); }

/* ============================================================================
   REDUCED MOTION — honour the OS "reduce motion" setting
============================================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	#particles-container { display: none !important; }
}