/*!
 * Warhost MU Online - WebEngine Template
 * Dark gaming theme with cyan/gold accents
 */

/* ===== VARIABLES ===== */
:root {
	--wh-bg: #0a0f14;
	--wh-bg-surface: #0d1319;
	--wh-bg-card: #111a22;
	--wh-bg-card-hover: #152028;
	--wh-fg: #d4dede;
	--wh-fg-muted: #6b7f8f;
	--wh-primary: #00d4aa;
	--wh-primary-dark: #00a888;
	--wh-primary-glow: rgba(0, 212, 170, 0.3);
	--wh-gold: #c9a034;
	--wh-gold-light: #e0b84a;
	--wh-gold-glow: rgba(201, 160, 52, 0.3);
	--wh-border: #1a2a35;
	--wh-border-light: #253545;
	--wh-red: #ef4444;
}

/* ===== BASE ===== */
html {
	min-width: 320px;
	height: 100%;
}

body {
	background: var(--wh-bg) url('../img/background.jpg') no-repeat top center;
	background-size: cover;
	background-attachment: fixed;
	color: var(--wh-fg);
	font-family: 'Barlow', 'PT Sans', sans-serif;
	font-size: 14px;
	margin: 0;
	height: 100%;
	-webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 2000px) {
	body {
		background-image: url('../img/background-2600.jpg') !important;
	}
}

a {
	color: var(--wh-primary);
	text-decoration: none;
	transition: all .2s ease;
}

a:hover {
	color: var(--wh-gold-light);
}

img { border: 0; }

input[type=text], input[type=password], input[type=number], input[type=email], textarea, select {
	background: rgba(0,0,0,0.3);
	border: 1px solid var(--wh-border);
	color: var(--wh-fg);
	border-radius: 4px;
	padding: 8px 12px;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, textarea:focus {
	border-color: var(--wh-primary);
	outline: none;
	box-shadow: 0 0 10px var(--wh-primary-glow);
}

.form-control {
	background: rgba(0,0,0,0.3) !important;
	border: 1px solid var(--wh-border) !important;
	color: var(--wh-fg) !important;
}
.form-control:focus {
	border-color: var(--wh-primary) !important;
	box-shadow: 0 0 10px var(--wh-primary-glow) !important;
}

/* ===== TOP BAR ===== */
.global-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(0,0,0,0.8);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wh-border);
	font-size: 13px;
}
.global-top-bar-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px;
}
.global-top-bar-nopadding { padding: 0; }
.global-top-bar a {
	color: var(--wh-fg-muted);
	transition: color .2s;
}
.global-top-bar a:hover {
	color: var(--wh-primary);
	text-decoration: none;
}
.global-top-bar-separator {
	color: var(--wh-border-light);
	padding: 0 8px;
}
.btn-register-top {
	background: var(--wh-primary) !important;
	color: var(--wh-bg) !important;
	padding: 3px 12px !important;
	border-radius: 4px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.btn-register-top:hover {
	background: var(--wh-primary-dark) !important;
	color: var(--wh-bg) !important;
}

/* ===== NAVBAR ===== */
#navbar {
	position: fixed;
	top: 36px;
	left: 0;
	right: 0;
	z-index: 99;
	backdrop-filter: blur(15px);
	border-bottom: 1px solid rgba(0, 212, 170, 0.15);
	background: rgba(10, 15, 20, 0.8);
}
#navbar ul {
	text-align: center;
	margin: 0;
	padding: 0;
}
#navbar ul li {
	list-style-type: none;
	display: inline-block;
}
#navbar ul li a {
	display: inline-block;
	color: rgba(255,255,255,0.6) !important;
	text-decoration: none;
	padding: 16px 28px;
	transition: all .3s ease;
	text-transform: uppercase;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 18px;
	letter-spacing: 0.08em;
}
#navbar ul li a:active,
#navbar ul li a:focus,
#navbar ul li a:hover {
	color: var(--wh-primary) !important;
	text-decoration: none;
}

/* ===== HERO / HEADER ===== */
#header {
	width: 100%;
	margin: 0 auto;
	padding: 160px 20px 40px;
	text-align: center;
	position: relative;
}
#header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,15,20,0.7) 0%, rgba(10,15,20,0.5) 50%, var(--wh-bg) 100%);
	pointer-events: none;
}
#header > * { position: relative; z-index: 1; }

.webengine-mu-logo {
	max-width: 280px;
	height: auto;
	filter: drop-shadow(0 0 30px var(--wh-primary-glow));
	animation: float 4s ease-in-out infinite;
	margin-bottom: 10px;
}

.hero-title {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 80px;
	color: var(--wh-primary);
	text-shadow: 0 0 20px var(--wh-primary-glow), 0 0 40px rgba(0,212,170,0.15);
	letter-spacing: 0.08em;
	margin: 0;
	line-height: 1;
	animation: slideUp 0.6s ease-out;
}

.hero-subtitle {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 32px;
	color: var(--wh-gold);
	text-shadow: 0 0 20px var(--wh-gold-glow);
	letter-spacing: 0.05em;
	margin: 5px 0 0;
	animation: slideUp 0.6s ease-out 0.15s both;
}

.hero-description {
	color: rgba(212, 222, 222, 0.6);
	font-size: 16px;
	max-width: 500px;
	margin: 15px auto 0;
	animation: slideUp 0.6s ease-out 0.3s both;
}

.hero-cta {
	margin-top: 25px;
	animation: slideUp 0.6s ease-out 0.45s both;
}

.btn-cta-primary {
	display: inline-block;
	padding: 12px 32px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 20px;
	letter-spacing: 0.05em;
	background: var(--wh-primary);
	color: var(--wh-bg) !important;
	border-radius: 6px;
	margin: 5px;
	transition: all .3s;
}
.btn-cta-primary:hover {
	box-shadow: 0 0 30px var(--wh-primary-glow);
	transform: scale(1.05);
	color: var(--wh-bg) !important;
	text-decoration: none;
}

.btn-cta-secondary {
	display: inline-block;
	padding: 11px 32px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 20px;
	letter-spacing: 0.05em;
	border: 1px solid rgba(201,160,52,0.4);
	color: var(--wh-gold) !important;
	border-radius: 6px;
	margin: 5px;
	transition: all .3s;
}
.btn-cta-secondary:hover {
	border-color: var(--wh-gold);
	box-shadow: 0 0 20px var(--wh-gold-glow);
	text-decoration: none;
}

/* ===== SERVER STATS BAR ===== */
.server-stats-bar {
	background: var(--wh-bg-card);
	border-top: 1px solid var(--wh-border);
	border-bottom: 1px solid var(--wh-border);
}
.server-stats-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 15px;
	padding: 12px 20px;
}
.stat-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(145deg, rgba(17,26,34,0.8), rgba(13,19,25,0.8));
	border: 1px solid var(--wh-border);
	border-radius: 8px;
	padding: 6px 16px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.stat-badge-wide { min-width: 150px; }
.stat-value {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 20px;
	color: var(--wh-fg);
}
.stat-label {
	color: var(--wh-fg-muted);
	font-size: 12px;
}

.online-bar {
	width: 100%;
	height: 6px;
	background: rgba(0,0,0,0.4);
	border-radius: 3px;
	overflow: hidden;
}
.online-bar-progress {
	height: 100%;
	background: linear-gradient(90deg, var(--wh-primary), var(--wh-primary-dark));
	border-radius: 3px;
	transition: width 1s ease;
}

/* ===== CONTAINER ===== */
#container {
	background: var(--wh-bg-surface);
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
	border-radius: 8px 8px 0 0;
	border: 1px solid var(--wh-border);
	border-bottom: none;
}

#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding: 10px 30px 0;
}

/* ===== FOOTER ===== */
.footer {
	background: var(--wh-bg-card);
	max-width: 1200px;
	font-size: 12px;
	color: var(--wh-fg-muted);
	padding: 40px;
	overflow: auto;
	margin: 0 auto 60px;
	border-radius: 0 0 8px 8px;
	border: 1px solid var(--wh-border);
	border-top: 1px solid rgba(0,212,170,0.1);
}
.footer > .footer-container {
	width: 100%;
	margin: 0 auto;
}
.footer > .footer-container a { color: var(--wh-fg-muted); }
.footer > .footer-container a:hover {
	text-decoration: underline !important;
	color: var(--wh-primary);
}
.footer hr {
	border-top: 1px solid var(--wh-border);
}
.footer .footer-social-link {
	opacity: 0.5;
	transition: all .3s ease;
}
.footer .footer-social-link:hover { opacity: 1; }

/* ===== PAGE TITLES ===== */
.page-title {
	color: var(--wh-primary);
	font-family: 'Bebas Neue', sans-serif;
	font-size: 36px;
	margin-bottom: 15px;
	letter-spacing: 0.05em;
	text-shadow: 0 0 15px var(--wh-primary-glow);
}

/* ===== PANELS ===== */
.panel {
	background: var(--wh-bg-card);
	border: 1px solid var(--wh-border);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.panel-heading {
	padding: 15px;
	border-bottom: 1px solid var(--wh-border);
}
.panel-title {
	color: var(--wh-primary);
	font-family: 'Bebas Neue', sans-serif;
	font-size: 22px;
	letter-spacing: 0.05em;
	margin: 0;
}
.panel-body { padding: 15px; }
.panel-footer {
	padding: 10px 15px;
	border-top: 1px solid var(--wh-border);
	background: rgba(0,0,0,0.2);
}

/* ===== NEWS ===== */
.panel-news {
	margin-bottom: 20px;
	background: linear-gradient(145deg, var(--wh-bg-card), rgba(13,19,25,0.8));
	border: 1px solid var(--wh-border);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	transition: all 0.3s ease;
}
.panel-news:hover {
	border-color: rgba(0,212,170,0.3);
	box-shadow: 0 0 15px var(--wh-primary-glow);
}
.panel-news .panel-heading { padding: 15px; border-bottom: 1px solid var(--wh-border); }
.panel-news .panel-title {
	color: var(--wh-primary);
	font-family: 'Bebas Neue', sans-serif;
	font-size: 24px;
	letter-spacing: 0.05em;
}
.panel-news .panel-body { padding: 15px; }
.panel-news .panel-footer {
	padding: 10px 15px;
	border-top: 1px solid var(--wh-border);
	color: var(--wh-fg-muted);
	font-size: 12px;
}

/* ===== SIDEBAR ===== */
.panel-sidebar {
	margin-bottom: 15px;
	background: var(--wh-bg-card);
	border: 1px solid var(--wh-border);
	border-radius: 8px;
}
.panel-sidebar .panel-heading {
	border-bottom: 1px solid var(--wh-border);
}
.panel-sidebar .panel-title {
	font-size: 18px;
}

.panel-usercp ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.panel-usercp ul li {
	padding: 8px 0;
	border-bottom: 1px solid var(--wh-border);
}
.panel-usercp ul li:last-child { border-bottom: none; }
.panel-usercp ul li img {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
	opacity: 0.7;
}
.panel-usercp ul li a {
	color: var(--wh-fg);
}
.panel-usercp ul li a:hover {
	color: var(--wh-primary);
}

.sidebar-banner {
	margin-bottom: 15px;
}
.sidebar-banner img {
	width: 100%;
	border-radius: 8px;
	border: 1px solid var(--wh-border);
}

/* ===== TABLES ===== */
.table {
	color: var(--wh-fg);
}
.table > thead > tr > th {
	border-bottom: 1px solid var(--wh-border);
	color: var(--wh-primary);
	font-family: 'Bebas Neue', sans-serif;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.table > tbody > tr > td {
	border-top: 1px solid rgba(26,42,53,0.5);
}
.table > tbody > tr:hover > td {
	background: rgba(0,212,170,0.05);
}
.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(0,0,0,0.15);
}

/* ===== RANKINGS ===== */
.rankings-table tr:hover td {
	background: rgba(0,212,170,0.05);
}
.rankings-class-filter-grayscale {
	filter: grayscale(100%);
	opacity: 0.5;
}

/* ===== BUTTONS ===== */
.btn-primary {
	background: var(--wh-primary) !important;
	border-color: var(--wh-primary) !important;
	color: var(--wh-bg) !important;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.05em;
	transition: all .3s;
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--wh-primary-dark) !important;
	border-color: var(--wh-primary-dark) !important;
	box-shadow: 0 0 15px var(--wh-primary-glow);
}

.btn-default {
	background: var(--wh-bg-card) !important;
	border-color: var(--wh-border) !important;
	color: var(--wh-fg) !important;
}
.btn-default:hover {
	border-color: var(--wh-primary) !important;
	color: var(--wh-primary) !important;
}

/* ===== EVENTS SCHEDULE ===== */
.event-schedule-open {
	color: var(--wh-primary);
	font-weight: bold;
}
.event-schedule-inprogress {
	color: var(--wh-gold);
	font-weight: bold;
}

/* ===== ONLINE BAR (legacy) ===== */
.webengine-online-bar {
	width: 100%;
	height: 6px;
	background: rgba(0,0,0,0.4);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 5px;
}
.webengine-online-bar-progress {
	height: 100%;
	background: linear-gradient(90deg, var(--wh-primary), var(--wh-primary-dark));
	border-radius: 3px;
}

.online-count {
	color: var(--wh-primary) !important;
	font-weight: bold;
}

/* ===== ADMIN CP BUTTON ===== */
.admincp-button {
	position: fixed;
	top: 10px;
	right: 10px;
	background: #fff !important;
	border: 2px solid #000 !important;
	color: #000 !important;
	font-weight: bold !important;
	z-index: 200;
}

/* ===== LANGUAGE SWITCHER ===== */
.webengine-language-switcher {
	list-style: none;
	padding: 0;
	margin: 0;
}
.webengine-language-switcher li {
	display: inline-block;
	margin-right: 5px;
}
.webengine-language-switcher li a {
	color: var(--wh-fg-muted);
	font-size: 12px;
}
.webengine-language-switcher li a:hover {
	color: var(--wh-primary);
}

/* ===== CASTLE SIEGE WIDGET ===== */
.castle-owner-widget {
	border: 1px solid var(--wh-border);
}
.castle-owner-widget .panel-heading {
	background: rgba(0,0,0,0.2);
}
.castle-owner-widget .alt {
	color: var(--wh-fg-muted);
	font-size: 12px;
	text-transform: uppercase;
}
.btn-castlewidget {
	background: var(--wh-gold) !important;
	border-color: var(--wh-gold) !important;
	color: var(--wh-bg) !important;
}

/* ===== PAGINATION ===== */
.pagination > li > a,
.pagination > li > span {
	background: var(--wh-bg-card);
	border-color: var(--wh-border);
	color: var(--wh-fg);
}
.pagination > .active > a,
.pagination > .active > span {
	background: var(--wh-primary) !important;
	border-color: var(--wh-primary) !important;
	color: var(--wh-bg) !important;
}

/* ===== ALERTS ===== */
.alert-success {
	background: rgba(0,212,170,0.1);
	border-color: var(--wh-primary);
	color: var(--wh-primary);
}
.alert-danger {
	background: rgba(239,68,68,0.1);
	border-color: var(--wh-red);
	color: var(--wh-red);
}
.alert-warning {
	background: rgba(201,160,52,0.1);
	border-color: var(--wh-gold);
	color: var(--wh-gold);
}
.alert-info {
	background: rgba(0,212,170,0.05);
	border-color: var(--wh-border-light);
	color: var(--wh-fg);
}

/* ===== ANIMATIONS ===== */
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	#header { padding: 120px 15px 30px; }
	.hero-title { font-size: 50px; }
	.hero-subtitle { font-size: 22px; }
	.webengine-mu-logo { max-width: 180px; }
	#container { margin: 0 10px; border-radius: 0; }
	.footer { margin: 0 10px 40px; border-radius: 0; }
	#content { padding: 10px 15px 0; }
	.server-stats-content { gap: 8px; padding: 10px; }
	#navbar ul li a { padding: 12px 15px; font-size: 14px; }
}