/*!
 =========================================================
 * WebEngine CMS Premium AAA Modification
 =========================================================
*/
html {
	min-width: 1040px;
	height: 100%;
}

body {
	background: #000000 url('../img/background.jpg') no-repeat center top;
	background-size: cover;
	background-attachment: fixed;
	color: #cccccc;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	margin: 0;
	height: 100%;
}

a {
	color: #777;
	text-decoration: none;
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

a:hover {
	color: #ffda8a;
}

img {
	border: 0px;
}

input[type=text], input[type=password], input[type=number] {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
	border: 1px solid #ccc;
}

/* =========================================
   HEADER PREMIUM AAA FLEXBOX
========================================= */
.premium-header {
	position: fixed;
	top: 30px;
	left: 0;
	width: 100%;
	height: 80px;
	background: rgba(10, 10, 10, 0.85);
	backdrop-filter: blur(10px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 50px;
	z-index: 9999;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.header-logo img {
	height: 50px;
	width: auto;
	filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
	transition: all 0.3s ease;
}

.header-logo img:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
}

#navbar {
	width: auto;
}

#navbar ul {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
}

#navbar ul li {
	list-style-type: none;
}

#navbar ul li a {
	display: inline-block;
	color: #e0e0e0 !important;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 15px;
	padding: 10px 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
	transition: all 0.3s ease;
}

#navbar ul li a:active, #navbar ul li a:focus, #navbar ul li a:hover {
	color: #d4af37 !important;
	text-decoration: none;
	text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
	transform: translateY(-2px);
}

.btn-gold {
	background: linear-gradient(135deg, #f2d06b 0%, #b5852a 100%);
	color: #000 !important;
	padding: 10px 30px;
	border-radius: 30px;
	font-family: 'Cinzel', serif;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
	border: 1px solid #ffeba5;
	transition: all 0.3s ease;
	display: inline-block;
}

.btn-gold:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 20px rgba(212, 175, 55, 0.7);
	filter: brightness(1.1);
}

/* =========================================
   HERO SECTION (Logo Gigante y Stats)
========================================= */
.hero-section {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 450px;
	margin: 110px auto 40px auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 50px;
}

.hero-main-logo {
	max-width: 500px;
	filter: drop-shadow(0 0 25px rgba(0,0,0,0.9));
	animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-15px); }
	100% { transform: translateY(0px); }
}

.hero-server-stats {
	position: absolute;
	bottom: -20px;
	left: 50px;
	background: rgba(15, 15, 15, 0.9);
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 40px 15px 15px 40px;
	display: flex;
	align-items: center;
	padding: 5px 30px 5px 5px;
	backdrop-filter: blur(5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.stats-icon {
	width: 65px;
	height: 65px;
	background: linear-gradient(135deg, #f2d06b 0%, #b5852a 100%);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
	border: 2px solid #111;
}

.stats-icon img {
	width: 40px;
	height: auto;
	filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

.stats-info h3 {
	margin: 0 0 5px 0;
	color: #d4af37;
	font-family: 'Cinzel', serif;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 1px 1px 2px #000;
}

.stats-info p {
	margin: 0;
	color: #bbb;
	font-size: 14px;
}

.stats-info .highlight {
	background: #d4af37;
	color: #000;
	padding: 3px 10px;
	border-radius: 12px;
	font-weight: bold;
	margin-left: 5px;
	box-shadow: 0 0 5px rgba(212,175,55,0.5);
}

/* =========================================
   CONTENEDORES Y PANELES (Modo Oscuro)
========================================= */
#container {
	background: rgba(15, 15, 15, 0.85);
	width: 1040px;
	height: auto;
	margin: 0px auto;
	padding: 20px 0px;
	border-radius: 5px 5px 0px 0px;
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

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

.footer {
	background: rgba(10, 10, 10, 0.9);
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
	width: 1040px;
	font-size: 12px;
	color: #666666;
	padding: 40px;
	overflow: auto;
	margin: 0px auto 100px auto;
	border-radius: 0px 0px 5px 5px;
	border-top: 1px solid #222;
}
.footer > .footer-container { width: 100%; margin: 0px auto; }
.footer > .footer-container a:hover { text-decoration: underline !important; }
.footer hr { border-top: 1px solid #333333; }
.footer .footer-social-link { filter: grayscale(100%); transition: all .3s ease; }
.footer .footer-social-link:hover { filter: grayscale(0%); }

.admincp-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ffffff !important;
	border: 2px solid #000000 !important;
	color: #000000 !important;
	font-weight: bold !important;
}

.page-title {
	color: #ff0000;
	font-family: 'PT Sans', sans-serif;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: bold;
}

.panel-news {
	margin-bottom: 30px;
	background: rgba(20,20,20,0.9);
	color: #ccc;
	border: 1px solid #333;
	border-radius: 0px;
	box-shadow: 0 0 0px #e3e3e3;
}
.panel-news .panel-heading { padding-top: 10px; padding-bottom: 10px; }
.panel-news .panel-title { color: #d4af37; font-size: 24px; font-weight: bold; }
.panel-news .panel-body { padding: 10px; color: #ccc; }
.panel-news .panel-footer {
	border-top: 1px solid #333;
	background: rgba(10,10,10,0.9);
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: #777;
}

.rankings-table { width: 100%; border-spacing: 0; border-collapse: collapse; }
.rankings-class-image { width: 30px; height: auto; box-shadow: 0 0 5px #000; border-radius: 0px; }
.rankings-table tr td { border-bottom: 1px solid #333; padding: 10px; font-size: 18px; vertical-align: middle !important; text-align: center; }
.rankings-table-place { color: #aaa; font-weight: bold; font-size: 24px; text-align: center; }
.rankings-table tr:first-child td { color: #ff0000; border-bottom: 3px solid #ff0000; }
.rankings-update-time { text-align: right; font-size: 11px; color: #ccc; padding: 10px 0px; }
.rankings_menu { width: 100%; overflow: auto; text-align: center; margin-bottom: 10px; }
.rankings_menu span { width: 100%; display: inline-block; padding: 10px 0px; color: #ccc; font-size: 24px; }
.rankings_menu a { display: inline-block; width: 150px; border: 1px solid #333; text-align: center; padding: 2px 0px; margin: 2px; background: #111; border-radius: 2px; color: #ccc; }
.rankings_menu a.active { color: #d4af37; border-color: #d4af37; }
.rankings_guild_logo tr td { border: 0px !important; padding: 0px !important; margin: 0px !important; }
.rankings-gens-img { width: auto !important; height: 30px !important; border: 0 !important; box-shadow: 0 0 0px #000 !important; border-radius: 0px !important; }

.myaccount-table { width: 100%; background: rgba(10,10,10,0.9); border: 1px solid #333; }
.myaccount-table tr td:first-child { color: #aaa; font-weight: bold; }
.myaccount-table tr td { border-bottom: 1px solid #333; padding: 15px !important; }
.myaccount-table tr:last-child td { border: 0px; }

.general-table-ui { width: 100%; table-layout: fixed; background: rgba(20,20,20,0.9); border: 1px solid #333; padding: 10px; margin: 10px 0px; }
.general-table-ui tr td { padding: 5px; vertical-align: middle !important; color: #ccc; }
.general-table-ui tr:first-child td { color: #ff0000; }
.general-table-ui tr:nth-child(2n+2) td { background: rgba(10,10,10,0.9); }
.general-table-ui tr td { text-align: center; }
.general-table-ui img { width: 50px; height: auto; box-shadow: 0 0 5px #000; border-radius: 0px; }

.tos_list li { color: #aa0000; font-weight: bold; font-size: 18px; margin-bottom: 40px; }
.tos_list li p { color: #ccc; text-align: justify; text-justify: inter-word; text-transform: none; padding-right: 35px; font-size: 14px; font-weight: normal; }

.paypal-gateway-container { width: 100%; }
.paypal-gateway-content { background: #fef2da; border: 3px solid #f79433; padding: 15px; overflow: auto; border-radius: 5px; font-weight: bold; }
.paypal-gateway-logo { width: 100%; height: 100px; background: #fff9ec url('../img/paypal-logo-200-68.png') no-repeat center; background-size: contain; margin-bottom: 15px; border-radius: 5px; }
.paypal-gateway-conversion-rate { margin: 0px auto; text-align: center; color: #000; font-size: 18px; padding: 10px 0px; }
.paypal-gateway-form { width: 100%; margin: 20px auto; text-align: center; }
.paypal-gateway-form div { display: inline-block; padding: 0px 10px; color: #000; font-size: 24px; }
.paypal-gateway-form input[type=text] { width: 60px; font-size: 24px; border: 3px solid #f79433; border-radius: 5px; color: #f79433; }
.paypal-gateway-continue { margin: 0px auto; text-align: center; }
.paypal-gateway-continue input[type=submit] { background: url('../img/paypal-submit.jpg') no-repeat; width: 200px; height: 40px; border: 0px; }

.module-requirements { font-size: 12px; margin-top: 20px; color: #aaa; }

.panel-sidebar { background: rgba(20, 20, 20, 0.9); border: 1px solid #333333; border-radius: 0px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.panel-sidebar > .panel-heading { background: rgba(0, 0, 0, 0.5); color: #ff0000; font-family: 'PT Sans', sans-serif; border: 0px; border-radius: 0px; border-bottom: 3px solid #ff0000; }
.panel-usercp { background: url('../img/usercp_bg.jpg') no-repeat top center; background-size: cover; }
.panel-usercp ul { list-style-type: none; padding: 0px; margin: 0px; }
.panel-usercp ul li { display: table; width: 100%; vertical-align: middle; line-height: 30px; }
.panel-usercp ul li a { color: #ccc !important; font-weight: bold; }
.panel-usercp ul li a:active, .panel-usercp ul li a:hover { color: #ff0000 !important; }
.panel-usercp ul li img { position: relative; top: -2px; padding-right: 10px; }

.sidebar-banner { margin: 20px 0px; border: 0px; }
.sidebar-banner img { box-shadow: 0 0 10px rgba(0,0,0,0.5); border: 0px; border-radius: 5px; }

.panel-general { margin-bottom: 30px; background: rgba(20,20,20,0.9); border: 1px solid #333; border-radius: 0px; color: #ccc; }
.panel-body .panel-title { color: #aaa; font-family: 'PT Sans', sans-serif; font-size: 14px; border-bottom: 1px solid #333; margin-bottom: 20px !important; font-weight: bold; }

.panel-addstats { margin-bottom: 30px; background: rgba(20,20,20,0.9); border: 1px solid #333; border-radius: 0px; color: #ccc; }
.panel-addstats .character-avatar img { width: 100px; height: auto; box-shadow: 0 0 5px #000; border-radius: 0px; }
.panel-addstats .character-name { color: #aaa; font-family: 'PT Sans', sans-serif; font-size: 18px; border-bottom: 1px solid #333; padding: 20px 0px; margin-bottom: 20px !important; font-weight: bold; }

.panel-downloads { margin-bottom: 30px; background: rgba(20,20,20,0.9); border: 1px solid #333; border-radius: 0px; color: #ccc; }
.download-description { font-size: 11px; position: relative; top: -7px; color: #aaa; }
.online-status-indicator { margin-left: 5px; }

.webengine-powered { color: #777 !important; }
.webengine-powered:active, .webengine-powered:hover { color: #ff3214 !important; }

/* RECUPERADO: BARRA SUPERIOR E IDIOMAS */
.global-top-bar { position: fixed; top: 0; z-index: 10000; width: 100%; background: #050505; color: #777777; padding: 7px 0px 2px 0px; text-transform: uppercase; font-size: 12px; border-bottom: 1px solid #222; }
.global-top-bar .global-top-bar-content { width: 1040px; margin: 0px auto; }
.global-top-bar .global-top-bar-content .row { margin: 0px; padding: 0px; }
.global-top-bar a.logout { color: #ff0000 !important; }
.global-top-bar a { color: #999999 !important; }
.global-top-bar a:hover { color: #ffffff !important; }
.global-top-bar-nopadding { padding: 0px !important; }
.global-top-bar-separator { padding: 0px 5px; }

.webengine-language-switcher { display: inline-block; list-style: none; padding: 0px !important; margin: 0px !important; width: 46px; height: 19px; overflow: hidden; transition: all .3s ease; }
.webengine-language-switcher:hover { width: 400px; }
.webengine-language-switcher li { display: inline-block; list-style-type: none; background: #333333; padding: 0px 5px 2px 5px; border-radius: 3px; transition: all .3s ease; }
.webengine-language-switcher li:hover { filter: brightness(120%); }
.webengine-language-switcher li a { color: #999999; }
.webengine-language-switcher li a:hover { color: #ffffff !important; }

.webengine-mu-logo { transition: all .3s ease; }
.webengine-mu-logo:hover { filter: brightness(120%); }

.header-info-container { width: 1040px; margin: 0px auto; text-align: right; }
.header-info-container .header-info { display: inline-block; width: 350px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); margin: 0px; padding: 20px; overflow: auto; box-shadow: 0 0 15px rgba(0,0,0,0.7); border-radius: 5px; text-shadow: 1px 1px 3px #000000; color: #ffffff; border: 1px solid rgba(255,255,255,0.1); font-size: 12px; }
.header-info-container .header-info .header-info-block { padding: 0px; color: #aaaaaa; }
.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime { color: #ffffff; }
.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate { color: #cccccc; }
.header-info-container .header-info .header-info-block .online-count { color: #00ff00; }

.webengine-online-bar { width: 100%; background: #000000; border: 1px solid #555555; height: 8px; margin-top: 10px; margin-bottom: 10px; padding: 0px; border-radius: 4px; overflow: hidden; transition: all .3s ease; }
.webengine-online-bar .webengine-online-bar-progress { height: 8px; background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center; border-radius: 0px 1px 1px 0px; }
.webengine-online-bar:hover { filter: brightness(120%); }

.myaccount-character-block { background: #333; border: 1px solid #666; padding: 5px; border-radius: 3px; display: inline-block; margin: 0px auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.myaccount-character-block img { width: 100px; height: auto; border-radius: 3px; box-shadow: 0 0 5px #000; transition: all 0.3s ease; }
.myaccount-character-block img:hover { filter: brightness(120%); }
.myaccount-character-block-location { font-size: 12px; color: #ccc; margin-bottom: 20px; margin-top: 2px; line-height: 1.2; }
.myaccount-character-block-level { position: relative; top: -77px; display: inline-block; background: rgba(0,0,0,0.5); padding: 0px 5px; border-radius: 3px; color: #fff; font-size: 10px; }
.myaccount-character-name a { font-weight: bold; color: #ccc; font-size: 16px; }

.rankings-class-filter { display: inline-block; list-style-type: none; margin: 20px auto; padding: 10px 20px; border-radius: 10px; }
.rankings-class-filter li { display: inline-block; transition: all 0.3s ease; margin-bottom: 10px; }
.rankings-class-filter li:hover { filter: grayscale(0%); }
.rankings-class-filter-selection { display: inline-block; width: 75px; text-align: center; color: #ccc; font-size: 11px; cursor: pointer; }
.rankings-class-filter-selection:hover { color: #fff !important; }
.rankings-class-filter-selection:hover img { filter: brightness(120%); }
.rankings-class-filter-selection img { width: 40px; height: auto; border-radius: 50%; margin-bottom: 5px; transition: all 0.3s ease; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45); }
.rankings-class-filter-grayscale { filter: grayscale(100%); }

/* REDES SOCIALES FLOTANTES */
.top-social-icons { position: fixed; top: 50%; right: 15px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 25px; z-index: 9999; }
.top-social-icons img { width: 60px; height: auto; filter: grayscale(100%) opacity(0.7); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.top-social-icons img:hover { filter: grayscale(0%) opacity(1); transform: scale(1.2) translateX(-5px); filter: drop-shadow(0px 0px 15px rgba(255, 218, 138, 0.8)); }

/* BANNERS PRINCIPALES */
.top-banners-container { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.top-banner-link { position: relative; flex: 1; border-radius: 5px; overflow: hidden; box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); display: block; }
.top-banner-link img { width: 100%; height: auto; display: block; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.5s ease; }
.top-banner-link::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); transition: all 0.6s ease-in-out; z-index: 2; pointer-events: none; }
.top-banner-link:hover { border: 1px solid rgba(255, 218, 138, 0.5); box-shadow: 0 0 20px rgba(255, 218, 138, 0.4); }
.top-banner-link:hover img { transform: scale(1.05); filter: brightness(1.1); }
.top-banner-link:hover::after { left: 200%; }