/*!
 * WebEngine CMS - IceRose Template - Enhanced Features
 * Loading Spinner, Toast Notifications, and Info Module Styles
 * 
 * @version 1.2.6
 * @author Gabo Development <http://gabodevelop.com/>
 */

.page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(2, 19, 29, 0.95);
	z-index: 99999;
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.page-loader.active {
	display: flex;
	animation: fadeIn 0.3s ease-in;
}

.page-loader.hiding {
	animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.loader-spinner {
	width: 80px;
	height: 80px;
	position: relative;
	margin-bottom: 20px;
}

.loader-spinner::before,
.loader-spinner::after {
	content: '';
	position: absolute;
	border: 4px solid transparent;
	border-top-color: #00f0ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loader-spinner::before {
	width: 80px;
	height: 80px;
	border-top-color: #00f0ff;
	border-right-color: #00f0ff;
	animation-duration: 1s;
}

.loader-spinner::after {
	width: 60px;
	height: 60px;
	top: 10px;
	left: 10px;
	border-top-color: #ecc894;
	border-right-color: #ecc894;
	animation-duration: 0.8s;
	animation-direction: reverse;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.loader-text {
	color: #00f0ff;
	font-size: 16px;
	font-family: 'Arial', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100000;
	max-width: 400px;
	width: 100%;
}

.toast {
	background: linear-gradient(135deg, #0a1f2e 0%, #02131d 100%);
	border: 1px solid #1e495b;
	border-left: 4px solid #00f0ff;
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 15px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.2);
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	transform: translateX(450px);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	min-height: 60px;
}

.toast.show {
	transform: translateX(0);
	opacity: 1;
}

.toast.hiding {
	transform: translateX(450px);
	opacity: 0;
}

.toast::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, #00f0ff 0%, #ecc894 100%);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
}

.toast.success {
	border-left-color: #00f0ff;
}

.toast.success::before {
	background: linear-gradient(180deg, #00f0ff 0%, #589ff7 100%);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
}

.toast.error {
	border-left-color: #ff2127;
}

.toast.error::before {
	background: linear-gradient(180deg, #ff2127 0%, #ff4d52 100%);
	box-shadow: 0 0 10px rgba(255, 33, 39, 0.8);
}

.toast.warning {
	border-left-color: #ecc894;
}

.toast.warning::before {
	background: linear-gradient(180deg, #ecc894 0%, #ffda8a 100%);
	box-shadow: 0 0 10px rgba(236, 200, 148, 0.8);
}

.toast-icon {
	width: 40px;
	height: 40px;
	margin-right: 15px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	position: relative;
}

.toast-icon::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(0, 240, 255, 0.1);
	animation: ripple 2s ease-out infinite;
}

@keyframes ripple {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

.toast-content {
	flex: 1;
	color: #e0f7f1;
	font-size: 14px;
	line-height: 1.4;
}

.toast-title {
	font-weight: bold;
	color: #00f0ff;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
}

.toast-message {
	color: #b4f5f3;
}

.toast-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
	color: #b4f5f3;
	font-size: 18px;
	line-height: 20px;
	text-align: center;
}

.toast-close:hover {
	opacity: 1;
}

.toast-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	width: 100%;
	transform-origin: left;
	animation: toastProgress linear;
}

.toast.success .toast-progress {
	background: linear-gradient(90deg, #00f0ff 0%, #589ff7 100%);
}

.toast.error .toast-progress {
	background: linear-gradient(90deg, #ff2127 0%, #ff4d52 100%);
}

.toast.warning .toast-progress {
	background: linear-gradient(90deg, #ecc894 0%, #ffda8a 100%);
}

@keyframes toastProgress {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

/* ============================================
   INFO MODULE - ENHANCED DESIGN
   ============================================ */
.info-module {
	padding: 20px 0;
}

.info-section {
	margin-bottom: 40px;
	position: relative;
}

.info-section-title {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-left: 4px solid #024091;
	padding: 15px 20px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.info-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, #0066ff 0%, #94d0ec 100%);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.info-section-title h2 {
	color: #00f0ff;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	position: relative;
	z-index: 1;
}

.info-card {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5), 0px 0px 30px 2px rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.info-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
}

.info-card:hover {
	border-color: #1e495b;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.7), 0px 0px 40px 5px rgba(0, 240, 255, 0.2);
	transform: translateY(-2px);
}

.info-card:hover::before {
	opacity: 1;
}

.info-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.info-table thead th,
.info-table thead td {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	color: #00f0ff;
	padding: 12px;
	text-align: left;
	border-bottom: 2px solid #00f0ff;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: bold;
	vertical-align: middle;
}

.info-table thead th.text-center,
.info-table thead td.text-center {
	text-align: center;
}

.info-table tbody td {
	padding: 12px;
	border: 1px solid #1e495b;
	color: #b4f5f3;
	background: rgba(0, 0, 0, 0.3);
	transition: all 0.2s;
	vertical-align: middle;
	word-wrap: break-word;
	position: relative;
	z-index: 1;
}

.info-table tbody td.text-center {
	text-align: center;
}

/* Asegurar alineación de columnas en tabla Chaos Machine */
.info-table thead td:first-child,
.info-table tbody td:first-child {
	width: 30% !important;
	min-width: 30%;
	max-width: 30%;
}

.info-table thead td:nth-child(2),
.info-table tbody td:nth-child(2) {
	width: 35% !important;
	min-width: 35%;
	max-width: 35%;
}

.info-table thead td:nth-child(3),
.info-table tbody td:nth-child(3) {
	width: 35% !important;
	min-width: 35%;
	max-width: 35%;
}

.info-table tbody tr {
	transition: all 0.2s;
	position: relative;
	animation: fadeInRow 0.5s ease-out backwards;
}

.info-table tbody tr:hover td {
	background: rgba(0, 240, 255, 0.1);
	color: #e0f7f1;
	border-color: #1e495b;
}

.info-table tbody tr:nth-child(even) td {
	background: rgba(0, 0, 0, 0.2);
}

.info-table tbody tr:nth-child(even):hover td {
	background: rgba(0, 240, 255, 0.15);
}

.info-badge {
	display: inline-block;
	padding: 4px 12px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 1px solid #00f0ff;
	border-radius: 4px;
	color: #00f0ff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	/* animation: badgePulse 2s ease-in-out infinite; */
}

@keyframes badgePulse {

	0%,
	100% {
		box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	}

	50% {
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
	}
}

.info-video-container {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0;
	overflow: hidden;
	border: 2px solid #1e495b;
	border-radius: 6px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	background: #000;
}

.info-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.info-command {
	display: inline-block;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #1e495b;
	border-radius: 4px;
	color: #ecc894;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	margin-right: 10px;
	margin-bottom: 5px;
	transition: all 0.2s;
}

.info-command:hover {
	background: rgba(0, 240, 255, 0.1);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	transform: translateY(-2px);
}

/* Animaciones para secciones - Mejoras adicionales */
.info-section {
	animation: slideInUp 0.6s ease-out;
}

.info-section:nth-child(1) {
	animation-delay: 0.1s;
}

.info-section:nth-child(2) {
	animation-delay: 0.2s;
}

.info-section:nth-child(3) {
	animation-delay: 0.3s;
}

.info-section:nth-child(4) {
	animation-delay: 0.4s;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Info Module - Additional Enhancements */
.info-section-title h2::after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 1px solid #00f0ff;
	border-radius: 50%;
	animation: rotateIcon 3s linear infinite;
}

@keyframes rotateIcon {
	0% {
		transform: translateY(-50%) rotate(0deg);
		box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	}

	50% {
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
	}

	100% {
		transform: translateY(-50%) rotate(360deg);
		box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	}
}

/* Info Card - Hover effects */
.info-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
	transition: left 0.5s;
}

.info-card:hover::after {
	left: 100%;
}

/* Info Table - Row enhancements */
/* .info-table tbody tr::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, #00f0ff 0%, transparent 100%);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 0;
	pointer-events: none;
} */

.info-table tbody tr:hover::before {
	opacity: 1;
}

/* Info Table - Stagger animation for rows */

.info-table tbody tr:nth-child(1) {
	animation-delay: 0.1s;
}

.info-table tbody tr:nth-child(2) {
	animation-delay: 0.15s;
}

.info-table tbody tr:nth-child(3) {
	animation-delay: 0.2s;
}

.info-table tbody tr:nth-child(4) {
	animation-delay: 0.25s;
}

.info-table tbody tr:nth-child(5) {
	animation-delay: 0.3s;
}

.info-table tbody tr:nth-child(6) {
	animation-delay: 0.35s;
}

.info-table tbody tr:nth-child(7) {
	animation-delay: 0.4s;
}

.info-table tbody tr:nth-child(8) {
	animation-delay: 0.45s;
}

.info-table tbody tr:nth-child(9) {
	animation-delay: 0.5s;
}

.info-table tbody tr:nth-child(10) {
	animation-delay: 0.55s;
}

.info-table tbody tr:nth-child(n+11) {
	animation-delay: 0.6s;
}

@keyframes fadeInRow {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Video hover effect */
.info-video-container {
	transition: all 0.3s;
}

.info-video-container:hover {
	box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
	border-color: #00f0ff;
	transform: scale(1.02);
}

/* Command hover copy effect */
.info-command {
	cursor: pointer;
	position: relative;
}

.info-command::after {
	content: 'Click to copy';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.9);
	color: #00f0ff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	margin-bottom: 5px;
}

.info-command:hover::after {
	opacity: 1;
}

/* Badge animations */
.info-badge::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	/* background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, transparent 70%); */
	/* animation: badgeShine 3s ease-in-out infinite; */
}

@keyframes badgeShine {

	0%,
	100% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	50% {
		transform: translate(-50%, -50%) rotate(180deg);
	}
}

/* ============================================
   DOWNLOADS MODULE - ENHANCED DESIGN
   ============================================ */
.downloads-module {
	padding: 20px 0;
}

.downloads-section {
	margin-bottom: 50px;
	animation: slideInUp 0.6s ease-out backwards;
}

.downloads-section:nth-child(1) {
	animation-delay: 0.1s;
}

.downloads-section:nth-child(2) {
	animation-delay: 0.2s;
}

.downloads-section:nth-child(3) {
	animation-delay: 0.3s;
}

.downloads-section-title {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-left: 4px solid #024091;
	padding: 15px 20px;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
}

.downloads-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, #0066ff 0%, #94d0ec 100%);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.downloads-section-title h2 {
	color: #00f0ff;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 15px;
}

.download-icon {
	font-size: 24px;
	animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {

	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-5px) scale(1.1);
	}
}

.downloads-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 25px;
	margin-top: 20px;
}

.download-card {
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.9) 0%, rgba(1, 3, 4, 0.95) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	padding: 0;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5), 0px 0px 30px 2px rgba(0, 0, 0, 0.4);
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: cardFadeIn 0.6s ease-out backwards;
}

.download-card:nth-child(1) {
	animation-delay: 0.1s;
}

.download-card:nth-child(2) {
	animation-delay: 0.2s;
}

.download-card:nth-child(3) {
	animation-delay: 0.3s;
}

.download-card:nth-child(4) {
	animation-delay: 0.4s;
}

.download-card:nth-child(5) {
	animation-delay: 0.5s;
}

.download-card:nth-child(n+6) {
	animation-delay: 0.6s;
}

@keyframes cardFadeIn {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.download-card:hover {
	border-color: #1e495b;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.7), 0px 0px 50px 10px rgba(0, 240, 255, 0.3);
	transform: translateY(-8px) scale(1.02);
}

.download-card-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}

.download-card:hover .download-card-glow {
	opacity: 1;
	animation: glowRotate 3s linear infinite;
}

@keyframes glowRotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.download-card-header {
	padding: 20px;
	border-bottom: 1px solid #1e495b;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	position: relative;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
}

.download-icon-large {
	font-size: 48px;
	line-height: 1;
	animation: iconPulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes iconPulse {

	0%,
	100% {
		transform: scale(1);
		filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5));
	}

	50% {
		transform: scale(1.1);
		filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.8));
	}
}

.download-card-title {
	flex: 1;
}

.download-card-title h3 {
	color: #00f0ff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 8px 0;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	line-height: 1.3;
}

.download-description {
	color: #b4f5f3;
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	opacity: 0.8;
}

.download-card-body {
	padding: 20px;
}

.download-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.download-size {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #ecc894;
	font-size: 14px;
	font-weight: bold;
}

.size-icon {
	font-size: 18px;
}

.size-value {
	text-shadow: 0 0 5px rgba(236, 200, 148, 0.5);
}

.download-type-badge {
	display: inline-block;
	padding: 4px 12px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 1px solid #00f0ff;
	border-radius: 4px;
	color: #00f0ff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	animation: badgePulse 2s ease-in-out infinite;
}

.download-type-badge.patch {
	border-color: #ecc894;
	color: #ecc894;
	background: linear-gradient(135deg, rgba(236, 200, 148, 0.2) 0%, rgba(255, 218, 138, 0.2) 100%);
	box-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.download-type-badge.tool {
	border-color: #00f0ff;
	color: #589ff7;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(88, 159, 247, 0.2) 100%);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.download-progress-container {
	margin-top: 15px;
}

.download-progress-bar {
	width: 100%;
	height: 6px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #1e495b;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	margin-bottom: 8px;
}

.download-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	border-radius: 3px;
	transition: width 0.3s ease;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	position: relative;
	overflow: hidden;
}

.download-progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: progressShine 2s infinite;
}

@keyframes progressShine {
	0% {
		left: -100%;
	}

	100% {
		left: 100%;
	}
}

.download-progress-fill.downloading {
	width: 100%;
	animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {

	0%,
	100% {
		box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	}

	50% {
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
	}
}

.download-progress-text {
	color: #b4f5f3;
	font-size: 12px;
	text-align: center;
	display: block;
	transition: color 0.3s;
}

.download-progress-text.downloading {
	color: #00f0ff;
	animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

.download-card-footer {
	padding: 20px;
	border-top: 1px solid #1e495b;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
}

.download-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 6px;
	color: #00f0ff;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.download-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.download-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #ecc894;
	color: #ecc894;
	box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
	transform: translateY(-2px);
}

.download-btn:hover::before {
	width: 300px;
	height: 300px;
}

.download-btn:active {
	transform: translateY(0);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.btn-icon {
	font-size: 20px;
	transition: transform 0.3s;
}

.download-btn:hover .btn-icon {
	transform: scale(1.2) rotate(360deg);
}

.btn-text {
	position: relative;
	z-index: 1;
}

.btn-ripple {
	position: absolute;
	width: 20px;
	height: 20px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 0.6s;
	pointer-events: none;
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

.download-btn:active .btn-ripple {
	animation: ripple 0.6s;
}

/* Empty State */
.downloads-empty,
.downloads-error {
	text-align: center;
	padding: 60px 20px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5);
}

.empty-icon,
.error-icon {
	font-size: 64px;
	margin-bottom: 20px;
	display: block;
	animation: iconBounce 2s ease-in-out infinite;
}

.downloads-empty h3,
.downloads-error h3 {
	color: #00f0ff;
	font-size: 24px;
	margin-bottom: 10px;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.downloads-empty p,
.downloads-error p {
	color: #b4f5f3;
	font-size: 14px;
	line-height: 1.6;
}

.downloads-error {
	border-color: #ff2127;
}

.downloads-error .error-icon {
	animation: errorShake 0.5s ease-in-out infinite;
}

@keyframes errorShake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}
}

/* ============================================
   NEWS MODULE - ENHANCED DESIGN
   ============================================ */
.news-card {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	margin-top: 30px;
	margin-bottom: 30px;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5), 0px 0px 30px 2px rgba(0, 0, 0, 0.4);
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: newsCardFadeIn 0.6s ease-out backwards;
}

.news-card[data-index="0"] {
	animation-delay: 0.1s;
}

.news-card[data-index="1"] {
	animation-delay: 0.2s;
}

.news-card[data-index="2"] {
	animation-delay: 0.3s;
}

.news-card[data-index="3"] {
	animation-delay: 0.4s;
}

.news-card[data-index="4"] {
	animation-delay: 0.5s;
}

.news-card[data-index="5"] {
	animation-delay: 0.6s;
}

.news-card[data-index="6"] {
	animation-delay: 0.7s;
}

.news-card[data-index="7"] {
	animation-delay: 0.8s;
}

.news-card[data-index="8"] {
	animation-delay: 0.9s;
}

.news-card[data-index="9"] {
	animation-delay: 1s;
}

@keyframes newsCardFadeIn {
	from {
		opacity: 0;
		transform: translateY(40px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.news-card:hover {
	border-color: #1e495b;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.7), 0px 0px 50px 10px rgba(0, 240, 255, 0.3);
	transform: translateY(-8px) scale(1.01);
}

.news-card-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}

.news-card:hover .news-card-glow {
	opacity: 1;
	animation: glowRotate 4s linear infinite;
}

.news-card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transition: left 0.6s;
	pointer-events: none;
}

.news-card:hover .news-card-shine {
	left: 100%;
}

/* News Card Image */
.news-card-image {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.news-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.news-card:hover .news-card-image img {
	transform: scale(1.1);
}

.news-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.4s;
}

.news-card:hover .news-image-overlay {
	opacity: 1;
}

.news-image-icon {
	font-size: 64px;
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.news-card:hover .news-image-icon {
	transform: scale(1);
	animation: iconPulse 2s ease-in-out infinite;
}

.news-card-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	background: linear-gradient(135deg, rgba(255, 33, 39, 0.9) 0%, rgba(255, 77, 82, 0.9) 100%);
	border: 2px solid #ff2127;
	border-radius: 4px;
	padding: 6px 12px;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 0 15px rgba(255, 33, 39, 0.6);
	animation: badgePulse 2s ease-in-out infinite;
	z-index: 2;
}

@keyframes badgePulse {

	0%,
	100% {
		box-shadow: 0 0 15px rgba(255, 33, 39, 0.6);
		transform: scale(1);
	}

	50% {
		box-shadow: 0 0 25px rgba(255, 33, 39, 0.9);
		transform: scale(1.05);
	}
}

/* News Card Content */
.news-card-content {
	padding: 25px;
	position: relative;
	z-index: 1;
}

.news-card-header {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #1e495b;
}

.news-card-title {
	margin: 0 0 15px 0;
}

.news-card-title .title-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s;
}

.news-card-title .title-text {
	color: #00f0ff;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.3;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	transition: color 0.3s;
	flex: 1;
}

.news-card-title .title-arrow {
	color: #ecc894;
	font-size: 24px;
	opacity: 0;
	transform: translateX(-10px);
	transition: all 0.3s;
}

.news-card-title .title-link:hover .title-text {
	color: #ecc894;
	text-shadow: 0 0 15px rgba(236, 200, 148, 0.6);
}

.news-card-title .title-link:hover .title-arrow {
	opacity: 1;
	transform: translateX(0);
}

.news-card-title .title-text:not(.title-link) {
	color: #00f0ff;
	font-size: 28px;
}

.news-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.news-date,
.news-author {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #b4f5f3;
	font-size: 13px;
}

.date-icon,
.author-icon {
	font-size: 16px;
	opacity: 0.8;
}

.date-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.date-text strong {
	color: #00f0ff;
	font-weight: bold;
}

.date-time {
	color: #b4f5f3;
	font-size: 12px;
	opacity: 0.8;
}

.author-text {
	color: #ecc894;
	font-weight: 500;
}

/* News Card Body */
.news-card-body {
	margin-bottom: 20px;
}

.news-excerpt p {
	color: #b4f5f3;
	font-size: 15px;
	line-height: 1.8;
	margin: 0;
}

.news-full-content {
	color: #b4f5f3;
	font-size: 15px;
	line-height: 1.8;
}

.news-full-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 20px 0;
	border: 1px solid #1e495b;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.news-full-content p {
	margin-bottom: 15px;
}

.news-full-content h1,
.news-full-content h2,
.news-full-content h3,
.news-full-content h4 {
	color: #00f0ff;
	margin-top: 25px;
	margin-bottom: 15px;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.news-full-content a {
	color: #ecc894;
	text-decoration: none;
	border-bottom: 1px solid rgba(236, 200, 148, 0.3);
	transition: all 0.3s;
}

.news-full-content a:hover {
	color: #00f0ff;
	border-bottom-color: rgba(0, 240, 255, 0.5);
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
}

/* News Card Footer */
.news-card-footer {
	padding-top: 20px;
	border-top: 1px solid #1e495b;
}

.news-read-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid #00f0ff;
	border-radius: 6px;
	color: #00f0ff;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.news-read-more-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.news-read-more-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #ecc894;
	color: #ecc894;
	box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
	transform: translateY(-2px);
}

.news-read-more-btn:hover::before {
	width: 300px;
	height: 300px;
}

.news-read-more-btn:active {
	transform: translateY(0);
}

.news-read-more-btn .btn-icon {
	font-size: 18px;
	transition: transform 0.3s;
}

.news-read-more-btn:hover .btn-icon {
	transform: translateX(5px);
}

.news-read-more-btn .btn-text {
	position: relative;
	z-index: 1;
}

.news-read-more-btn .btn-ripple {
	position: absolute;
	width: 20px;
	height: 20px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transform: scale(0);
	pointer-events: none;
}

.news-read-more-btn:active .btn-ripple {
	animation: ripple 0.6s;
}

/* Pagination Styles */
.pagination-wrapper {
	margin: 40px 0;
	display: flex;
	justify-content: center;
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.pagination li {
	margin: 0;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 1px solid #1e495b;
	border-radius: 6px;
	color: #b4f5f3;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	min-width: 44px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.pagination a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 240, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s, height 0.4s;
}

.pagination a:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
	transform: translateY(-3px) scale(1.05);
}

.pagination a:hover::before {
	width: 200px;
	height: 200px;
}

.pagination .active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
	font-weight: bold;
	animation: paginationPulse 2s ease-in-out infinite;
}

@keyframes paginationPulse {

	0%,
	100% {
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
	}

	50% {
		box-shadow: 0 0 30px rgba(0, 240, 255, 0.8);
	}
}

.pagination .disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.3);
}

/* Home news pagination (3 per page) */
.home-news-pagination {
	margin: 28px 0 20px;
	display: flex;
	justify-content: center;
}

.home-news-pagination .pagination-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.home-news-pagination .pagination-prev,
.home-news-pagination .pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 1px solid #1e495b;
	border-radius: 6px;
	color: #b4f5f3;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.25s ease;
}

.home-news-pagination .pagination-prev:hover,
.home-news-pagination .pagination-next:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.home-news-pagination .pagination-pages {
	display: flex;
	align-items: center;
	gap: 6px;
}

.home-news-pagination .pagination-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 1px solid #1e495b;
	border-radius: 6px;
	color: #b4f5f3;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.25s ease;
}

.home-news-pagination .pagination-num:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.home-news-pagination .pagination-num.pagination-active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
	font-weight: 600;
}

.pagination .ellipsis {
	background: transparent;
	border: none;
	color: #b4f5f3;
	opacity: 0.6;
	cursor: default;
}

.pagination .prev,
.pagination .next {
	min-width: 80px;
	font-weight: 600;
}

/* Rankings Pagination Styles */
.rankings-pagination-wrapper {
	margin: 40px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

.rankings-pagination {
	width: 100%;
}

.rankings-pagination .pagination-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.rankings-pagination .pagination-item {
	margin: 0;
}

.rankings-pagination .pagination-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 1px solid #1e495b;
	border-radius: 6px;
	color: #b4f5f3;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	min-width: 44px;
	text-align: center;
	position: relative;
	overflow: hidden;
	gap: 6px;
}

.rankings-pagination .pagination-link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 240, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s, height 0.4s;
}

.rankings-pagination .pagination-link:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
	transform: translateY(-3px) scale(1.05);
}

.rankings-pagination .pagination-link:hover::before {
	width: 200px;
	height: 200px;
}

.rankings-pagination .pagination-active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
	font-weight: bold;
	animation: paginationPulse 2s ease-in-out infinite;
}

.rankings-pagination .pagination-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.3);
}

.rankings-pagination .pagination-ellipsis {
	background: transparent;
	border: none;
	color: #b4f5f3;
	opacity: 0.6;
	cursor: default;
}

.rankings-pagination .pagination-prev,
.rankings-pagination .pagination-next {
	min-width: 100px;
	font-weight: 600;
}

.rankings-pagination .pagination-icon {
	font-size: 16px;
	font-weight: bold;
}

.rankings-pagination .pagination-info {
	margin-top: 15px;
	text-align: center;
}

.rankings-pagination .pagination-text-info {
	color: #b4f5f3;
	font-size: 14px;
}

.rankings-pagination .pagination-text-info strong {
	color: #00f0ff;
	font-weight: bold;
}

/* Responsive */
@media (max-width: 1280px) {
	.toast-container {
		right: 10px;
		top: 10px;
		max-width: 350px;
	}

	.info-card {
		padding: 15px;
	}

	.info-video-container {
		padding-bottom: 56.25%;
	}

	.downloads-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 20px;
	}

	.download-card-header,
	.download-card-body,
	.download-card-footer {
		padding: 15px;
	}

	.download-icon-large {
		font-size: 40px;
	}

	.news-card-image {
		height: 250px;
	}

	.news-card-content {
		padding: 20px;
	}

	.news-card-title .title-text {
		font-size: 20px;
	}

	.news-card-title .title-text:not(.title-link) {
		font-size: 24px;
	}

	.news-card-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ============================================
   RANKINGS MODULE - ENHANCED DESIGN
   ============================================ */
.rankings-module {
	padding: 20px 0;
}

.rankings-module .page-title {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 1px solid #1e495b;
	border-left: 4px solid #00f0ff;
	padding: 15px 20px;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
}

.rankings-module .page-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, #00f0ff 0%, #ecc894 100%);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.rankings-module .page-title span {
	color: #00f0ff;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	position: relative;
	z-index: 1;
}

/* Rankings Menu - Enhanced Tabs Design */
.rankings-module .rankings_menu,
.rankings-module .rankings-menu,
.rankings-module ul.rankings-menu,
.rankings-level-module .rankings_menu,
.rankings-level-module .rankings-menu,
.rankings-level-module ul.rankings-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 30px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	list-style: none;
	justify-content: center;
	border-bottom: 2px solid #1e495b;
	padding-bottom: 15px;
}

.rankings-module .rankings-menu li,
.rankings-module .rankings_menu li,
.rankings-level-module .rankings-menu li,
.rankings-level-module .rankings_menu li {
	margin: 0;
}

.rankings-module .rankings-menu a,
.rankings-module .rankings_menu a,
.rankings-module ul.rankings-menu a,
.rankings-level-module .rankings-menu a,
.rankings-level-module .rankings_menu a,
.rankings-level-module ul.rankings-menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.6) 0%, rgba(1, 3, 4, 0.8) 100%);
	border: 1px solid #1e495b;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	color: #b4f5f3;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	position: relative;
	overflow: hidden;
	min-width: 120px;
	text-align: center;
}

.rankings-module .rankings-menu a::before,
.rankings-module .rankings_menu a::before,
.rankings-level-module .rankings-menu a::before,
.rankings-level-module .rankings_menu a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent);
	transition: left 0.5s;
}

.rankings-module .rankings-menu a:hover::before,
.rankings-module .rankings_menu a:hover::before,
.rankings-level-module .rankings-menu a:hover::before,
.rankings-level-module .rankings_menu a:hover::before {
	left: 100%;
}

.rankings-module .rankings-menu a:hover,
.rankings-module .rankings_menu a:hover,
.rankings-module ul.rankings-menu a:hover,
.rankings-level-module .rankings-menu a:hover,
.rankings-level-module .rankings_menu a:hover,
.rankings-level-module ul.rankings-menu a:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	border-bottom-color: transparent;
	color: #00f0ff;
	box-shadow: 0 -5px 20px rgba(0, 240, 255, 0.3);
	transform: translateY(-3px);
}

.rankings-module .rankings-menu a.active,
.rankings-module .rankings_menu a.active,
.rankings-module ul.rankings-menu a.active,
.rankings-level-module .rankings-menu a.active,
.rankings-level-module .rankings_menu a.active,
.rankings-level-module ul.rankings-menu a.active {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border-color: 2px solid rgb(88 159 247 / 30%);
	border-bottom-color: transparent;
	color: #00f0ff;
	box-shadow: 0 -5px 25px rgba(0, 240, 255, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.2);
	font-weight: bold;
	position: relative;
	z-index: 1;
}

.rankings-module .rankings-menu a.active::after,
.rankings-module .rankings_menu a.active::after,
.rankings-level-module .rankings-menu a.active::after,
.rankings-level-module .rankings_menu a.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

/* Rankings Table */
.rankings-module .rankings-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5), 0px 0px 30px 2px rgba(0, 0, 0, 0.4);
}

.rankings-module .rankings-table tr {
	transition: all 0.2s;
	border-bottom: 1px solid #1e495b;
}

.rankings-module .rankings-table tr:first-child {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border-bottom: 2px solid #00f0ff;
}

.rankings-module .rankings-table tr:first-child td {
	color: #00f0ff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 15px;
}

.rankings-module .rankings-table tr:not(:first-child):hover {
	background: rgba(0, 240, 255, 0.1);
	border-color: #1e495b;
}

.rankings-module .rankings-table tr:not(:first-child):hover td {
	color: #e0f7f1;
}

.rankings-module .rankings-table td {
	padding: 12px 15px;
	color: #b4f5f3;
	font-size: 14px;
	vertical-align: middle;
	background: rgba(0, 0, 0, 0.3);
	transition: all 0.2s;
}

.rankings-module .rankings-table tr:nth-child(even) td {
	background: rgba(0, 0, 0, 0.2);
}

.rankings-module .rankings-table tr:nth-child(even):hover td {
	background: rgba(0, 240, 255, 0.15);
}

.rankings-module .rankings-table-place {
	color: #00f0ff;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	width: 60px;
}

.rankings-module .rankings-table img {
	max-width: 32px;
	height: auto;
	vertical-align: middle;
	margin-right: 8px;
	border-radius: 4px;
}

.rankings-module .rankings-class-image {
	max-width: 40px;
	height: auto;
}

.rankings-module .online-status-indicator {
	max-width: 16px;
	height: auto;
	margin-left: 8px;
	vertical-align: middle;
}

/* Rankings Filter Menu */
.rankings-module .rankings-filter-menu {
	margin-bottom: 20px;
	padding: 15px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
}

.rankings-module .rankings-filter-menu a {
	display: inline-block;
	padding: 8px 16px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #1e495b;
	border-radius: 4px;
	color: #b4f5f3;
	text-decoration: none;
	font-size: 13px;
	transition: all 0.3s;
}

.rankings-module .rankings-filter-menu a:hover,
.rankings-module .rankings-filter-menu a.rankings-class-filter-selection {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.rankings-module .rankings-filter-menu a.rankings-class-filter-grayscale {
	opacity: 0.5;
	filter: grayscale(100%);
}

/* Rankings Update Time */
.rankings-module .rankings-update-time {
	margin-top: 20px;
	padding: 15px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	color: #b4f5f3;
	font-size: 13px;
	text-align: center;
}

/* Rankings Error */
.rankings-module .rankings-error,
.rankings-level-module .rankings-error {
	padding: 60px 40px;
	text-align: center;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid #ff2127;
	border-radius: 8px;
	color: #ff2127;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	margin: 20px auto;
	max-width: 600px;
	box-shadow: 0 0 30px rgba(255, 33, 39, 0.3);
}

.rankings-module .rankings-error .error-icon,
.rankings-level-module .rankings-error .error-icon {
	font-size: 64px;
	margin-bottom: 20px;
	animation: errorPulse 2s ease-in-out infinite;
}

.rankings-module .rankings-error h3,
.rankings-level-module .rankings-error h3 {
	color: #ff2127;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.rankings-module .rankings-error p,
.rankings-level-module .rankings-error p {
	color: #ff6b6b;
	font-size: 16px;
	margin: 0;
	line-height: 1.6;
}

@keyframes errorPulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

/* Responsive Rankings */
@media (max-width: 1280px) {
	.rankings-module .rankings-table {
		font-size: 12px;
	}

	.rankings-module .rankings-table td {
		padding: 10px;
	}

	.rankings-module .rankings-table-place {
		width: 40px;
		font-size: 14px;
	}

	.rankings-module .rankings-menu {
		padding: 15px;
	}

	.rankings-module .rankings-menu a {
		padding: 8px 16px;
		font-size: 13px;
	}
}

/* ============================================
   RANKINGS LEVEL MODULE - ENHANCED DESIGN
   ============================================ */
.rankings-level-module {
	padding: 20px 0;
	/* width: 100%; */
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

/* Ajustar content cuando contiene rankings */
.content .rankings-level-module,
.content .rankings-module {
	/* width: 100%;
	max-width: 100%; */
	overflow-x: hidden;
	box-sizing: border-box;
	margin-left: 0;
	margin-right: 0;
}

/* Override del ancho fijo de content cuando tiene rankings */
.content:has(.rankings-level-module),
.content:has(.rankings-module),
.content.rankings-content {
	width: auto !important;
	min-width: 530px;
	max-width: calc(100% - 40px);
	flex: 1 1 auto;
	overflow-x: visible;
	overflow-y: visible;
}

/* Asegurar que el contenedor de la tabla no exceda el content */
.content.rankings-content .rankings-table-container {
	max-width: 100%;
	overflow-x: auto;
}

.content.rankings-content .rankings-table-wrapper {
	max-width: 100%;
}

.content .rankings-level-module,
.content .rankings-module {
	/* width: 100%;
	max-width: 100%; */
	overflow-x: hidden;
	box-sizing: border-box;
}

.content .rankings-table-container {
	/* width: 100%;
	max-width: 100%; */
	overflow: hidden;
	box-sizing: border-box;
}

.content .rankings-table-wrapper {
	/* width: 100%;
	max-width: 100%; */
	box-sizing: border-box;
	display: block;
}

/* Rankings Header */
.rankings-header {
	margin-bottom: 30px;
	text-align: center;
}

.rankings-header-title {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-left: 6px solid #0066ff;
	border-radius: 8px;
	padding: 25px 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
}

.rankings-header-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: linear-gradient(180deg, #0066ff 0%, #94d0ec 100%);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
	animation: headerGlow 3s ease-in-out infinite;
}

@keyframes headerGlow {

	0%,
	100% {
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
	}

	50% {
		box-shadow: 0 0 40px rgba(0, 240, 255, 1);
	}
}

.rankings-header-title h1 {
	color: #00f0ff;
	font-size: 32px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0 0 8px 0;
	text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.title-icon {
	font-size: 36px;
	animation: iconRotate 4s linear infinite;
}

@keyframes iconRotate {
	0% {
		transform: rotate(0deg) scale(1);
	}

	50% {
		transform: rotate(180deg) scale(1.1);
	}

	100% {
		transform: rotate(360deg) scale(1);
	}
}

.title-subtitle {
	color: #b4f5f3;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: 0.8;
	position: relative;
	z-index: 1;
}

/* Class Filter Wrapper */
.rankings-class-filter-wrapper {
	margin-bottom: 30px;
	padding: 20px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5);
}

/* Class Filter Select Dropdown */
.rankings-class-filter-select-wrapper {
	position: relative;
	max-width: 400px;
	margin: 0 auto;
}

.rankings-class-filter-select {
	width: 100%;
	padding: 12px 45px 12px 20px;
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.9) 0%, rgba(1, 3, 4, 0.95) 100%);
	border: 2px solid #1e495b;
	border-radius: 8px;
	color: #b4f5f3;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	transition: all 0.3s;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.rankings-class-filter-select:hover {
	border-color: #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
}

.rankings-class-filter-select:focus {
	border-color: #00f0ff;
	box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(236, 200, 148, 0.15) 100%);
	color: #00f0ff;
}

.rankings-class-filter-select option {
	background: rgba(5, 14, 27, 0.95);
	color: #b4f5f3;
	padding: 10px;
}

.rankings-class-filter-select option:hover {
	background: rgba(0, 240, 255, 0.2);
}

.select-arrow {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #00f0ff;
	font-size: 12px;
	pointer-events: none;
	transition: transform 0.3s;
	z-index: 1;
}

.rankings-class-filter-select-wrapper:hover .select-arrow {
	transform: translateY(-50%) scale(1.2);
	color: #ecc894;
}

.rankings-class-filter-select:focus+.select-arrow {
	color: #ecc894;
	transform: translateY(-50%) rotate(180deg);
}

/* Custom Dropdown with Images */
.rankings-class-filter-dropdown-wrapper {
	position: relative;
	max-width: 400px;
	margin: 0 auto;
}

.rankings-class-filter-dropdown {
	position: relative;
	width: 100%;
}

.filter-dropdown-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.9) 0%, rgba(1, 3, 4, 0.95) 100%);
	border: 2px solid #1e495b;
	border-radius: 8px;
	color: #b4f5f3;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	min-height: 50px;
}

.filter-dropdown-selected:hover {
	border-color: #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
}

.rankings-class-filter-dropdown.open .filter-dropdown-selected {
	border-color: #00f0ff;
	box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(236, 200, 148, 0.15) 100%);
}

.filter-selected-content {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.filter-selected-content .rankings-class-filter-image {
	width: 32px;
	height: 32px;
	object-fit: contain;
	flex-shrink: 0;
}

.filter-selected-text {
	color: #b4f5f3;
	font-weight: 500;
}

.rankings-class-filter-dropdown.open .filter-selected-text {
	color: #00f0ff;
}

.filter-dropdown-arrow {
	color: #00f0ff;
	font-size: 12px;
	transition: transform 0.3s;
	flex-shrink: 0;
	margin-left: 10px;
}

.rankings-class-filter-dropdown.open .filter-dropdown-arrow {
	transform: rotate(180deg);
	color: #ecc894;
}

.filter-dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.98) 0%, rgba(1, 3, 4, 0.98) 100%);
	border: 2px solid #1e495b;
	border-radius: 8px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1000;
	display: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.filter-dropdown-menu.active {
	display: block;
	animation: dropdownFadeIn 0.3s ease-out;
}

@keyframes dropdownFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.filter-dropdown-menu::-webkit-scrollbar {
	width: 8px;
}

.filter-dropdown-menu::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.filter-dropdown-menu::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.filter-dropdown-menu::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

.filter-dropdown-option {
	padding: 12px 20px;
	cursor: pointer;
	transition: all 0.3s;
	border-bottom: 1px solid rgba(30, 73, 91, 0.5);
}

.filter-dropdown-option:last-child {
	border-bottom: none;
}

.filter-dropdown-option:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(236, 200, 148, 0.15) 100%);
	border-left: 4px solid #00f0ff;
	padding-left: 16px;
}

.filter-dropdown-option.selected {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(236, 200, 148, 0.25) 100%);
	border-left: 4px solid #00f0ff;
	padding-left: 16px;
}

.filter-dropdown-option.selected .filter-option-text {
	color: #00f0ff;
	font-weight: bold;
}

.filter-option-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.filter-option-content .rankings-class-filter-image {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
	transition: transform 0.3s;
}

.filter-dropdown-option:hover .rankings-class-filter-image {
	transform: scale(1.1) rotate(5deg);
}

.filter-option-text {
	color: #b4f5f3;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s;
}

.filter-dropdown-option:hover .filter-option-text {
	color: #00f0ff;
}

.filter-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
	color: #00f0ff;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.filter-icon {
	font-size: 20px;
	animation: iconPulse 2s ease-in-out infinite;
}

.rankings-class-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.rankings-class-filter li {
	margin: 0;
}

.rankings-class-filter-selection {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid #1e495b;
	border-radius: 8px;
	text-decoration: none;
	color: #b4f5f3;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	min-width: 100px;
	position: relative;
	overflow: hidden;
}

.rankings-class-filter-selection::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
}

.rankings-class-filter-selection:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	transform: translateY(-5px) scale(1.05);
}

.rankings-class-filter-selection:hover::before {
	opacity: 1;
}

.rankings-class-filter-selection:not(.rankings-class-filter-grayscale) {
	border-color: #00f0ff;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
}

.rankings-class-filter-selection.rankings-class-filter-grayscale {
	opacity: 0.5;
	filter: grayscale(100%);
}

.rankings-class-filter-selection.rankings-class-filter-grayscale:hover {
	opacity: 0.8;
	filter: grayscale(50%);
}

.rankings-class-filter-image {
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	border-radius: 6px;
	transition: transform 0.3s;
}

.rankings-class-filter-selection:hover .rankings-class-filter-image {
	transform: scale(1.1) rotate(5deg);
}

/* Enhanced Rankings Table */
.rankings-table-container {
	width: 100%;
	max-width: 100%;
	margin-bottom: 30px;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}

.rankings-table-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	max-width: 100%;
	position: relative;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Asegurar que la tabla no exceda el ancho del contenedor */
.rankings-table-wrapper .rankings-table-enhanced {
	max-width: 100%;
	width: 100%;
}

.rankings-table-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(5, 14, 27, 0.8) 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 10;
}

.rankings-table-wrapper.scrollable::after {
	opacity: 1;
}

.rankings-table-wrapper::-webkit-scrollbar {
	height: 8px;
}

.rankings-table-wrapper::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.rankings-table-wrapper::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.rankings-table-wrapper::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

.rankings-table-enhanced,
.rankings-table.rankings-table-enhanced {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: inset 0px 0px 40px 5px rgba(12, 35, 53, 0.5), 0px 0px 30px 2px rgba(0, 0, 0, 0.4);
	table-layout: fixed;
	box-sizing: border-box;
}

/* Permitir que los tooltips del thead se muestren */
.rankings-table-enhanced thead {
	position: relative;
	z-index: 10;
	display: table-header-group;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(236, 200, 148, 0.15) 100%);
}

.rankings-table-enhanced thead th {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 15px 12px !important;
	position: relative;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: left;
	border: none;
	border-bottom: 2px solid #0066ff;
	margin: 0;
	color: #0066ff;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: auto;
}

.rankings-table-enhanced thead th.rank-place {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	padding: 15px 8px !important;
	text-align: center;
	box-sizing: border-box;
}

.rankings-table-enhanced thead th.rank-country {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	padding: 15px 8px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced thead th.rank-class {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	padding: 15px 10px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced thead th.rank-character {
	width: 130px !important;
	min-width: 80px !important;
	max-width: 130px !important;
	padding: 15px 12px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced thead th.rank-level {
	width: 140px !important;
	min-width: 120px !important;
	max-width: 160px !important;
	padding: 15px 12px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced thead th.rank-location {
	width: 150px !important;
	min-width: 60px !important;
	max-width: 150px !important;
	padding: 15px 12px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced tbody td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 15px 12px !important;
	box-sizing: border-box;
	vertical-align: middle;
	border: none;
	margin: 0;
}

.rankings-table-enhanced tbody td.rank-place-cell {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	padding: 15px 8px !important;
	text-align: center;
	box-sizing: border-box;
}

.rankings-table-enhanced tbody td.rank-country-cell {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	padding: 15px 8px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced tbody td.rank-class-cell {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	padding: 15px 10px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced tbody td.rank-character-cell {
	width: 150px !important;
	min-width: 80px !important;
	max-width: 150px !important;
	padding: 15px 12px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced tbody td.rank-level-cell {
	width: 140px !important;
	min-width: 120px !important;
	max-width: 160px !important;
	padding: 15px 12px !important;
	box-sizing: border-box;
}

.rankings-table-enhanced tbody td.rank-location-cell {
	width: 130px !important;
	min-width: 50px !important;
	max-width: 130px !important;
	padding: 15px 12px !important;
	box-sizing: border-box;
}

/* Asegurar que las celdas no se expandan más de lo necesario */
.rankings-table-enhanced tbody td.rank-character-cell {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.rankings-table-enhanced tbody td.rank-location-cell {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Ajustar anchos de columnas para mejor distribución */
.rankings-table-enhanced .rank-place,
.rankings-table-enhanced th.rank-place,
.rankings-table-enhanced td.rank-place-cell {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
}

.rankings-table-enhanced .rank-country,
.rankings-table-enhanced th.rank-country,
.rankings-table-enhanced td.rank-country-cell {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	padding: 15px 8px !important;
}

.rankings-table-enhanced .rank-class,
.rankings-table-enhanced th.rank-class,
.rankings-table-enhanced td.rank-class-cell {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	padding: 15px 10px !important;
}

.rankings-table-enhanced .rank-character,
.rankings-table-enhanced th.rank-character,
.rankings-table-enhanced td.rank-character-cell {
	width: 200px !important;
	min-width: 150px !important;
	max-width: 250px !important;
	padding: 15px 12px !important;
}

.rankings-table-enhanced .rank-level,
.rankings-table-enhanced th.rank-level,
.rankings-table-enhanced td.rank-level-cell {
	width: 140px !important;
	min-width: 120px !important;
	max-width: 160px !important;
	padding: 15px 12px !important;
}

.rankings-table-enhanced .rank-location,
.rankings-table-enhanced th.rank-location,
.rankings-table-enhanced td.rank-location-cell {
	width: 180px !important;
	min-width: 150px !important;
	max-width: 220px !important;
	padding: 15px 12px !important;
}

/* Columnas adicionales para diferentes rankings */
.rankings-table-enhanced .rank-resets,
.rankings-table-enhanced th.rank-resets,
.rankings-table-enhanced td.rank-resets-cell {
	width: 120px !important;
	min-width: 100px !important;
	max-width: 140px !important;
}

.rankings-table-enhanced .rank-kills,
.rankings-table-enhanced th.rank-kills,
.rankings-table-enhanced td.rank-kills-cell {
	width: 120px !important;
	min-width: 100px !important;
	max-width: 140px !important;
}

.rankings-table-enhanced .rank-pk-level,
.rankings-table-enhanced th.rank-pk-level,
.rankings-table-enhanced td.rank-pk-level-cell {
	width: 100px;
	min-width: 80px;
	max-width: 120px;
}

.rankings-table-enhanced .rank-master-level,
.rankings-table-enhanced th.rank-master-level,
.rankings-table-enhanced td.rank-master-level-cell {
	width: 120px !important;
	min-width: 100px !important;
	max-width: 140px !important;
}

.rankings-table-enhanced .rank-grandresets,
.rankings-table-enhanced th.rank-grandresets,
.rankings-table-enhanced td.rank-grandresets-cell {
	width: 140px;
	min-width: 120px;
	max-width: 160px;
}

.rankings-table-enhanced .rank-guild-name,
.rankings-table-enhanced th.rank-guild-name,
.rankings-table-enhanced td.rank-guild-name-cell {
	width: 200px !important;
	min-width: 150px !important;
	max-width: 250px !important;
}

.rankings-table-enhanced .rank-guild-logo,
.rankings-table-enhanced th.rank-guild-logo,
.rankings-table-enhanced td.rank-guild-logo-cell {
	width: 80px;
	min-width: 80px;
	max-width: 80px;
}

.rankings-table-enhanced .rank-guild-master,
.rankings-table-enhanced th.rank-guild-master,
.rankings-table-enhanced td.rank-guild-master-cell {
	width: auto;
	min-width: 150px;
	max-width: 200px;
}

.rankings-table-enhanced .rank-guild-score,
.rankings-table-enhanced th.rank-guild-score,
.rankings-table-enhanced td.rank-guild-score-cell {
	width: 140px;
	min-width: 120px;
	max-width: 160px;
}

/* Badges para diferentes tipos de datos */
.resets-badge,
.kills-badge,
.master-level-badge,
.grandresets-badge,
.guild-score-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 6px;
	text-align: center;
}

.resets-value,
.kills-value,
.master-level-value,
.grandresets-value,
.guild-score-value {
	font-size: 16px;
	font-weight: bold;
	color: #00f0ff;
	margin-bottom: 4px;
}

.resets-label,
.kills-label,
.master-level-label,
.grandresets-label,
.guild-score-label {
	font-size: 11px;
	color: #b4f5f3;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pk-level-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background: linear-gradient(135deg, rgba(255, 33, 39, 0.2) 0%, rgba(255, 100, 100, 0.1) 100%);
	border: 1px solid rgba(255, 33, 39, 0.4);
	border-radius: 6px;
}

.pk-level-value {
	font-size: 14px;
	font-weight: bold;
	color: #ff2127;
}

.guild-info,
.guild-master-info {
	display: flex;
	align-items: center;
	gap: 8px;
}

.guild-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Estilos consolidados para thead - ya definidos arriba */

.rankings-table-enhanced thead th::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #00f0ff 0%, #ecc894 100%);
	transition: width 0.3s;
}

.rankings-table-enhanced thead th:hover::after {
	width: 100%;
}

.th-icon {
	font-size: 16px;
	margin-right: 8px;
	margin-left: 10px;
	vertical-align: middle;
	position: relative;
	cursor: help;
	display: inline-block;
	transition: all 0.3s ease;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.rank-level .th-icon {
	font-size: 16px;
	margin-right: 8px;
	margin-left: 40px !important;
	vertical-align: middle;
	position: relative;
	cursor: help;
	display: inline-block;
	transition: all 0.3s ease;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.rank-location .th-icon {
	font-size: 16px;
	margin-right: 8px;
	margin-left: 40px !important;
	vertical-align: middle;
	position: relative;
	cursor: help;
	display: inline-block;
	transition: all 0.3s ease;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.th-icon:hover {
	transform: scale(1.2);
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8));
}

/* Tooltip para iconos del header - Usando JavaScript para posicionamiento dinámico */
.th-icon-tooltip {
	position: fixed !important;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.95) 0%, rgba(236, 200, 148, 0.95) 100%);
	color: #050e1b;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	z-index: 999999 !important;
	box-shadow: 0 4px 20px rgba(0, 240, 255, 0.4), 0 0 30px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transform: translateX(-50%) translateY(-100%) translateY(-10px);
}

.th-icon-tooltip.show {
	opacity: 1;
	transform: translateX(-50%) translateY(-100%) translateY(-5px);
}

.th-icon-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(0, 240, 255, 0.95);
}

.th-label {
	vertical-align: middle;
	/* Ocultar labels en pantallas grandes, mostrar solo en móviles si es necesario */
	display: none;
}

/* En móviles, mostrar labels si no hay tooltip */
@media (max-width: 768px) {
	.th-label {
		display: inline;
		margin-left: 4px;
		font-size: 12px;
	}

	.th-icon-tooltip {
		display: none !important;
	}
}

.rankings-table-enhanced tbody tr {
	transition: all 0.3s;
	border-bottom: 1px solid #1e495b;
	animation: rowFadeIn 0.5s ease-out backwards;
}

.rankings-table-enhanced tbody tr:nth-child(1) {
	animation-delay: 0.1s;
}

.rankings-table-enhanced tbody tr:nth-child(2) {
	animation-delay: 0.15s;
}

.rankings-table-enhanced tbody tr:nth-child(3) {
	animation-delay: 0.2s;
}

.rankings-table-enhanced tbody tr:nth-child(4) {
	animation-delay: 0.25s;
}

.rankings-table-enhanced tbody tr:nth-child(5) {
	animation-delay: 0.3s;
}

.rankings-table-enhanced tbody tr:nth-child(6) {
	animation-delay: 0.35s;
}

.rankings-table-enhanced tbody tr:nth-child(7) {
	animation-delay: 0.4s;
}

.rankings-table-enhanced tbody tr:nth-child(8) {
	animation-delay: 0.45s;
}

.rankings-table-enhanced tbody tr:nth-child(9) {
	animation-delay: 0.5s;
}

.rankings-table-enhanced tbody tr:nth-child(10) {
	animation-delay: 0.55s;
}

.rankings-table-enhanced tbody tr:nth-child(n+11) {
	animation-delay: 0.6s;
}

@keyframes rowFadeIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.rankings-table-enhanced tbody tr.top-1 {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
	border-left: 4px solid #ffd700;
}

.rankings-table-enhanced tbody tr.top-2 {
	background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(169, 169, 169, 0.05) 100%);
	border-left: 4px solid #c0c0c0;
}

.rankings-table-enhanced tbody tr.top-3 {
	background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(184, 115, 51, 0.05) 100%);
	border-left: 4px solid #cd7f32;
}

.rankings-table-enhanced tbody tr:hover {
	background: rgba(0, 240, 255, 0.1);
	transform: scale(1.01);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.rankings-table-enhanced tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.2);
}

.rankings-table-enhanced tbody tr:nth-child(even):hover {
	background: rgba(0, 240, 255, 0.15);
}

.rankings-table-enhanced tbody td {
	padding: 15px 12px;
	color: #b4f5f3;
	font-size: 14px;
	vertical-align: middle;
	transition: all 0.2s;
	box-sizing: border-box;
}

/* Rank Place Cell */
.rank-place-cell {
	text-align: center;
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	flex: 0 0 60px;
	overflow: hidden;
}

.rank-number {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #00f0ff;
	line-height: 1.2;
}

.rank-value {
	font-size: 14px !important;
	font-weight: 600;
	color: #00f0ff;
	line-height: 1.2;
}

.rank-medal {
	font-size: 20px !important;
	animation: medalBounce 2s ease-in-out infinite;
	line-height: 1;
	display: inline-block;
}

@keyframes medalBounce {

	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-5px) scale(1.1);
	}
}

.rank-value {
	font-size: 14px !important;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	line-height: 1.2;
}

/* Country Cell */
.rank-country-cell {
	text-align: center;
	width: 60px;
}

.country-flag img {
	width: 32px;
	height: auto;
	border-radius: 4px;
	border: 1px solid #1e495b;
	transition: transform 0.3s;
}

.country-flag:hover img {
	transform: scale(1.2);
}

/* Class Cell */
.rank-class-cell {
	text-align: center;
	width: 80px;
}

.class-avatar img {
	max-width: 50px;
	height: auto;
	border-radius: 6px;
	transition: transform 0.3s;
	filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
}

.class-avatar:hover img {
	transform: scale(1.15) rotate(5deg);
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

/* Character Cell */
.rank-character-cell {
	min-width: 200px;
}

.character-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.character-info a {
	color: #00f0ff;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.character-info a:hover {
	color: #ecc894;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.6);
	transform: translateX(3px);
}

.online-badge,
.offline-badge {
	font-size: 12px;
	display: inline-block;
	animation: badgePulse 2s ease-in-out infinite;
}

.online-badge .status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #00f0ff;
	box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
	animation: badgePulse 2s ease-in-out infinite;
}

.offline-badge .status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #666;
	box-shadow: 0 0 5px rgba(102, 102, 102, 0.5);
}

.character-online-badge .status-dot,
.character-offline-badge .status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.character-online-badge .status-dot {
	background: #00f0ff;
	box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
	animation: badgePulse 2s ease-in-out infinite;
}

.character-offline-badge .status-dot {
	background: #666;
	box-shadow: 0 0 5px rgba(102, 102, 102, 0.5);
}

@keyframes badgePulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

/* Level Cell */
.rank-level-cell {
	text-align: center;
	width: 120px;
}

.level-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 16px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 1px solid #00f0ff;
	border-radius: 6px;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
	transition: all 0.3s;
}

.level-badge:hover {
	box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
	transform: scale(1.1);
}

.level-value {
	color: #00f0ff;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.level-label {
	color: #b4f5f3;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 4px;
	opacity: 0.8;
}

/* Location Cell */
.rank-location-cell {
	min-width: 150px;
}

.location-info {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #b4f5f3;
}

.location-icon {
	font-size: 14px;
	opacity: 0.7;
}

.location-name {
	font-size: 13px;
}

/* Update Info */
.rankings-update-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	color: #b4f5f3;
	font-size: 13px;
	text-align: center;
}

.update-icon {
	font-size: 16px;
}

.update-text strong {
	color: #00f0ff;
	font-weight: bold;
}

/* Responsive Rankings Level */
@media (max-width: 1280px) {
	.rankings-header-title h1 {
		font-size: 24px;
	}

	.rankings-module .rankings-menu a,
	.rankings-module .rankings_menu a,
	.rankings-level-module .rankings-menu a,
	.rankings-level-module .rankings_menu a {
		padding: 10px 16px;
		font-size: 13px;
		min-width: 100px;
	}

	.rankings-table-container {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.rankings-table-wrapper {
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.rankings-table-enhanced {
		font-size: 12px;
		min-width: 700px;
		width: 100%;
		box-sizing: border-box;
	}

	.rankings-table-enhanced tbody td {
		padding: 10px 8px;
	}

	.rankings-table-enhanced thead th {
		padding: 12px 8px;
		font-size: 11px;
	}

	.rank-value {
		font-size: 16px;
	}

	.level-value {
		font-size: 16px;
	}

	.rank-place-cell {
		width: 60px;
		min-width: 60px;
		max-width: 60px;
	}

	.rank-country-cell {
		width: 50px;
		min-width: 50px;
		max-width: 50px;
	}

	.rank-class-cell {
		width: 70px;
		min-width: 70px;
		max-width: 70px;
	}

	.rank-character-cell {
		min-width: 120px;
		max-width: 180px;
	}

	.rank-level-cell {
		width: 90px;
		min-width: 90px;
		max-width: 100px;
	}

	.rank-location-cell {
		min-width: 100px;
		max-width: 140px;
	}

	.rankings-class-filter-select-wrapper {
		max-width: 100%;
	}
}

@media (max-width: 768px) {

	.rankings-module .rankings-menu,
	.rankings-module .rankings_menu {
		gap: 5px;
		padding-bottom: 10px;
	}

	.rankings-module .rankings-menu a,
	.rankings-module .rankings_menu a {
		padding: 8px 12px;
		font-size: 12px;
		min-width: 80px;
	}

	.rankings-table-enhanced {
		min-width: 600px;
		font-size: 11px;
	}

	.rankings-table-enhanced tbody td {
		padding: 8px 6px;
	}

	.rankings-table-enhanced thead th {
		padding: 10px 6px;
		font-size: 10px;
	}

	.rankings-class-filter-selection {
		padding: 10px;
		min-width: 80px;
	}

	.rankings-class-filter-image {
		width: 48px;
		height: 48px;
	}
}

.rankings-error {
	padding: 60px 40px;
	text-align: center;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid #ff2127;
	border-radius: 8px;
	color: #ff2127;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	margin: 20px auto;
	max-width: 600px;
	box-shadow: 0 0 30px rgba(255, 33, 39, 0.3);
}

.rankings-error .error-icon {
	font-size: 64px;
	margin-bottom: 20px;
	animation: errorPulse 2s ease-in-out infinite;
}

.rankings-error h3 {
	color: #ff2127;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.rankings-error p {
	color: #ff6b6b;
	font-size: 16px;
	margin: 0;
	line-height: 1.6;
}

/* 
	============================================   
	PLAYER PROFILE MODAL (Hover Preview)  
	============================================ 
*/
.player-profile-modal {
	position: fixed;
	z-index: 999998;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.9) translateY(-10px);
	transition: opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.player-profile-modal.active {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;

}

.player-profile-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: -1;

}

.player-profile-modal-content {
	position: relative;
	width: 350px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 240, 255, 0.3), 0 0 60px rgba(0, 0, 0, 0.5), inset 0px 0px 20px rgba(0, 240, 255, 0.1);
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

}

.player-profile-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	color: #00f0ff;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;

}

.player-profile-modal-close:hover {
	background: rgba(0, 240, 255, 0.2);
	border-color: #00f0ff;
	transform: rotate(90deg);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);

}

.player-profile-loading {
	padding: 40px 20px;
	text-align: center;
	color: #00f0ff;

}

.profile-loader-spinner {
	width: 50px;
	height: 50px;
	margin: 0 auto 20px;
	border: 4px solid rgba(0, 240, 255, 0.2);
	border-top-color: #00f0ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;

}

.player-profile-loading p {
	margin: 0;
	font-size: 14px;
	color: #ecc894;
	text-shadow: 0 0 5px rgba(236, 200, 148, 0.5);

}

.player-profile-content {
	padding: 20px;

}

.player-profile-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);

}

.player-profile-avatar {
	width: 80px;
	height: 80px;
	margin-right: 15px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	background: rgba(0, 240, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;

}

.player-profile-avatar:hover {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);

}

.player-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;

}

.player-profile-title {
	flex: 1;

}

.player-profile-name {
	margin: 0 0 5px 0;
	font-size: 20px;
	font-weight: bold;
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;

}

.player-profile-class {
	display: block;
	font-size: 14px;
	color: #ecc894;
	font-style: italic;
	text-shadow: 0 0 5px rgba(236, 200, 148, 0.3);

}

.player-profile-stats {
	margin-bottom: 20px;

}

.player-stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 240, 255, 0.1);
	transition: background 0.3s ease;

}

.player-stat-row:hover {
	background: rgba(0, 240, 255, 0.05);
	border-radius: 4px;
	padding-left: 10px;
	padding-right: 10px;

}

.player-stat-row:last-child {
	border-bottom: none;

}

.stat-label {
	font-size: 13px;
	color: #ecc894;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;

}

.stat-value {
	font-size: 14px;
	color: #00f0ff;
	font-weight: bold;
	text-align: right;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);

}

.player-status.online {
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
	animation: statusPulse 2s ease-in-out infinite;

}

.player-status.offline {
	color: #ff6b6b;
	text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);

}

@keyframes statusPulse {

	0%,
	100% {
		opacity: 1;

	}

	50% {
		opacity: 0.7;

	}


}

.player-profile-actions {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 240, 255, 0.2);
	text-align: center;

}

.player-profile-link-btn {
	display: inline-block;
	padding: 12px 30px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid #00f0ff;
	border-radius: 6px;
	color: #00f0ff;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);

}

.player-profile-link-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
	transition: left 0.5s ease;

}

.player-profile-link-btn:hover::before {
	left: 100%;

}

.player-profile-link-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #ecc894;
	color: #ecc894;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	transform: translateY(-2px);

}

.player-profile-link-btn:active {
	transform: translateY(0);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);

}


/* Responsive para modal */
@media (max-width: 768px) {
	.player-profile-modal-content {
		width: 300px;

	}

	.player-profile-header {
		flex-direction: column;
		text-align: center;

	}

	.player-profile-avatar {
		margin-right: 0;
		margin-bottom: 10px;

	}

	.player-profile-name {
		font-size: 18px;

	}

	.player-profile-class {
		font-size: 12px;

	}

	.stat-label,
	.stat-value {
		font-size: 12px;
	}
}

/* ============================================
   GUILD PROFILE MODAL (Hover Preview)
   ============================================ */
.guild-profile-modal {
	position: fixed;
	z-index: 999998;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.9) translateY(-10px);
	transition: opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.guild-profile-modal.active {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.guild-profile-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: -1;
}

.guild-profile-modal-content {
	position: relative;
	width: 350px;
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.98) 0%, rgba(1, 3, 4, 0.98) 100%);
	border: 2px solid #ecc894;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(236, 200, 148, 0.3), 0 0 60px rgba(0, 0, 0, 0.5), inset 0px 0px 20px rgba(236, 200, 148, 0.1);
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.guild-profile-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(236, 200, 148, 0.3);
	border-radius: 50%;
	color: #ecc894;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

.guild-profile-modal-close:hover {
	background: rgba(236, 200, 148, 0.2);
	border-color: #ecc894;
	transform: rotate(90deg);
	box-shadow: 0 0 15px rgba(236, 200, 148, 0.5);
}

.guild-profile-loading {
	padding: 40px 20px;
	text-align: center;
	color: #ecc894;
}

.guild-profile-content {
	padding: 20px;
}

.guild-profile-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(236, 200, 148, 0.2);
}

.guild-profile-logo {
	width: 80px;
	height: 80px;
	margin-right: 15px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid #ecc894;
	box-shadow: 0 0 20px rgba(236, 200, 148, 0.4);
	background: rgba(236, 200, 148, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.guild-profile-logo:hover {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 0 30px rgba(236, 200, 148, 0.6);
}

.guild-profile-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guild-profile-title {
	flex: 1;
}

.guild-profile-name {
	margin: 0 0 5px 0;
	font-size: 20px;
	font-weight: bold;
	color: #ecc894;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
}

.guild-profile-master {
	display: block;
	font-size: 14px;
	color: #00f0ff;
	font-style: italic;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.guild-profile-stats {
	margin-bottom: 20px;
}

.guild-stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(236, 200, 148, 0.1);
	transition: background 0.3s ease;
}

.guild-stat-row:hover {
	background: rgba(236, 200, 148, 0.05);
	border-radius: 4px;
	padding-left: 10px;
	padding-right: 10px;
}

.guild-stat-row:last-child {
	border-bottom: none;
}

.guild-profile-actions {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(236, 200, 148, 0.2);
	text-align: center;
}

.guild-profile-link-btn {
	display: inline-block;
	padding: 12px 30px;
	background: linear-gradient(135deg, rgba(236, 200, 148, 0.2) 0%, rgba(255, 218, 138, 0.2) 100%);
	border: 2px solid #ecc894;
	border-radius: 6px;
	color: #ecc894;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 15px rgba(236, 200, 148, 0.3);
}

.guild-profile-link-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(236, 200, 148, 0.3), transparent);
	transition: left 0.5s ease;
}

.guild-profile-link-btn:hover::before {
	left: 100%;
}

.guild-profile-link-btn:hover {
	background: linear-gradient(135deg, rgba(236, 200, 148, 0.3) 0%, rgba(255, 218, 138, 0.3) 100%);
	border-color: #ffda8a;
	color: #ffda8a;
	box-shadow: 0 0 20px rgba(236, 200, 148, 0.4);
	transform: translateY(-2px);
}

.guild-profile-link-btn:active {
	transform: translateY(0);
	box-shadow: 0 0 15px rgba(236, 200, 148, 0.3);
}

.guild-master-link {
	color: #00f0ff;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.guild-master-link:hover {
	color: #ecc894;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.6);
	text-decoration: underline;
}

/* Responsive para modal de guild */
@media (max-width: 768px) {
	.guild-profile-modal-content {
		width: 300px;
	}

	.guild-profile-header {
		flex-direction: column;
		text-align: center;
	}

	.guild-profile-logo {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.guild-profile-name {
		font-size: 18px;
	}

	.guild-profile-master {
		font-size: 12px;
	}
}

/* ============================================
   MODERN REGISTER FORM
   ============================================ */
.register-modern-container {
	max-width: 600px;
	margin: 40px auto;
	padding: 0 20px;
	animation: fadeInUp 0.6s ease-out;
}

.register-card {
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.95) 0%, rgba(1, 3, 4, 0.95) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 10px 40px rgba(0, 240, 255, 0.2), 0 0 80px rgba(0, 0, 0, 0.5);
	position: relative;
	overflow: hidden;
}

.register-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
	animation: rotate 20s linear infinite;
	pointer-events: none;
}

.register-header {
	text-align: center;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.register-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid #00f0ff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: pulse 2s ease-in-out infinite;
}

.register-icon svg {
	width: 40px;
	height: 40px;
	color: #00f0ff;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.register-title {
	font-size: 32px;
	font-weight: bold;
	color: #00f0ff;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 10px 0;
	text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
	animation: glow 2s ease-in-out infinite alternate;
}

.register-subtitle {
	font-size: 16px;
	color: #ecc894;
	margin: 0;
	opacity: 0.9;
}

.register-form {
	position: relative;
	z-index: 1;
}

.form-field-group {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.form-field {
	position: relative;
}

.field-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	transition: color 0.3s ease;
}

.field-icon {
	width: 20px;
	height: 20px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.field-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
}

.field-input {
	width: 100%;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.4);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	transition: all 0.3s ease;
	outline: none;
}

.field-input:focus {
	border-color: #00f0ff;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
	background: rgba(0, 0, 0, 0.6);
}

.field-input.valid {
	border-color: #00f0ff;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.field-input.error {
	border-color: #ff6b6b;
	box-shadow: 0 0 15px rgba(255, 107, 107, 0.2);
	animation: shake 0.5s ease;
}

.password-field-wrapper {
	position: relative;
}

.password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #00f0ff;
	cursor: pointer;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease;
	width: 24px;
	height: 24px;
}

.password-toggle svg {
	width: 18px;
	height: 18px;
}

.password-toggle:hover {
	color: #ecc894;
}

.password-toggle .eye-closed {
	display: none;
}

.password-toggle.active .eye-open {
	display: none;
}

.password-toggle.active .eye-closed {
	display: block;
}

.field-hint {
	display: block;
	font-size: 12px;
	color: rgba(236, 200, 148, 0.6);
	margin-top: 6px;
	font-style: italic;
}

.field-validation {
	font-size: 12px;
	margin-top: 6px;
	min-height: 18px;
	transition: all 0.3s ease;
}

.field-validation.error {
	color: #ff6b6b;
	animation: fadeIn 0.3s ease;
}

.field-validation.valid {
	color: #00f0ff;
}

.recaptcha-field {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

.terms-field {
	margin: 20px 0;
}

.terms-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.terms-checkbox-label input[type="checkbox"] {
	display: none;
}

.checkbox-custom {
	width: 24px;
	height: 24px;
	border: 2px solid rgba(0, 240, 255, 0.5);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.4);
	position: relative;
	flex-shrink: 0;
	transition: all 0.3s ease;
	margin-top: 2px;
}

.terms-checkbox-label input[type="checkbox"]:checked+.checkbox-custom {
	background: #00f0ff;
	border-color: #00f0ff;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.terms-checkbox-label input[type="checkbox"]:checked+.checkbox-custom::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #000;
	font-weight: bold;
	font-size: 16px;
}

.terms-text {
	flex: 1;
	font-size: 14px;
	color: #ecc894;
	line-height: 1.6;
}

.terms-link {
	background: none;
	border: none;
	color: #00f0ff;
	text-decoration: underline;
	cursor: pointer;
	font-size: 14px;
	padding: 0;
	margin-left: 4px;
	transition: color 0.3s ease;
}

.terms-link:hover {
	color: #ecc894;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.5);
}

.form-actions {
	margin-top: 30px;
}

.register-submit-btn {
	width: 100%;
	padding: 16px 32px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid #00f0ff;
	border-radius: 8px;
	color: #00f0ff;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.register-submit-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.register-submit-btn:hover::before {
	left: 100%;
}

.register-submit-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: #ecc894;
	color: #ecc894;
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
	transform: translateY(-2px);
}

.register-submit-btn:active:not(:disabled) {
	transform: translateY(0);
}

.register-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	border-color: rgba(0, 240, 255, 0.2);
}

.register-submit-btn.loading .btn-text {
	opacity: 0;
}

.register-submit-btn.loading .btn-loader {
	display: block;
}

.btn-loader {
	display: none;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
}

.btn-loader svg {
	width: 100%;
	height: 100%;
	color: currentColor;
}

/* Modal de Términos y Condiciones */
.terms-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000001;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.terms-modal.active {
	opacity: 1;
	visibility: visible;
}

.terms-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 1;
}

.terms-modal-content {
	background: linear-gradient(135deg, rgba(5, 14, 27, 0.98) 0%, rgba(1, 3, 4, 0.98) 100%);
	border: 2px solid #00f0ff;
	border-radius: 16px;
	box-shadow: 0 10px 50px rgba(0, 240, 255, 0.3), 0 0 100px rgba(0, 0, 0, 0.6);
	width: 90%;
	max-width: 800px;
	max-height: 90vh;
	position: relative;
	z-index: 2;
	transform: translateY(-20px) scale(0.95);
	opacity: 0;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.terms-modal.active .terms-modal-content {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.terms-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 30px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	background: rgba(0, 240, 255, 0.05);
}

.terms-modal-title {
	font-size: 24px;
	font-weight: bold;
	color: #00f0ff;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.terms-modal-close {
	width: 35px;
	height: 35px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	color: #00f0ff;
	font-size: 24px;
	line-height: 33px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.terms-modal-close:hover {
	background: rgba(0, 240, 255, 0.2);
	border-color: #00f0ff;
	transform: rotate(90deg);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.terms-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 30px;
}

.terms-content {
	color: #ecc894;
	line-height: 1.8;
	font-size: 14px;
}

.terms-content h3 {
	color: #00f0ff;
	margin-top: 25px;
	margin-bottom: 15px;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.terms-content p {
	margin-bottom: 15px;
}

.terms-content ol,
.terms-content ul {
	margin-left: 20px;
	margin-bottom: 15px;
}

.terms-content li {
	margin-bottom: 8px;
}

.terms-modal-footer {
	display: flex;
	gap: 15px;
	padding: 25px 30px;
	border-top: 1px solid rgba(0, 240, 255, 0.2);
	background: rgba(0, 240, 255, 0.05);
	justify-content: flex-end;
}

.terms-accept-btn,
.terms-cancel-btn {
	padding: 14px 32px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	box-sizing: border-box;
}

.terms-accept-btn {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: #00f0ff;
	color: #00f0ff;
}

.terms-accept-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	transform: translateY(-2px);
}

.terms-cancel-btn {
	background: transparent;
	border-color: rgba(236, 200, 148, 0.5);
	color: #ecc894;
}

.terms-cancel-btn:hover {
	border-color: #ecc894;
	background: rgba(236, 200, 148, 0.1);
	box-shadow: 0 0 15px rgba(236, 200, 148, 0.3);
}

body.modal-open {
	overflow: hidden;
}

/* Animaciones */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
	}

	50% {
		transform: scale(1.05);
		box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
	}
}

@keyframes glow {
	from {
		text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
	}

	to {
		text-shadow: 0 0 30px rgba(0, 240, 255, 0.8), 0 0 40px rgba(0, 240, 255, 0.4);
	}
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-5px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(5px);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.register-modern-container {
		margin: 20px auto;
		padding: 0 15px;
	}

	.register-card {
		padding: 30px 20px;
	}

	.register-title {
		font-size: 24px;
	}

	.terms-modal-content {
		width: 95%;
		max-height: 95vh;
	}

	.terms-modal-header,
	.terms-modal-footer {
		padding: 20px;
	}

	.terms-modal-body {
		padding: 20px;
	}

	.terms-modal-footer {
		flex-direction: column;
	}

	.terms-accept-btn,
	.terms-cancel-btn {
		width: 100%;
	}
}

/* ============================================
   UserCP Modules - Modern Design
   ============================================ */

/* UserCP Main Grid */
.usercp-modern-container {
	padding: 30px 0;
}

.usercp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 25px;
	margin-top: 30px;
}

.usercp-card-animated {
	display: block;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.usercp-card-animated:hover {
	transform: translateY(-5px);
	text-decoration: none;
	color: inherit;
}

.usercp-card-inner {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	padding: 25px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.usercp-card-animated:hover .usercp-card-inner {
	border-color: rgba(0, 240, 255, 0.6);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
}

.usercp-card-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 15px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.usercp-card-animated:hover .usercp-card-icon {
	transform: scale(1.1) rotate(5deg);
}

.usercp-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
	position: relative;
	z-index: 2;
}

.usercp-card-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.3s ease;
	animation: pulse 2s ease-in-out infinite;
}

.usercp-card-animated:hover .usercp-card-glow {
	opacity: 1;
}

.usercp-card-icon.reset-bg {
	background: linear-gradient(135deg, rgba(255, 100, 100, 0.2) 0%, rgba(255, 150, 150, 0.2) 100%);
	border: 2px solid rgba(255, 100, 100, 0.5);
}

.usercp-card-icon.account-bg {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(100, 200, 255, 0.2) 100%);
	border: 2px solid rgba(0, 240, 255, 0.5);
}

.usercp-card-icon.security-bg {
	background: linear-gradient(135deg, rgba(255, 200, 0, 0.2) 0%, rgba(255, 150, 50, 0.2) 100%);
	border: 2px solid rgba(255, 200, 0, 0.5);
}

.usercp-card-icon.stats-bg {
	background: linear-gradient(135deg, rgba(150, 100, 255, 0.2) 0%, rgba(200, 150, 255, 0.2) 100%);
	border: 2px solid rgba(150, 100, 255, 0.5);
}

.usercp-card-icon.credits-bg {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 200, 50, 0.2) 100%);
	border: 2px solid rgba(255, 215, 0, 0.5);
}

.usercp-card-icon.default-bg {
	background: linear-gradient(135deg, rgba(100, 100, 100, 0.2) 0%, rgba(150, 150, 150, 0.2) 100%);
	border: 2px solid rgba(100, 100, 100, 0.5);
}

.usercp-card-content {
	position: relative;
	z-index: 2;
}

.usercp-card-title {
	font-size: 16px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	transition: color 0.3s ease;
}

.usercp-card-animated:hover .usercp-card-title {
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.usercp-card-arrow {
	width: 24px;
	height: 24px;
	margin: 10px auto 0;
	color: rgba(0, 240, 255, 0.5);
	transition: all 0.3s ease;
}

.usercp-card-animated:hover .usercp-card-arrow {
	color: #00f0ff;
	transform: translateX(5px);
}

.usercp-card-hover-effect {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
	transition: left 0.5s ease;
}

.usercp-card-animated:hover .usercp-card-hover-effect {
	left: 100%;
}

/* UserCP Module Container */
.usercp-module-container {
	padding: 30px 0;
}

/* Account Info Card */
.usercp-card-modern {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	margin-bottom: 30px;
	overflow: hidden;
	animation: slideInUp 0.5s ease;
}

.usercp-card-header {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px 25px;
	background: rgba(0, 0, 0, 0.3);
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.card-header-icon {
	width: 40px;
	height: 40px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-header-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5));
}

.card-header-title {
	font-size: 20px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.usercp-card-body {
	padding: 25px;
}

/* Info Grid */
.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.info-item:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.4);
	transform: translateX(5px);
}

.info-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.info-label svg {
	width: 18px;
	height: 18px;
	color: #00f0ff;
}

.info-value {
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	display: flex;
	align-items: center;
	gap: 10px;
}

.status-badge {
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.status-badge.online {
	background: rgba(0, 240, 255, 0.2);
	color: #00f0ff;
	border: 1px solid rgba(0, 240, 255, 0.5);
}

.status-badge.offline {
	background: rgba(255, 0, 0, 0.2);
	color: #ff0000;
	border: 1px solid rgba(255, 0, 0, 0.5);
}

.status-badge.active {
	background: rgba(0, 240, 255, 0.2);
	color: #00f0ff;
	border: 1px solid rgba(0, 240, 255, 0.5);
}

.status-badge.blocked {
	background: rgba(255, 100, 100, 0.2);
	color: #ff6464;
	border: 1px solid rgba(255, 100, 100, 0.5);
}

.action-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	color: #00f0ff;
	font-size: 12px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.action-link-btn:hover {
	background: rgba(0, 240, 255, 0.2);
	border-color: rgba(0, 240, 255, 0.5);
	color: #00f0ff;
	text-decoration: none;
}

.action-link-btn svg {
	width: 14px;
	height: 14px;
}

.password-mask {
	color: #888;
	letter-spacing: 2px;
}

.credit-item {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 200, 50, 0.1) 100%);
	border-color: rgba(255, 215, 0, 0.3);
}

.credit-value {
	color: #ffd700;
	font-size: 18px;
}

/* Characters Grid */
.characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 25px;
}

.character-card {
	background: rgba(0, 0, 0, 0.3);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.character-card:hover {
	border-color: rgba(0, 240, 255, 0.6);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
}

.character-card-header {
	margin-bottom: 15px;
}

.character-name-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.character-online-badge,
.character-offline-badge {
	font-size: 12px;
}

.character-avatar-wrapper {
	position: relative;
	margin-bottom: 15px;
}

.character-avatar-link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.character-avatar-img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.character-avatar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 240, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.character-avatar-overlay svg {
	width: 40px;
	height: 40px;
	color: #fff;
}

.character-avatar-link:hover .character-avatar-img {
	transform: scale(1.1);
}

.character-avatar-link:hover .character-avatar-overlay {
	opacity: 1;
}

.character-info-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.character-location {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	color: #ecc894;
}

.character-location svg {
	width: 16px;
	height: 16px;
	color: #00f0ff;
}

.character-coords {
	font-size: 12px;
	color: #888;
}

.character-level {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
	color: #00f0ff;
}

.character-level svg {
	width: 20px;
	height: 20px;
}

.level-value {
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* History Table */
.history-card {
	animation: slideInUp 0.7s ease;
}

.history-table-wrapper {
	overflow-x: auto;
}

.history-table {
	width: 100%;
	border-collapse: collapse;
}

.history-table thead {
	background: rgba(0, 0, 0, 0.5);
}

.history-table th {
	padding: 12px 15px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.3);
}

.history-table td {
	padding: 12px 15px;
	font-size: 14px;
	color: #ccc;
	border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}

.history-table tbody tr {
	transition: background 0.3s ease;
}

.history-table tbody tr:hover {
	background: rgba(0, 240, 255, 0.1);
}

.connection-status {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.connection-status.success {
	background: rgba(0, 240, 255, 0.2);
	color: #00f0ff;
}

.connection-status.failed {
	background: rgba(255, 0, 0, 0.2);
	color: #ff0000;
}

/* Reset Character Cards */
.reset-characters-grid,
.addstats-characters-grid,
.clearpk-characters-grid,
.unstick-characters-grid,
.resetstats-characters-grid,
.clearskilltree-characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
}

.reset-character-card,
.addstats-character-card,
.clearpk-character-card,
.unstick-character-card,
.resetstats-character-card,
.clearskilltree-character-card {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.reset-character-card:hover,
.addstats-character-card:hover,
.clearpk-character-card:hover,
.unstick-character-card:hover,
.resetstats-character-card:hover,
.clearskilltree-character-card:hover {
	border-color: rgba(0, 240, 255, 0.6);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
	transform: translateY(-5px);
}

.reset-character-header,
.addstats-character-header,
.clearpk-character-header,
.unstick-character-header,
.resetstats-character-header,
.clearskilltree-character-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.reset-character-avatar,
.addstats-character-avatar,
.clearpk-character-avatar,
.unstick-character-avatar,
.resetstats-character-avatar,
.clearskilltree-character-avatar {
	flex-shrink: 0;
}

.reset-character-avatar img,
.addstats-character-avatar img,
.clearpk-character-avatar img,
.unstick-character-avatar img,
.resetstats-character-avatar img,
.clearskilltree-character-avatar img {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	border: 2px solid rgba(0, 240, 255, 0.3);
}

.reset-character-name,
.addstats-character-name,
.clearpk-character-name,
.unstick-character-name,
.resetstats-character-name,
.clearskilltree-character-name {
	flex: 1;
	font-size: 18px;
	font-weight: 600;
	color: #ecc894;
}

.reset-character-stats,
.addstats-character-stats,
.clearpk-character-stats,
.unstick-character-stats,
.resetstats-character-stats,
.clearskilltree-character-stats {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 20px;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
}

.stat-icon {
	width: 24px;
	height: 24px;
	color: #00f0ff;
	flex-shrink: 0;
}

.stat-icon svg {
	width: 100%;
	height: 100%;
}

.stat-label {
	flex: 1;
	font-size: 14px;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-value {
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
}

.pk-stat {
	background: rgba(255, 100, 100, 0.1);
	border-color: rgba(255, 100, 100, 0.3);
}

.pk-icon {
	color: #ff6464;
}

.pk-level {
	color: #ff6464;
}

.clearpk-character-card.has-pk {
	border-color: rgba(255, 100, 100, 0.5);
}

.clearpk-character-card.no-pk {
	opacity: 0.7;
}

/* Add Stats Form */
.addstats-character-info {
	flex: 1;
}

.character-points {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14px;
	color: #00f0ff;
}

.character-points svg {
	width: 18px;
	height: 18px;
}

.addstats-form-fields {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 20px;
}

.stat-input-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stat-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-label svg {
	width: 16px;
	height: 16px;
	color: #00f0ff;
}

.current-stat {
	font-size: 12px;
	color: #888;
	font-weight: normal;
	text-transform: none;
}

.stat-input {
	width: 100%;
	padding: 12px 14px;
	background: rgba(0, 0, 0, 0.4);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	transition: all 0.3s ease;
}

.stat-input:focus {
	outline: none;
	border-color: rgba(0, 240, 255, 0.6);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Buttons */
.reset-character-btn,
.addstats-submit-btn,
.clearpk-submit-btn,
.unstick-character-btn,
.vote-site-btn,
.resetstats-character-btn,
.clearskilltree-character-btn {
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	color: #00f0ff;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.reset-character-btn:hover,
.addstats-submit-btn:hover,
.clearpk-submit-btn:hover:not(:disabled),
.unstick-character-btn:hover,
.vote-site-btn:hover,
.resetstats-character-btn:hover,
.clearskilltree-character-btn:hover {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border-color: 2px solid rgb(88 159 247 / 30%);
	box-shadow: 0 5px 20px rgba(0, 240, 255, 0.3);
	transform: translateY(-2px);
}

.reset-character-btn:disabled,
.clearpk-submit-btn:disabled,
.resetstats-character-btn:disabled,
.clearskilltree-character-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-icon,
.btn-text,
.btn-loader {
	position: relative;
	z-index: 2;
}

.btn-icon svg {
	width: 20px;
	height: 20px;
}

.btn-loader {
	display: none;
	width: 20px;
	height: 20px;
	animation: spin 1s linear infinite;
}

.reset-character-form.loading .btn-text,
.addstats-form.loading .btn-text,
.clearpk-form.loading .btn-text,
.unstick-character-form.loading .btn-text,
.vote-site-form.loading .btn-text {
	opacity: 0;
}

.reset-character-form.loading .btn-loader,
.addstats-form.loading .btn-loader,
.clearpk-form.loading .btn-loader,
.unstick-character-form.loading .btn-loader,
.vote-site-form.loading .btn-loader {
	display: block;
}

/* Requirements Card */
.module-requirements-card {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	padding: 25px;
	margin-top: 30px;
	animation: slideInUp 0.7s ease;
}

.requirements-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.requirements-header svg {
	width: 32px;
	height: 32px;
	color: #00f0ff;
	flex-shrink: 0;
}

.requirements-header h4 {
	font-size: 18px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.requirements-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.requirement-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.requirement-item:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.4);
	transform: translateX(5px);
}

.requirement-item svg {
	width: 20px;
	height: 20px;
	color: #00f0ff;
	flex-shrink: 0;
}

.requirement-item span {
	font-size: 14px;
	color: #ecc894;
}

.requirement-item.reward-item {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 200, 50, 0.1) 100%);
	border-color: rgba(255, 215, 0, 0.3);
}

.requirement-item.reward-item svg {
	color: #ffd700;
}

.requirement-item.warning-item {
	background: linear-gradient(135deg, rgba(255, 100, 100, 0.1) 0%, rgba(255, 150, 150, 0.1) 100%);
	border-color: rgba(255, 100, 100, 0.3);
}

.requirement-item.warning-item svg {
	color: #ff6464;
}

/* Form Card */
.usercp-form-card {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	overflow: hidden;
	animation: slideInUp 0.5s ease;
}

.usercp-form-modern {
	padding: 25px;
}

.usercp-submit-btn {
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	color: #00f0ff;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.usercp-submit-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: rgba(0, 240, 255, 0.8);
	box-shadow: 0 5px 20px rgba(0, 240, 255, 0.3);
	transform: translateY(-2px);
}

.usercp-form-modern.loading .usercp-submit-btn .btn-text {
	opacity: 0;
}

.usercp-form-modern.loading .usercp-submit-btn .btn-loader {
	display: block;
}

/* Vote Sites Grid */
.vote-sites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
}

.vote-site-card {
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.vote-site-card:hover {
	border-color: rgba(0, 240, 255, 0.6);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
	transform: translateY(-5px);
}

.vote-site-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.vote-site-icon {
	width: 40px;
	height: 40px;
	color: #00f0ff;
	flex-shrink: 0;
}

.vote-site-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5));
}

.vote-site-title {
	font-size: 18px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.vote-site-reward {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 215, 0, 0.3);
	border-radius: 8px;
	margin-bottom: 20px;
}

.reward-icon {
	width: 32px;
	height: 32px;
	color: #ffd700;
	flex-shrink: 0;
}

.reward-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.reward-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.reward-label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.reward-value {
	font-size: 18px;
	font-weight: 600;
	color: #ffd700;
}

/* Animations */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* UserCP Sidebar Widget */
.usercp-widget-modern {
	position: relative;
	overflow: hidden;
}

.user-info-modern {
	padding: 15px 0;
	display: flex;
	flex-direction: column;
	max-height: 500px;
	/* Altura máxima del widget */
	overflow: hidden;
}

.user-info-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	margin-bottom: 15px;
	background: rgba(0, 240, 255, 0.05);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
	flex-shrink: 0;
	/* No se encoge */
}

.user-info-header:hover {
	background: rgba(0, 240, 255, 0.1);
	border-color: rgba(0, 240, 255, 0.4);
}

.user-info-icon {
	width: 32px;
	height: 32px;
	color: #00f0ff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
}

.user-info-icon svg {
	width: 18px;
	height: 18px;
	filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5));
}

.user-info-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.user-info-label {
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.user-info-username {
	font-size: 14px;
	font-weight: 600;
	color: #ecc894;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.usercp-sidebar-menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(500px - 180px);
	/* Altura máxima menos header y logout */
	padding-right: 5px;
	margin-right: -5px;
}

/* Scrollbar personalizado para el menú */
.usercp-sidebar-menu::-webkit-scrollbar {
	width: 6px;
}

.usercp-sidebar-menu::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.usercp-sidebar-menu::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 10px;
	transition: background 0.3s ease;
}

.usercp-sidebar-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

.usercp-sidebar-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	color: #ecc894;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.usercp-sidebar-item:hover {
	background: rgba(0, 240, 255, 0.1);
	border-color: rgba(0, 240, 255, 0.5);
	color: #00f0ff;
	text-decoration: none;
	transform: translateX(5px);
	box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
}

.usercp-sidebar-item:active {
	transform: translateX(3px);
}

.usercp-sidebar-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.usercp-sidebar-item:hover .usercp-sidebar-icon {
	transform: scale(1.1) rotate(5deg);
}

.usercp-sidebar-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
	position: relative;
	z-index: 2;
	transition: filter 0.3s ease;
}

.usercp-sidebar-item:hover .usercp-sidebar-icon img {
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

.usercp-sidebar-icon-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.3s ease;
	animation: pulse 2s ease-in-out infinite;
}

.usercp-sidebar-item:hover .usercp-sidebar-icon-glow {
	opacity: 1;
}

.usercp-sidebar-icon.reset-bg {
	background: linear-gradient(135deg, rgba(255, 100, 100, 0.2) 0%, rgba(255, 150, 150, 0.2) 100%);
	border: 1px solid rgba(255, 100, 100, 0.4);
}

.usercp-sidebar-icon.account-bg {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(100, 200, 255, 0.2) 100%);
	border: 1px solid rgba(0, 240, 255, 0.4);
}

.usercp-sidebar-icon.security-bg {
	background: linear-gradient(135deg, rgba(255, 200, 0, 0.2) 0%, rgba(255, 150, 50, 0.2) 100%);
	border: 1px solid rgba(255, 200, 0, 0.4);
}

.usercp-sidebar-icon.stats-bg {
	background: linear-gradient(135deg, rgba(150, 100, 255, 0.2) 0%, rgba(200, 150, 255, 0.2) 100%);
	border: 1px solid rgba(150, 100, 255, 0.4);
}

.usercp-sidebar-icon.credits-bg {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 200, 50, 0.2) 100%);
	border: 1px solid rgba(255, 215, 0, 0.4);
}

.usercp-sidebar-icon.default-bg {
	background: linear-gradient(135deg, rgba(100, 100, 100, 0.2) 0%, rgba(150, 150, 150, 0.2) 100%);
	border: 1px solid rgba(100, 100, 100, 0.4);
}

.usercp-sidebar-text {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

.usercp-sidebar-item:hover .usercp-sidebar-text {
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.usercp-sidebar-arrow {
	width: 18px;
	height: 18px;
	color: rgba(0, 240, 255, 0.3);
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.usercp-sidebar-item:hover .usercp-sidebar-arrow {
	color: #00f0ff;
	transform: translateX(3px);
}

.usercp-sidebar-arrow svg {
	width: 100%;
	height: 100%;
}

.usercp-sidebar-hover-effect {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
	transition: left 0.5s ease;
}

.usercp-sidebar-item:hover .usercp-sidebar-hover-effect {
	left: 100%;
}

/* Responsive */
@media (max-width: 768px) {
	.usercp-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 15px;
	}

	.reset-characters-grid,
	.addstats-characters-grid,
	.clearpk-characters-grid,
	.unstick-characters-grid,
	.vote-sites-grid,
	.resetstats-characters-grid,
	.clearskilltree-characters-grid {
		grid-template-columns: 1fr;
	}

	.info-grid {
		grid-template-columns: 1fr;
	}

	.characters-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.usercp-sidebar-item {
		padding: 10px 12px;
	}

	.usercp-sidebar-icon {
		width: 32px;
		height: 32px;
	}

	.usercp-sidebar-text {
		font-size: 12px;
	}
}

/* UserCP Logout Button */
.usercp-logout-section {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid rgba(0, 240, 255, 0.2);
	flex-shrink: 0;
	/* No se encoge */
}

.usercp-logout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 15px;
	background: linear-gradient(135deg, rgba(255, 100, 100, 0.1) 0%, rgba(255, 150, 150, 0.1) 100%);
	border: 1px solid rgba(255, 100, 100, 0.3);
	border-radius: 8px;
	color: #ff6464;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.usercp-logout-btn:hover {
	background: linear-gradient(135deg, rgba(255, 100, 100, 0.2) 0%, rgba(255, 150, 150, 0.2) 100%);
	border-color: rgba(255, 100, 100, 0.5);
	color: #ff6464;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(255, 100, 100, 0.2);
	transform: translateY(-2px);
}

.usercp-logout-btn:active {
	transform: translateY(0);
}

.logout-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logout-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 5px rgba(255, 100, 100, 0.5));
	transition: transform 0.3s ease;
}

.usercp-logout-btn:hover .logout-icon svg {
	transform: translateX(3px);
}

.logout-text {
	position: relative;
	z-index: 2;
}

/* ============================================
   PLUGIN MODULES STYLES
   ============================================ */

/* Rename Character Module */
.rename-characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
}

.rename-character-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.rename-character-card:hover {
	border-color: rgba(0, 240, 255, 0.6);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.3);
}

.rename-character-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.rename-character-avatar {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgba(0, 240, 255, 0.5);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.rename-character-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rename-character-info {
	flex: 1;
}

.rename-character-name {
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.character-current-name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 13px;
	color: #ecc894;
}

.character-current-name svg {
	width: 16px;
	height: 16px;
}

.rename-character-form-fields {
	margin-bottom: 20px;
}

.rename-character-btn,
.transfer-character-btn {
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid rgba(0, 240, 255, 0.5);
	border-radius: 8px;
	color: #00f0ff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.3s ease;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.rename-character-btn:hover,
.transfer-character-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: rgba(0, 240, 255, 0.8);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4);
	text-decoration: none;
}

.rename-character-btn .btn-icon,
.transfer-character-btn .btn-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.rename-character-btn .btn-icon svg,
.transfer-character-btn .btn-icon svg {
	width: 100%;
	height: 100%;
}

.rename-character-btn .btn-loader,
.transfer-character-btn .btn-loader {
	display: none;
	width: 20px;
	height: 20px;
	animation: spin 1s linear infinite;
}

.rename-character-btn.loading .btn-loader,
.transfer-character-btn.loading .btn-loader {
	display: block;
}

.rename-character-btn.loading .btn-icon,
.transfer-character-btn.loading .btn-icon {
	display: none;
}

/* Exchange Resets Module */
.exchange-characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
}

.exchange-character-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.exchange-character-card:hover {
	border-color: rgba(0, 240, 255, 0.6);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.3);
}

.exchange-character-info {
	flex: 1;
}

.exchange-stats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 15px;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	border: 1px solid rgba(0, 240, 255, 0.2);
}

.stat-item.available-item {
	background: rgba(0, 240, 255, 0.1);
	border-color: rgba(0, 240, 255, 0.3);
}

.stat-label {
	font-size: 12px;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-value {
	font-size: 14px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.exchange-character-info-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 30px;
}

.exchange-character-details {
	flex: 1;
}

.available-exchanges {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	padding: 12px 18px;
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 8px;
	color: #00f0ff;
	font-weight: 600;
}

.available-exchanges svg {
	width: 24px;
	height: 24px;
}

.exchange-options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 25px;
}

.exchange-option-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.exchange-option-card:hover:not(.disabled) {
	border-color: rgba(0, 240, 255, 0.6);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.3);
}

.exchange-option-card.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.exchange-option-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 15px;
}

.exchange-resets,
.exchange-reward {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.exchange-resets svg,
.exchange-reward svg {
	width: 32px;
	height: 32px;
	color: #00f0ff;
}

.resets-amount,
.reward-amount {
	font-size: 20px;
	font-weight: 700;
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.resets-label,
.reward-label {
	font-size: 12px;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.exchange-arrow {
	width: 30px;
	height: 30px;
	color: rgba(0, 240, 255, 0.5);
	flex-shrink: 0;
}

.exchange-arrow svg {
	width: 100%;
	height: 100%;
}

.exchange-option-btn {
	width: 100%;
	padding: 12px 20px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid rgba(0, 240, 255, 0.5);
	border-radius: 8px;
	color: #00f0ff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.3s ease;
	text-decoration: none;
}

.exchange-option-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: rgba(0, 240, 255, 0.8);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4);
	text-decoration: none;
}

.exchange-option-btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Transfer Character Module */
.transfer-characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
}

.transfer-character-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	animation: slideInUp 0.5s ease;
}

.transfer-character-card:hover {
	border-color: rgba(0, 240, 255, 0.6);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.3);
}

.transfer-character-avatar {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgba(0, 240, 255, 0.5);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.transfer-character-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.transfer-id-display {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	padding: 12px 18px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 8px;
}

.transfer-id-display svg {
	width: 20px;
	height: 20px;
	color: #00f0ff;
	flex-shrink: 0;
}

.transfer-id-label {
	font-size: 13px;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.transfer-id-value {
	font-size: 14px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
	font-family: monospace;
	letter-spacing: 1px;
}

/* Transfer Credits Module */
.transfer-confirmation-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 30px;
	animation: slideInUp 0.5s ease;
}

.transfer-confirmation-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.confirmation-icon {
	width: 50px;
	height: 50px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border-radius: 50%;
	border: 2px solid rgba(0, 240, 255, 0.3);
}

.confirmation-icon svg {
	width: 30px;
	height: 30px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.confirmation-title {
	font-size: 24px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.transfer-confirmation-details {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 30px;
}

.confirmation-detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.confirmation-detail-item:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.4);
}

.confirmation-detail-item.total-item {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: rgba(0, 240, 255, 0.5);
	border-width: 2px;
}

.detail-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.detail-label svg {
	width: 18px;
	height: 18px;
	color: #00f0ff;
}

.detail-value {
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.detail-value.total-value {
	font-size: 20px;
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.transfer-confirmation-actions {
	display: flex;
	justify-content: center;
}

.transfer-confirm-btn {
	padding: 14px 32px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border: 2px solid rgba(0, 240, 255, 0.5);
	border-radius: 8px;
	color: #00f0ff;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.3s ease;
	text-decoration: none;
}

.transfer-confirm-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: rgba(0, 240, 255, 0.8);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4);
	text-decoration: none;
}

.transfer-confirm-btn .btn-icon {
	width: 20px;
	height: 20px;
}

.transfer-confirm-btn .btn-icon svg {
	width: 100%;
	height: 100%;
}

/* Warning Agreements */
.warning-agreements {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
}

.agreement-item {
	padding: 15px;
	background: rgba(255, 100, 0, 0.1);
	border: 1px solid rgba(255, 100, 0, 0.3);
	border-radius: 8px;
}

.agreement-item.warning-item {
	background: rgba(255, 193, 7, 0.1);
	border-color: rgba(255, 193, 7, 0.3);
}

.agreement-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.agreement-checkbox input[type="checkbox"] {
	display: none;
}

.checkmark {
	width: 24px;
	height: 24px;
	border: 2px solid rgba(255, 193, 7, 0.5);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.agreement-checkbox input[type="checkbox"]:checked+.checkmark {
	background: rgba(255, 193, 7, 0.2);
	border-color: rgba(255, 193, 7, 0.8);
}

.agreement-checkbox input[type="checkbox"]:checked+.checkmark::after {
	content: '✓';
	color: #ffc107;
	font-size: 16px;
	font-weight: bold;
}

.agreement-text {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #ecc894;
	flex: 1;
}

.agreement-text svg {
	width: 18px;
	height: 18px;
	color: #ffc107;
	flex-shrink: 0;
}

/* ============================================
   CASTLE SIEGE BANNER WIDGET
   ============================================ */

.castle-siege-banner-widget {
	width: 100%;
	position: relative;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
	border-top: 2px solid rgba(0, 240, 255, 0.3);
	border-bottom: 2px solid rgba(0, 240, 255, 0.3);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	z-index: 10;
	margin: 1rem 0 1rem 0;
}

.castle-siege-banner-container {
	position: relative;
	max-width: 1280px;
	height: 160px;
	margin: 0 auto;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.castle-siege-banner-content {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1;
	position: relative;
	z-index: 2;
}

.castle-siege-icon {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	color: #00c2ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	animation: pulse 2s ease-in-out infinite;
}

.castle-siege-icon svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

.castle-siege-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.castle-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.castle-status.occupied .status-label,
.castle-status.unoccupied .status-label {
	font-size: 13px;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.castle-status.occupied .status-value {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.castle-status.unoccupied .status-value {
	font-size: 16px;
	font-weight: 700;
	color: #ff6b6b;
	text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.status-master {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #ecc894;
	margin-left: auto;
}

.status-master svg {
	width: 16px;
	height: 16px;
	color: #00f0ff;
}

.castle-next-siege {
	display: flex;
	align-items: center;
	gap: 10px;
}

.siege-label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.siege-countdown {
	font-size: 14px;
	font-weight: 700;
	color: #ffc107;
	text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
	font-family: 'Courier New', monospace;
	letter-spacing: 1px;
	animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {

	0%,
	100% {
		opacity: 1;
		text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
	}

	50% {
		opacity: 0.8;
		text-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
	}
}

.castle-siege-action {
	flex-shrink: 0;
}

.castle-siege-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: linear-gradient(135deg, rgb(0 78 255 / 10%) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgb(88 159 247 / 30%);
	border-radius: 8px;
	color: #00f0ff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.castle-siege-btn:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(236, 200, 148, 0.3) 100%);
	border-color: rgba(0, 240, 255, 0.8);
	color: #fff;
	transform: translateX(5px);
	box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4);
	text-decoration: none;
}

.castle-siege-btn .btn-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease;
}

.castle-siege-btn:hover .btn-icon {
	transform: translateX(3px);
}

.castle-siege-btn .btn-icon svg {
	width: 100%;
	height: 100%;
}

.castle-siege-banner-glow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(0, 240, 255, 0.1) 25%,
			rgba(0, 240, 255, 0.2) 50%,
			rgba(0, 240, 255, 0.1) 75%,
			transparent 100%);
	animation: glowSweep 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes glowSweep {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

.castle-siege-banner-particles {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: rgba(0, 240, 255, 0.6);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
	animation: float 6s ease-in-out infinite;
}

.particle-1 {
	top: 20%;
	left: 10%;
	animation-delay: 0s;
}

.particle-2 {
	top: 60%;
	left: 30%;
	animation-delay: 1.5s;
}

.particle-3 {
	top: 40%;
	left: 70%;
	animation-delay: 3s;
}

.particle-4 {
	top: 80%;
	left: 90%;
	animation-delay: 4.5s;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0) translateX(0);
		opacity: 0.6;
	}

	25% {
		transform: translateY(-20px) translateX(10px);
		opacity: 1;
	}

	50% {
		transform: translateY(-10px) translateX(-10px);
		opacity: 0.8;
	}

	75% {
		transform: translateY(-30px) translateX(5px);
		opacity: 1;
	}
}

/* ============================================
   CASTLE SIEGE MODULE STYLES
   ============================================ */

.castle-siege-module-container {
	padding: 30px 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Castle Owner Card */
.castle-owner-card-modern {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 30px;
	animation: slideInUp 0.5s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.castle-owner-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.castle-owner-icon {
	width: 50px;
	height: 50px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.castle-owner-icon svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

.castle-owner-title {
	font-size: 24px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.castle-owner-content {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.castle-owner-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.castle-owner-guild {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.guild-name-large {
	font-size: 28px;
	font-weight: 700;
	color: #00f0ff;
	text-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 10px;
}

.guild-logo-large {
	width: 120px;
	height: 120px;
	border-radius: 12px;
	overflow: hidden;
	border: 3px solid rgba(0, 240, 255, 0.5);
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	transition: transform 0.3s ease;
}

.guild-logo-large:hover {
	transform: scale(1.05) rotate(5deg);
	box-shadow: 0 0 40px rgba(0, 240, 255, 0.6);
}

.guild-master-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding-top: 20px;
	border-top: 2px solid rgba(0, 240, 255, 0.2);
}

.guild-master-title {
	font-size: 18px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.guild-master-info {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s ease;
}

.guild-master-info:hover {
	background: rgba(0, 0, 0, 0.6);
	border-color: rgba(0, 240, 255, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 240, 255, 0.3);
}

.guild-master-info svg {
	width: 20px;
	height: 20px;
	color: #00f0ff;
	flex-shrink: 0;
	filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5));
}

.master-label {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.master-name {
	color: #00f0ff;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* Alliance Section */
.castle-alliance-section {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 2px solid rgba(0, 240, 255, 0.2);
	width: 100%;
}

.alliance-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

.alliance-header svg {
	width: 24px;
	height: 24px;
	color: #00f0ff;
}

.alliance-header h4 {
	font-size: 18px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.alliance-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

.alliance-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.alliance-item:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.4);
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
}

.alliance-logo {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgba(0, 240, 255, 0.3);
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
}

.alliance-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.alliance-name {
	font-size: 14px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.alliance-master {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #ecc894;
}

.alliance-master svg {
	width: 14px;
	height: 14px;
	color: #00f0ff;
}

/* Countdown Card */
.castle-countdown-card-modern {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
	border: 2px solid rgba(255, 193, 7, 0.3);
	border-radius: 12px;
	padding: 40px;
	text-align: center;
	animation: slideInUp 0.5s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
}

.castle-countdown-card-modern::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%);
	animation: rotate 20s linear infinite;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.countdown-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}

.countdown-icon {
	width: 50px;
	height: 50px;
	color: #ffc107;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 193, 7, 0.1);
	border: 2px solid rgba(255, 193, 7, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

.countdown-icon svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6));
}

.countdown-title {
	font-size: 28px;
	font-weight: 700;
	color: #ffc107;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
	text-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
	position: relative;
	z-index: 1;
}

.countdown-display {
	font-size: 48px;
	font-weight: 700;
	color: #ffc107;
	font-family: 'Courier New', monospace;
	letter-spacing: 3px;
	text-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
	position: relative;
	z-index: 1;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: countdownPulse 1s ease-in-out infinite;
}

.countdown-display span {
	font-size: 32px;
	margin: 0 5px;
	color: rgba(255, 193, 7, 0.7);
	text-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
}

.countdown-loading {
	width: 40px;
	height: 40px;
	color: #ffc107;
	animation: spin 1s linear infinite;
}

/* Castle Info Card */
.castle-info-card-modern {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 30px;
	animation: slideInUp 0.5s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.castle-info-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.info-icon {
	width: 50px;
	height: 50px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.info-icon svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

.info-title {
	font-size: 24px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.castle-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.info-item-modern {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.info-item-modern:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.4);
	transform: translateX(5px);
	box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
}

.info-item-modern.highlight-item {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 200, 50, 0.1) 100%);
	border-color: rgba(255, 215, 0, 0.3);
}

.info-item-modern.highlight-item:hover {
	border-color: rgba(255, 215, 0, 0.5);
}

.info-item-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 8px;
}

.info-item-icon svg {
	width: 22px;
	height: 22px;
}

.info-item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.info-item-label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.info-item-value {
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.info-item-value.highlight-value {
	color: #ffd700;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.next-stage-countdown {
	font-size: 13px;
	color: #ffc107;
	font-weight: 500;
}

/* Registered Guilds Card */
.castle-guilds-card-modern {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 30px;
	animation: slideInUp 0.5s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.guilds-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.guilds-icon {
	width: 50px;
	height: 50px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.guilds-icon svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

.guilds-title {
	font-size: 24px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.guilds-table-modern {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.guilds-table-header {
	display: grid;
	grid-template-columns: 80px 2fr 1.5fr 120px 100px;
	gap: 15px;
	padding: 15px 20px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px 8px 0 0;
}

.guild-header-cell {
	font-size: 13px;
	font-weight: 700;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
}

.guilds-table-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.guild-row-modern {
	display: grid;
	grid-template-columns: 80px 2fr 1.5fr 120px 100px;
	gap: 15px;
	padding: 15px 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.1);
	border-radius: 8px;
	transition: all 0.3s ease;
	align-items: center;
}

.guild-row-modern:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.3);
	transform: translateX(5px);
	box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
}

.guild-row-modern:first-of-type {
	border-radius: 0;
}

.guild-row-modern:last-of-type {
	border-radius: 0 0 8px 8px;
}

.guild-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.guild-cell.logo-cell {
	justify-content: center;
}

.guild-cell.name-cell {
	justify-content: flex-start;
}

.guild-cell.master-cell {
	justify-content: flex-start;
}

.score-value,
.members-value {
	font-size: 14px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

/* Schedule Card */
.castle-schedule-card-modern {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(236, 200, 148, 0.1) 100%);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 30px;
	animation: slideInUp 0.5s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.schedule-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(0, 240, 255, 0.2);
}

.schedule-icon {
	width: 50px;
	height: 50px;
	color: #00f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 240, 255, 0.1);
	border: 2px solid rgba(0, 240, 255, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.schedule-icon svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6));
}

.schedule-title {
	font-size: 24px;
	font-weight: 600;
	color: #ecc894;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 0 10px rgba(236, 200, 148, 0.3);
}

.schedule-timeline {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	padding-left: 30px;
}

.schedule-timeline::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, rgba(0, 240, 255, 0.3) 0%, rgba(0, 240, 255, 0.1) 100%);
}

.schedule-item-modern {
	display: flex;
	gap: 20px;
	position: relative;
	padding: 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.schedule-item-modern:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(0, 240, 255, 0.4);
	transform: translateX(5px);
	box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
}

.schedule-item-modern.active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(236, 200, 148, 0.2) 100%);
	border-color: rgba(0, 240, 255, 0.5);
	border-width: 2px;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.schedule-item-modern.battle-stage {
	border-color: rgba(255, 193, 7, 0.5);
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
}

.schedule-item-modern.battle-stage:hover {
	border-color: rgba(255, 193, 7, 0.7);
	box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

.schedule-item-marker {
	position: absolute;
	left: -23px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: rgba(0, 240, 255, 0.3);
	border: 3px solid rgba(0, 240, 255, 0.5);
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
	z-index: 2;
}

.schedule-item-modern.active .schedule-item-marker {
	background: rgba(0, 240, 255, 0.6);
	border-color: rgba(0, 240, 255, 0.8);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
	animation: pulse 2s ease-in-out infinite;
}

.schedule-item-modern.battle-stage .schedule-item-marker {
	background: rgba(255, 193, 7, 0.6);
	border-color: rgba(255, 193, 7, 0.8);
	box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
}

.marker-dot {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(0, 240, 255, 0.8);
}

.marker-battle-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	color: #ffc107;
	display: flex;
	align-items: center;
	justify-content: center;
}

.marker-battle-icon svg {
	width: 14px;
	height: 14px;
	filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.8));
}

.schedule-item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.schedule-item-title {
	font-size: 18px;
	font-weight: 600;
	color: #00f0ff;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.schedule-item-modern.battle-stage .schedule-item-title {
	color: #ffc107;
	text-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

.active-badge {
	padding: 4px 12px;
	background: rgba(0, 240, 255, 0.2);
	border: 1px solid rgba(0, 240, 255, 0.5);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	color: #00f0ff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	animation: pulse 2s ease-in-out infinite;
}

.schedule-item-dates {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.date-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #ecc894;
}

.date-item svg {
	width: 16px;
	height: 16px;
	color: #00f0ff;
	flex-shrink: 0;
}

.date-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 12px;
}

.date-value {
	color: #00f0ff;
	font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
	.castle-siege-banner-container {
		flex-direction: column;
		padding: 15px;
	}

	.castle-siege-banner-content {
		flex-direction: column;
		width: 100%;
	}

	.castle-siege-info {
		width: 100%;
		text-align: center;
	}

	.castle-status {
		justify-content: center;
	}

	.status-master {
		margin-left: 0;
		justify-content: center;
	}

	.castle-siege-btn {
		width: 100%;
		justify-content: center;
	}

	.castle-info-grid {
		grid-template-columns: 1fr;
	}

	.alliance-grid {
		grid-template-columns: 1fr;
	}

	.guilds-table-header,
	.guild-row-modern {
		grid-template-columns: 60px 1fr 1fr 80px 60px;
		gap: 10px;
		padding: 10px 15px;
	}

	.guild-header-cell,
	.guild-cell {
		font-size: 12px;
	}

	.schedule-timeline {
		padding-left: 20px;
	}

	.schedule-item-marker {
		left: -13px;
		width: 12px;
		height: 12px;
	}

	.rename-characters-grid,
	.exchange-characters-grid,
	.transfer-characters-grid {
		grid-template-columns: 1fr;
	}

	.exchange-options-grid {
		grid-template-columns: 1fr;
	}

	.exchange-option-header {
		flex-direction: column;
		gap: 20px;
	}

	.exchange-arrow {
		transform: rotate(90deg);
	}
}

/* =========================================================
   HEADER: Logo y menú centrados
   ========================================================= */
.header .logo a {
	left: 50%;
	transform: translateX(-50%);
	right: auto;
	margin-left: 0;
}

.header .header-bottom-block {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-right: 290px; /* espacio para soc-block (270px) + offset */
}

.header .header-bottom-block .menu {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 auto;
	padding-left: 0;
	list-style: none;
}

.header .header-bottom-block .soc-block {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* =========================================================
   SIDEBAR: Links + selector idioma en una sola línea
   ========================================================= */
.form-group-links-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 6px;
	margin-bottom: 8px;
}

.form-group-links-row .form-group-links-sep {
	color: rgba(180, 245, 243, 0.6);
	font-size: 0.9em;
	user-select: none;
}

.form-group-links-row .sidebar-login-language-wrap {
	flex-shrink: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
}

/* =========================================================
   SIDEBAR: Selector de idioma en widget de login (dropdown)
   ========================================================= */
.widget-left.widget .sidebar-login-language-wrap {
	margin: 0;
	display: inline-flex;
	align-items: center;
}

/* Contenedor del dropdown */
.language-dropdown-container {
	position: relative;
	display: inline-block;
	z-index: 20;
}

/* Botón toggle (bandera + código + flecha) */
.language-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: rgba(5, 14, 27, 0.85);
	border: 1px solid rgba(88, 159, 247, 0.35);
	border-radius: 6px;
	color: #ecc894;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
	outline: none;
}

.language-dropdown-toggle:hover {
	background: rgba(0, 78, 255, 0.15);
	border-color: rgba(0, 240, 255, 0.5);
	color: #00f0ff;
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.language-dropdown-toggle:active {
	transform: scale(0.97);
}

.language-dropdown-toggle img {
	width: 18px;
	height: 13px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.language-dropdown-toggle span {
	min-width: 26px;
	text-align: center;
}

/* Flecha: CSS chevron (funciona sin Font Awesome) */
.language-dropdown-toggle i {
	display: inline-block;
	font-size: 0;
	line-height: 0;
	transition: transform 0.25s ease;
	margin-left: 4px;
	width: 10px;
	height: 10px;
	vertical-align: middle;
}

.language-dropdown-toggle i::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	margin: 3px 0 0 1px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.language-dropdown-container.active .language-dropdown-toggle i {
	transform: rotate(180deg);
}

/* Menú desplegable */
.language-dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 170px;
	background: rgba(5, 14, 27, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(88, 159, 247, 0.35);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.08);
	list-style: none;
	margin: 0;
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 1000;
	max-height: 280px;
	overflow-y: auto;
}

.language-dropdown-container.active .language-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.language-dropdown-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.language-dropdown-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	color: rgba(236, 200, 148, 0.9);
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.language-dropdown-item a:hover {
	background: rgba(0, 78, 255, 0.15);
	color: #00f0ff;
	transform: translateX(4px);
}

.language-dropdown-item.active a {
	background: rgba(0, 240, 255, 0.1);
	color: #00f0ff;
	border-left: 3px solid #00f0ff;
}

.language-dropdown-item a img {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	flex-shrink: 0;
}

.language-dropdown-item a span {
	flex: 1;
}

.language-dropdown-item a i {
	font-size: 0;
	line-height: 0;
	width: 14px;
	height: 14px;
	color: #00f0ff;
	opacity: 0;
	transition: opacity 0.2s ease;
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}

.language-dropdown-item.active a i {
	opacity: 1;
}

/* Checkmark CSS (funciona sin Font Awesome) */
.language-dropdown-item.active a i::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid #00f0ff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.language-dropdown-menu::-webkit-scrollbar {
	width: 5px;
}

.language-dropdown-menu::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 3px;
}

.language-dropdown-menu::-webkit-scrollbar-thumb {
	background: rgba(88, 159, 247, 0.4);
	border-radius: 3px;
}

.language-dropdown-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}