/* =============================================================================
   VINVICTUS THEME v2.0.0 - GLOBAL CSS
   ============================================================================= */

:root {
	/* Primary Brand Colors */
	--primary: #ffc107;
	--primary-dark: #dd8500;
	--primary-rgb: 255, 193, 7;

	/* Background Colors */
	--bg-base: #080b0f;
	--bg-surface: #15181d;
	--bg-surface-dark: #0e1016;
	--bg-light: #9c9eb4;
	--bg-secondary: #eaeaea;

	/* Border Colors */
	--border-base: #1c202b;
	--border-bottom: #222633;
	--border-light: #323649;

	/* Text Colors */
	--text-primary: #eaeaea;
	--text-secondary: #929eaf;
	--text-muted: #3a3f46;
	--text-dark: #0d0d0d;
	--text-code: #ffcf87;
	--text-selection: #080b0f;

	/* Button Colors */
	--btn-text-light: #eaeaea;
	--btn-text-dark: #0d0d0d;
	--btn-hover: #eaeaea;
	--btn-hover-border: #c0c0c0;
	--btn-hover-border-bottom: #858585;
	--btn-cancel: #cf2222;
	--btn-cancel-border-bottom: #631616;

	/* Social Media Colors */
	--discord: #404eed;
	--discord-dark: #0000ee;
	--kick: #53fc19;
	--kick-dark: #30a30a;
	--twitch: #6034b2;
	--twitch-dark: #36196d;
	--youtube: #ff0000;
	--youtube-dark: #861f1f;

	/* Staff Role Colors */
	--txt-beta-tester: #ffff88;
	--txt-community-manager: #ff4cff;
	--txt-content-creator: #992dff;
	--txt-designer: #17ff77;
	--txt-developer: #ff2e2e;
	--txt-events-coordinator: #ff952b;
	--txt-gm: #508dff;
	--txt-manager: #74ff3d;
	--txt-senior-gm: #00ffff;
	--txt-support: #2bffca;

	/* WoW Class Colors */
	--txt-deathknight: #c41f3b;
	--txt-druid: #ff7d0a;
	--txt-hunter: #abd473;
	--txt-mage: #69ccf0;
	--txt-paladin: #f58cba;
	--txt-priest: #ffffff;
	--txt-rogue: #fff569;
	--txt-shaman: #0070de;
	--txt-warlock: #9482c9;
	--txt-warrior: #c79c6e;
	--txt-monk: #00ff96;
	--txt-demonhunter: #a330c9;
	--txt-evoker: #33937f;

	/* WoW Item Quality Colors */
	--txt-item-poor: #9d9d9d;
	--txt-item-common: #ffffff;
	--txt-item-uncommon: #1eff00;
	--txt-item-rare: #0070dd;
	--txt-item-epic: #a335ee;
	--txt-item-legendary: #ff8000;
	--txt-item-artifact: #e6cc80;
	--txt-item-heirloom: #00ccff;

	/* Layout & Spacing */
	--vv-border-radius: 8px;
	--vv-border-radius-sm: 4px;
	--vv-border-radius-md: 6px;
	--vv-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--vv-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

	/* Utility Colors */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-grey: #6c757d;

	/* Font Settings */
	--font-family: "Poppins", sans-serif;

	/* Legacy variables for backward compatibility */
	--bg: var(--bg-base);
	--bg-dark: var(--bg-surface);
	--bg-darker: var(--bg-surface-dark);
	--bg-primary: var(--primary);
	--border: var(--border-base);
	--border-dark: var(--bg-surface);
	--border-darker: var(--bg-surface-dark);
	--border-primary: var(--primary);
	--border-secondary: var(--bg-secondary);
	--primary-border-bottom: var(--primary-dark);
	--btn-primary: var(--primary);
	--btn-primary-border-bottom: var(--primary-dark);
	--btn-secondary: var(--bg-secondary);
	--btn-secondary-border-bottom: #858585;
	--btn-txt-dark: var(--text-dark);
	--btn-txt-light: var(--text-primary);
	--txt-primary: var(--primary);
	--txt-secondary: var(--text-primary);
	--txt-muted: var(--text-secondary);
	--txt-placeholder: var(--text-muted);
	--txt-dark: var(--text-dark);
	--txt-code: var(--text-code);
	--txt-selection: var(--text-selection);

	/* Social legacy variables */
	--discord-border: var(--discord);
	--kick-border: var(--kick);
	--twitch-border: var(--twitch);
	--youtube-border: var(--youtube);
	--youtube-border-bottom: var(--youtube-dark);
	--btn-discord: var(--discord);
	--btn-discord-border-bottom: var(--discord-dark);
	--btn-kick: var(--kick);
	--btn-kick-border-bottom: var(--kick-dark);
	--btn-twitch: var(--twitch);
	--btn-twitch-border-bottom: var(--twitch-dark);
	--btn-youtube: var(--youtube);
	--txt-discord: var(--discord);
	--txt-kick: var(--kick);
	--txt-twitch: var(--twitch);
	--txt-youtube: var(--youtube);

	/* Quality aliases for downloads page */
	--quality-poor: var(--txt-item-poor);
	--quality-common: var(--txt-item-common);
	--quality-uncommon: var(--txt-item-uncommon);
	--quality-rare: var(--txt-item-rare);
	--quality-epic: var(--txt-item-epic);
	--quality-legendary: var(--primary);
	--quality-artifact: var(--txt-item-artifact);
	--quality-heirloom: var(--txt-item-heirloom);

	/* Enhanced Armory Variables */
	--vv-primary-color: var(--primary);
	--vv-primary-dark: var(--primary-dark);
	--vv-primary-rgb: var(--primary-rgb);
	--vv-secondary-color: var(--bg-secondary);
	--vv-accent-color: var(--primary);
	--vv-surface-color: var(--bg-surface);
	--vv-surface-light: var(--bg-base);
	--vv-surface-dark: var(--bg-surface-dark);
	--vv-border-color: var(--border-base);
	--vv-text-primary: var(--text-primary);
	--vv-text-secondary: var(--text-secondary);
}

/* =============================================================================
   ALERT STYLES
   ============================================================================= */

/* Remove border radius from all alerts for squared appearance */
.alert {
	border-radius: 0 !important;
}

/* Dark theme alert overrides for registration success */
.alert-dark {
	color: #ffffff !important;
	background-color: transparent !important;
	border-color: var(--primary) !important;
	border: 1px solid var(--primary) !important;
}

/* Registration success page card border */
.register-success-card {
	border: 1px solid var(--primary) !important;
}

.alert-dark .text-light {
	color: #ffffff !important;
}

.alert-dark .text-warning {
	color: var(--primary) !important;
}

.alert-dark .text-muted {
	color: #6c757d !important;
}

.alert-dark .border-secondary {
	border-color: #6c757d !important;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading,
.title,
.section-title,
.card-title,
.hero-title,
.banner-title {
	text-wrap: balance !important;
}

p,
.description,
.content,
.text,
.card-text,
.hero-description,
.section-description,
.testimonial-content,
.feature-description {
	text-wrap: pretty !important;
}

li {
	text-wrap: pretty !important;
}

.btn,
.badge,
.tag,
.label {
	text-wrap: nowrap;
}
/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Text Colors */
.color_black {
	color: var(--color-black) !important;
}
.color_white {
	color: var(--color-white) !important;
}
.color_grey {
	color: var(--color-grey) !important;
}
.color_primary {
	color: var(--primary) !important;
}
.color_poor {
	color: var(--txt-item-poor) !important;
}
.color_common {
	color: var(--txt-item-common) !important;
}
.color_uncommon {
	color: var(--txt-item-uncommon) !important;
}
.color_rare {
	color: var(--txt-item-rare) !important;
}
.color_epic {
	color: var(--txt-item-epic) !important;
}
.color_legendary {
	color: var(--txt-item-legendary) !important;
}
.color_artifact {
	color: var(--txt-item-artifact) !important;
}
.color_heirloom {
	color: var(--txt-item-heirloom) !important;
}

/* Background Colors */
.bg_color_black {
	background-color: var(--color-black) !important;
}
.bg_color_white {
	background-color: var(--color-white) !important;
}
.bg_color_grey {
	background-color: var(--color-grey) !important;
}
.bg_color_primary {
	background-color: var(--primary) !important;
}
.bg_color_poor {
	background-color: var(--txt-item-poor) !important;
}
.bg_color_common {
	background-color: var(--txt-item-common) !important;
}
.bg_color_uncommon {
	background-color: var(--txt-item-uncommon) !important;
}
.bg_color_rare {
	background-color: var(--txt-item-rare) !important;
}
.bg_color_epic {
	background-color: var(--txt-item-epic) !important;
}
.bg_color_legendary {
	background-color: var(--txt-item-legendary) !important;
}
.bg_color_artifact {
	background-color: var(--txt-item-artifact) !important;
}
.bg_color_heirloom {
	background-color: var(--txt-item-heirloom) !important;
}

/* Border Colors */
.border_color_black {
	border-color: var(--color-black) !important;
}
.border_color_white {
	border-color: var(--color-white) !important;
}
.border_color_grey {
	border-color: var(--color-grey) !important;
}
.border_color_primary {
	border-color: var(--primary) !important;
}
.border_color_poor {
	border-color: var(--txt-item-poor) !important;
}
.border_color_common {
	border-color: var(--txt-item-common) !important;
}
.border_color_uncommon {
	border-color: var(--txt-item-uncommon) !important;
}
.border_color_rare {
	border-color: var(--txt-item-rare) !important;
}
.border_color_epic {
	border-color: var(--txt-item-epic) !important;
}
.border_color_legendary {
	border-color: var(--txt-item-legendary) !important;
}
.border_color_artifact {
	border-color: var(--txt-item-artifact) !important;
}
.border_color_heirloom {
	border-color: var(--txt-item-heirloom) !important;
}

/* VIP Card Border Styles */
.card-border-epic {
	border: 2px solid var(--txt-item-epic) !important;
}
.card-border-legendary {
	border: 2px solid var(--txt-item-legendary) !important;
}
.card-border-mythic {
	border: 2px solid var(--txt-item-artifact) !important;
}
.card-border-custom {
	border: 2px solid var(--primary) !important;
}

/* Enhanced Border Classes for VIP Cards */
.border_color_black {
	border: 2px solid var(--color-black) !important;
}
.border_color_white {
	border: 2px solid var(--color-white) !important;
}
.border_color_grey {
	border: 2px solid #6c757d !important;
}
.border_color_primary {
	border: 2px solid var(--primary) !important;
}
.border_color_poor {
	border: 2px solid #9d9d9d !important;
}
.border_color_common {
	border: 2px solid #ffffff !important;
}
.border_color_uncommon {
	border: 2px solid #1eff00 !important;
}
.border_color_rare {
	border: 2px solid #0070dd !important;
}
.border_color_epic {
	border: 2px solid #a335ee !important;
}
.border_color_legendary {
	border: 2px solid #ff8000 !important;
}
.border_color_artifact {
	border: 2px solid #e6cc80 !important;
}
.border_color_heirloom {
	border: 2px solid #00ccff !important;
}

/* Section Backgrounds with Semantic Colors */
.section-bg-dark {
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.section-bg-darker {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

/* VIP Item Color Overrides - Higher specificity to override WoW quality classes */
/* These classes override the default quality classes (q0-q6) when custom colors are specified */
.q4.vip-item.color_poor,
.q4.vip-item.color_poor a {
	color: #9d9d9d !important;
}
.q4.vip-item.color_common,
.q4.vip-item.color_common a {
	color: #ffffff !important;
}
.q4.vip-item.color_uncommon,
.q4.vip-item.color_uncommon a {
	color: #1eff00 !important;
}
.q4.vip-item.color_rare,
.q4.vip-item.color_rare a {
	color: #0070dd !important;
}
.q4.vip-item.color_epic,
.q4.vip-item.color_epic a {
	color: #a335ee !important;
}
.q4.vip-item.color_legendary,
.q4.vip-item.color_legendary a {
	color: #ff8000 !important;
}
.q4.vip-item.color_artifact,
.q4.vip-item.color_artifact a {
	color: #e6cc80 !important;
}
.q4.vip-item.color_heirloom,
.q4.vip-item.color_heirloom a {
	color: #00ccff !important;
}
.q4.vip-item.color_black,
.q4.vip-item.color_black a {
	color: #000000 !important;
}
.q4.vip-item.color_white,
.q4.vip-item.color_white a {
	color: #ffffff !important;
}
.q4.vip-item.color_grey,
.q4.vip-item.color_grey a {
	color: #6c757d !important;
}
.q4.vip-item.color_primary,
.q4.vip-item.color_primary a {
	color: var(--primary) !important;
}

/* =============================================================================
   SEASONS
   ============================================================================= */

/* Season Status Badges */
.season-status-badge {
	background-color: var(--primary) !important;
	color: #000 !important;
}

.badge-active {
	background-color: #28a745 !important;
	color: #fff !important;
}

.badge-upcoming {
	background-color: #007bff !important;
	color: #fff !important;
}

.badge-ending {
	background-color: #fd7e14 !important;
	color: #fff !important;
}

.badge-ended {
	background-color: #dc3545 !important;
	color: #fff !important;
}

.badge-development {
	background-color: #6f42c1 !important;
	color: #fff !important;
}

.badge-planned {
	background-color: #6c757d !important;
	color: #fff !important;
}

/* Season Progress Bar Styles */
.season-progress-bar {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.season-progress-bar .progress-bar {
	transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-text {
	transition: opacity 0.3s ease-in-out;
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* Fast AOS Animations */
[data-aos] {
	pointer-events: none;
}

[data-aos].aos-animate {
	pointer-events: auto;
}

/* Optimized transitions */
.btn,
.card,
.modal {
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	[data-aos] {
		animation: none !important;
	}
}

[data-aos] {
	animation: none !important;
}

/* Fast scroll-to-top button */
.fixed-arrow {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(0.8);
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
}

.fixed-arrow.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.fixed-arrow:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Optimized loading states */
.loading-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
}

@keyframes loading {
	0% {
		background-position: 200% 0;
		transform: translate3d(0, 0, 0);
	}
	100% {
		background-position: -200% 0;
		transform: translate3d(0, 0, 0);
	}
}

/* =============================================================================
   GLOBAL STYLES
   ============================================================================= */
* {
	font-family: var(--font-family);
	font-weight: var(--font-weight);
}

body {
	background-color: var(--bg);
	background-image: none;
}

::selection {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
}

::-moz-selection {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
}

/* UCP - Nav */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background-color: var(--bg-primary) !important;
	color: var(--txt-dark) !important;
	font-weight: 600;
}

/* Currency Text */
.gold-points {
	color: var(--txt-primary) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
}
.silver-points {
	color: var(--txt-secondary) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
}

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

.text-silver,
.ampersand {
	color: var(--txt-secondary) !important;
}

.text-gold,
.text-silver,
.ampersand {
	font-size: 1rem;
	font-weight: 500;
}

/* Anchor Tag */
a {
	color: var(--txt-primary);
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	text-decoration: none;
	text-shadow: none;
}

a:hover {
	color: var(--txt-secondary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--txt-primary);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	text-wrap: balance !important;
}

/* Paragraphs */
p {
	color: var(--txt-secondary);
	font-weight: 500;
	text-shadow: none;
	text-wrap: balance !important;
}

/* Code Blocks */
body code {
	color: var(--txt-code);
	font-size: 0.875em;
	word-wrap: break-word;
}

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

/* Text and Backgrounds */
.text-light {
	color: var(--txt-secondary);
}

.bg-dark {
	background-color: var(--bg-dark) !important;
}

.bg-darker::before {
	background-color: var(--bg-darker) !important;
}

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

.border-bottom {
	border-bottom: 0.1rem solid var(--border) !important;
}

/* Section Padding */
.section-padding {
	overflow: hidden;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* Button - Default */
.btn,
.btn-warning,
.nice_button,
.btn-close,
.btn-primary,
.btn-secondary,
.btn-check,
.btn.active,
.btn.show {
	background-color: var(--btn-primary) !important;
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
	border: none;
	font-family: "Poppins", sans-serif;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: all 0.3s ease-in-out;
	border-radius: 0.15rem !important;
}

/* =============================================================================
   BUTTON STYLES
   ============================================================================= */
.accordion-button {
	background-color: var(--btn-primary) !important;
	border: none !important;
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
	font-family: "Poppins", sans-serif;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
	outline: none !important;
	transition: all 0.3s ease-in-out;
}

/* Button - Default - Hover States */
.btn:hover,
.btn-warning:hover,
.nice_button:hover,
.btn-close:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-check:hover,
.btn.active:hover,
.btn.show:hover {
	background-color: var(--btn-secondary) !important;
	border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
	color: var(--btn-txt-dark) !important;
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	transition: all 0.3s ease-in-out !important;
	border-radius: 0.15rem !important;
}

/* Accordion button hover states */
.accordion-button:hover {
	background-color: var(--btn-secondary) !important;
	border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
	color: var(--btn-txt-dark) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Button - Default - Active States */
.btn:active,
.btn-warning:active,
.nice_button:active,
.btn-close:active,
.btn-primary:active,
.btn-secondary:active,
.btn:focus,
.btn-warning:focus,
.nice_button:focus,
.btn-close:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn:focus-visible,
.btn-warning:focus-visible,
.nice_button:focus-visible,
.btn-close:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn:focus-within,
.btn-warning:focus-within,
.nice_button:focus-within,
.btn-close:focus-within,
.btn-primary:focus-within,
.btn-secondary:focus-within,
.btn:target,
.btn-warning:target,
.nice_button:target,
.btn-close:target,
.btn-primary:target,
.btn-secondary:target,
.btn-check:active,
.btn-check:focus,
.btn-check:focus-visible,
.btn-check:focus-within,
.btn-check:target,
.btn.active:active,
.btn.active:focus,
.btn.active:focus-visible,
.btn.active:focus-within,
.btn.active:target,
.btn.show:active,
.btn.show:focus,
.btn.show:focus-visible,
.btn.show:focus-within,
.btn.show:target {
	background-color: var(--btn-primary);
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	border-radius: 0.15rem;
	box-shadow: none !important;
	outline: none !important;
}

/* Accordion button active and focus states */
.accordion-button:active,
.accordion-button:focus {
	background-color: var(--btn-primary) !important;
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--btn-txt-dark) !important;
	filter: none !important;
}

.btn.active,
.nice_active {
	color: var(--btn-txt-dark);
	background-color: var(--btn-secondary) !important;
	border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
	transition: all 0.3s ease-in-out !important;
}

/* Button - Disabled */
.btn.disabled,
.btn:disabled {
	color: var(--btn-txt-dark);
	background-color: var(--btn-secondary);
	border-bottom: var(--btn-secondary-border-bottom);
	transition: all 0.3s ease-in-out !important;
}

/* Button - Others */
button,
.nice_button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
	background-color: var(--btn-primary);
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
	border-radius: 0 !important;
	color: var(--btn-txt-dark);
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none;
	transition: all 0.3s ease-in-out !important;
}

/* STORE - VP BUTTONS */
/* Targets the first button only if there are exactly two buttons */
.store_buttons .btn:first-child:nth-last-child(2),
.store_buttons .btn:nth-last-child(2):nth-child(1) {
	filter: saturate(0) brightness(1.1);
}

.store_buttons .btn:first-child:nth-last-child(2):hover,
.store_buttons .btn:nth-last-child(2):nth-child(1):hover {
	filter: saturate(0) brightness(1);
}

input#filter_name {
	color: var(--txt-muted);
}

/* =============================================================================
   HOMEPAGE HERO
   ============================================================================= */

/* Hero Section */
.hero {
	position: relative;
	/* height: 40vh; */
	overflow: hidden;
	z-index: 0;
}

/* Hero - Video */
.hero .hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 105%;
	height: 100%;
	object-fit: cover;
	background-color: var(--bg);
	opacity: 1;
	z-index: -2;
	/* transform: scaleX(-1); */
}

/* Hero - Heading Vertical Spacing Adjustment */
body h2.tighten-up {
	margin-bottom: -0.3rem;
}

/* Hero - Video - Grid Overlay */
.video-overlay {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
	background-size: 2px 2px; /* Increase the spacing between the dots */
	opacity: 0.3;
}

/* =============================================================================
   BANNERS
   ============================================================================= */

/* Banner Border */
.banner {
	position: relative;
	border-top: 0.1rem solid var(--border);
	border-bottom: 0.1rem solid var(--border);
	overflow: hidden;
	z-index: 0;
}

/* Banner Grid Overlay Effect */
.banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
	background-size: 2px 2px; /* Increase the spacing between the dots */
	opacity: 0.5;
}

/* Positions the heading and description text above the overlays */
.section-heading,
.section-description {
	position: relative;
	z-index: 10;
}

/* Responsive - General - For large screens */
.bg-responsive {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	/* background-size: 2600px; */
	background-color: #101218;
}

/* Responsive - Socials - For large screens */
.bg-responsive-socials {
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	margin-bottom: 0.1rem;
}

/* Headers - Reduce Opacity on Mobile */
@media (max-width: 765px) {
	.bg-responsive::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 1);
		opacity: 0.6;
		z-index: 1;
	}

	.bg-responsive > div {
		position: relative;
		z-index: 2;
	}
}

/* Responsive - More Sections - For large screens */
.more-section {
	background-position: right top;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Responsive - General - For small screens */
@media (max-width: 765px) {
	.bg-responsive {
		background-position: right center;
		text-align: center;
	}
}

/* Responsive - Socials - For large screens */
@media (max-width: 765px) {
	.bg-responsive-socials {
		background-position: left center;
		text-align: center;
	}
}

.banner .section-heading,
.banner .section-description {
	text-shadow: #080b0f 0px 1px 1px !important;
}

/* Dim Images - On Hover */
.dim-image {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.dim-image:hover {
	opacity: 0.6;
}

/* =============================================================================
   SOCIAL BANNERS
   ============================================================================= */

/* Discord Banner - Animated Background Color */
.discord-banner {
	border: solid var(--discord-border);
	border-width: 0.1rem 0;
	position: relative;
	overflow: hidden;
}

.discord-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent, #404eed, transparent);
	animation: backgroundShine 4s linear infinite;
	transform: rotate(-45deg);
	opacity: 0.5;
	filter: blur(100px);
}

@keyframes backgroundShine {
	0% {
		left: -100%;
		transform: translate3d(0, 0, 0);
	}
	100% {
		left: 100%;
		transform: translate3d(0, 0, 0);
	}
}

/* Discord Button */
.btn-discord {
	background-color: var(--btn-discord) !important;
	border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
	color: var(--btn-txt-light);
	overflow: hidden;
}

/* Discord Button Hover */
.btn-discord:hover {
	background-color: var(--btn-secondary);
	border-bottom-color: var(--btn-hover-border-bottom);
	color: var(--btn-txt-dark);
}

.btn-discord-footer {
	background-color: var(--btn-discord) !important;
	border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
	color: var(--btn-txt-light);
	overflow: hidden;
	border-radius: 0;
}

/* Discord Button Hover */
.btn-discord-footer:hover {
	background-color: var(--btn-secondary) !important;
	border-bottom-color: var(--btn-hover-border-bottom) !important;
	color: var(--btn-txt-dark);
	border-radius: 0;
}

/* Discord Text */
.text-discord {
	color: var(--txt-discord);
	font-weight: 600;
}

/* Discord Banner Paragraph */
.discord-banner p {
	margin: 0;
}

/* YouTube Section */
.youtube-section {
	border: solid var(--youtube-border);
	border-width: 0.1rem 0;
}

/* YouTube - Button */
.btn-youtube {
	background-color: var(--btn-youtube) !important;
	border-bottom: 0.3rem solid var(--youtube-border-bottom) !important;
	color: var(--btn-txt-light);
	transition: all 0.3s ease-in-out;
}

/* YouTube - Button Hover */
.btn-youtube:hover {
	background-color: var(--btn-secondary);
	border-bottom-color: var(--btn-hover-border-bottom);
	color: var (--btn-txt-dark);
}

/* YouTube - Text Color */
.text-youtube {
	color: var(--txt-youtube);
}

/* YouTube - Video Embed Responsive */
.embed-responsive {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0;
}

/* YouTube - Video Embed Responsive Item */
.embed-responsive-item {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* YouTube - Video Embed Responsive Pseudo-element */
.embed-responsive::before {
	content: "";
	display: block;
	padding-top: 55%;
}

/* Twitch Section */
.twitch-section {
	border: solid var(--twitch-border);
	border-width: 0.1rem 0;
}

/* Twitch - Button */
.btn-twitch {
	background-color: var(--btn-twitch) !important;
	border-bottom: 0.3rem solid var(--btn-twitch-border-bottom) !important;
	color: var(--btn-txt-light);
}

/* Twitch - Button Hover */
.btn-twitch:hover {
	background-color: var(--btn-secondary);
	border-bottom: 0.3rem solid var(--btn-hover-border-bottom);
	color: var(--btn-txt-dark);
}

/* Twitch - Text Color */
.text-twitch {
	color: var(--txt-twitch);
}

/* Kick Section */
.kick-section {
	border: solid var(--kick-border);
	border-width: 0.1rem 0;
}

/* Kick - Button */
.btn-kick {
	background-color: var(--btn-kick) !important;
	border-bottom: 0.3rem solid var(--btn-kick-border-bottom) !important;
	color: var(--btn-txt-dark);
}

/* Kick - Button Hover */
.btn-kick:hover {
	background-color: var(--btn-secondary);
	border-bottom: 0.3rem solid var(--btn-secondary-border);
	color: var(--btn-txt-dark);
}

/* Kick - Text Color */
.text-kick {
	color: var(--txt-kick);
}

/* Server Features Section */
#card-features .cards {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border);
	font-size: 1rem;
}

/* Card Images - Hide Overflow */
#card-features .cards .image-box {
	overflow: hidden;
}

/* Card Images - Set Size */
#card-features .cards .image-box img {
	height: 100%;
	width: 100%;
	transition: transform 0.3s;
	transform: scale(1.01);
}

/* Card Images - Hover Effect */
#card-features .cards:hover .image-box img {
	opacity: 0.5;
	transform: scale(1.1);
	transition: all 0.3s ease-in-out;
}

/* Card Image Zoom Properties and Hover State */
.card .card-img-zoom {
	overflow: hidden;
	opacity: 1;
	transition: all 0.3s;
}

.card .card-img-zoom img {
	transition: transform 0.3s;
	transform: scale(1.01);
}

.card:hover .card-img-zoom img {
	opacity: 0.7;
	transform: scale(1.1);
}

.card-header {
	color: var(--txt-dark);
	background-color: var(--bg-primary);
	/* border-bottom: 1px solid var(--border-light); */
	font-weight: 600;
	text-transform: uppercase;
}

.card:not(.card-disabled).card-hover:hover {
	filter: saturate(0) brightness(1.2);
	transition: filter 0.3s;
	border: 0.1rem solid var(--border-primary);
}

.card-img,
.card-img-top {
	border-radius: 0;
	border: 0.1rem solid var(--border);
	border-bottom: 0;
}

#vote-cards,
#donate-cards {
	border: 0.1rem solid var(--border-light);
}

.card-header:first-child {
	border-radius: 0;
}

/* Server Team Members - Card Background Images */
.small-screen-bg {
	display: none;
}

@media (max-width: 768px) {
	.card {
		position: relative;
	}
	.small-screen-bg {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-repeat: no-repeat;
		background-position: 50% 30%;
		background-size: cover;
		opacity: 0.1;
		filter: saturate(0.5);
	}
	.card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

/* Server Team Members - Profile Link - Hover State */
.profile-link:hover h6 {
	color: var(--txt-secondary) !important;
}

/* Testimonial Section */
.quote_ {
	opacity: 0.1 !important;
}

/* Testimonial Section - Avatar Images */
.testimonial-avatar {
	border: 0.1rem solid var(--border);
	transition: opacity 0.3s ease-in-out;
}

.testimonial-avatar:hover {
	border: 0.1rem solid var(--border);
	opacity: 0.7;
	transition: opacity 0.3s ease-in-out;
}

/* Class & Rank Text Colors */
.text-designer {
	color: var(--txt-designer);
}

.text-developer {
	color: var(--txt-developer);
}

.text-gm {
	color: var(--txt-gm);
}

.text-senior-gm {
	color: var(--txt-senior-gm);
}

.text-support {
	color: var(--txt-support);
}

.text-deathknight {
	color: var(--txt-deathknight) !important;
}

.text-druid {
	color: var(--txt-druid) !important;
}

.text-hunter {
	color: var(--txt-hunter) !important;
}

.text-mage {
	color: var(--txt-mage) !important;
}

.text-paladin {
	color: var(--txt-paladin) !important;
}

.text-priest {
	color: var(--txt-priest) !important;
}

.text-rogue {
	color: var(--txt-rogue) !important;
}

.text-shaman {
	color: var(--txt-shaman) !important;
}

.text-warlock {
	color: var(--txt-warlock) !important;
}

.text-warrior {
	color: var(--txt-warrior) !important;
}

.text-monk {
	color: var(--txt-monk) !important;
}

.text-demonhunter {
	color: var(--txt-demonhunter) !important;
}

.text-evoker {
	color: var(--txt-evoker) !important;
}

/* Specific overrides for links with class colors to override global link styles */
a.text-deathknight,
a.text-druid,
a.text-hunter,
a.text-mage,
a.text-paladin,
a.text-priest,
a.text-rogue,
a.text-shaman,
a.text-warlock,
a.text-warrior,
a.text-monk,
a.text-demonhunter,
a.text-evoker {
	text-decoration: none !important;
}

a.text-deathknight:hover,
a.text-deathknight:focus,
a.text-deathknight:active {
	color: var(--txt-deathknight) !important;
}

a.text-druid:hover,
a.text-druid:focus,
a.text-druid:active {
	color: var(--txt-druid) !important;
}

a.text-hunter:hover,
a.text-hunter:focus,
a.text-hunter:active {
	color: var(--txt-hunter) !important;
}

a.text-mage:hover,
a.text-mage:focus,
a.text-mage:active {
	color: var(--txt-mage) !important;
}

a.text-paladin:hover,
a.text-paladin:focus,
a.text-paladin:active {
	color: var(--txt-paladin) !important;
}

a.text-priest:hover,
a.text-priest:focus,
a.text-priest:active {
	color: var(--txt-priest) !important;
}

a.text-rogue:hover,
a.text-rogue:focus,
a.text-rogue:active {
	color: var(--txt-rogue) !important;
}

a.text-shaman:hover,
a.text-shaman:focus,
a.text-shaman:active {
	color: var(--txt-shaman) !important;
}

a.text-warlock:hover,
a.text-warlock:focus,
a.text-warlock:active {
	color: var(--txt-warlock) !important;
}

a.text-warrior:hover,
a.text-warrior:focus,
a.text-warrior:active {
	color: var(--txt-warrior) !important;
}

a.text-monk:hover,
a.text-monk:focus,
a.text-monk:active {
	color: var(--txt-monk) !important;
}

a.text-demonhunter:hover,
a.text-demonhunter:focus,
a.text-demonhunter:active {
	color: var(--txt-demonhunter) !important;
}

a.text-evoker:hover,
a.text-evoker:focus,
a.text-evoker:active {
	color: var(--txt-evoker) !important;
}

/* WoW Item Qualities */
.item-poor {
	color: var(--txt-item-poor);
}

.item-common {
	color: var(--txt-item-common);
}

.item-uncommon {
	color: var(--txt-item-uncommon);
}

.item-rare {
	color: var(--txt-item-rare);
}

.item-epic {
	color: var(--txt-item-epic);
}

.item-legendary {
	color: var(--txt-item-legendary);
}

.item-artifact {
	color: var(--txt-item-artifact);
}

.item-heirloom {
	color: var(--txt-item-heirloom);
}

/* Store - Cart */
#cart_item_count {
	color: var(--txt-secondary);
}

/* Store - Price Color DP & VP */
#cart_price #dp_price_full span,
#cart_price #vp_price_full span {
	color: var(--txt-primary);
}

/* Store - Override VP price color */
#cart_price #vp_price_full span {
	color: var(--txt-secondary);
}

/* Store - Checkout Info */
#checkout_info {
	padding-bottom: 1rem;
}

/* Store - Margin */
#checkout_info .mb-3 {
	margin-top: 20px;
}

/* Store - Checkout Info Font */
#checkout_info b {
	color: var(--txt-primary);
	font-weight: 500;
}

/* Store - Hide Images Checkout */
#checkout_info img {
	display: none;
}

/* Store - Padding Paragraphs Checkout Info */
#checkout_info p {
	padding-bottom: 5rem;
}

/* Store - Item Quality Font */
#item_quality {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
}

/* Store - Background Color Card Body */
#item_space .card-body {
	background-color: var(--bg);
}

/* Store - Filter - Button Focus & Active States */
.btn-check:checked + .btn,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + {
	color: var(--txt-dark);
	background-color: var(--btn-secondary);
	border-color: var(--btn-secondary-border);
}

/* Store - Filter - Button Active State When Filter Is Enabled */
.nice_active {
	color: var(--txt-dark);
	background-color: var(--btn-secondary);
	border-color: var(--btn-secondary-border);
}

/* Store - Filter - Box and Dropdown Menu - Remove Browser Styes */
select.filter-menu {
	background-color: var(--bg-dark);
	color: var(--txt-muted);
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Store - Filter - Dropdown Menu - Items */
select.filter-menu option {
	background-color: var(--bg-dark);
	color: var(--txt-secondary);
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu {
	background-color: var(--bg-dark);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	color: var(--txt-primary);
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu:active,
input.filter-menu:focus {
	background-color: transparent;
	box-shadow: none;
}

/* Store - Filter - Search Box - Remove Browser Styles */
input.filter-menu:-webkit-autofill,
input.filter-menu:-webkit-autofill:hover,
input.filter-menu:-webkit-autofill:focus,
input.filter-menu:-webkit-autofill:active {
	-webkit-box-shadow: none !important;
}

/* Store - Filter - Search Placeholder Text */
#filter_name::placeholder {
	color: var(--txt-placeholder);
	opacity: 1; /* Firefox */
	text-transform: uppercase;
	font-size: 1rem;
}

.store-groups {
	padding: 0.55rem;
}

body .store_item {
	margin: 0.3rem;
	padding: 1rem;
	border: 0.1rem solid var(--border-light) !important;
	border-radius: 0rem;
}

/* =============================================================================
   TABLES & DATATABLES
   ============================================================================= */
.table {
	--bs-table-bg: var(--bg-darker);
	--bs-table-striped-color: var(--txt-secondary);
	--bs-table-striped-bg: var(--bg-dark);
	--bs-table-active-color: var(--txt-secondary);
	--bs-table-active-bg: var(--bg-dark);
	--bs-table-hover-color: var(--txt-primary);
	--bs-table-hover-bg: var(--bg);
	--bs-table-color: var(--txt-secondary);
	cursor: pointer;
	color: var(--txt-secondary);
}

/* Table Header */
.table thead th {
	background-color: var(--bg-light);
	color: var(--txt-dark);
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1rem;
}

.table thead th:hover {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
}

/* Table - Items - Vertically Align Center */
.table td,
.table th {
	vertical-align: middle;
}

#dungeons,
#raids,
#mythics,
#search_results_items {
	border-color: var(--border);
	border-style: solid;
	border-width: 0.1rem;
}

#dungeons td,
#dungeons th,
#raids td,
#raids th,
#mythics td,
#mythics th,
#search_results_items td,
#search_results_items th {
	/* text-align: start; */
	vertical-align: middle;
}

/* Table - Armory - Character - Border Color */
.armory-table th,
.armory-table td,
.armory-table tbody,
thead,
tbody,
tfoot,
tr,
td,
th,
table.dataTable thead th,
table.dataTable thead td {
	border: 0.1rem solid var(--border) !important;
}

table.dataTable thead th,
table.dataTable thead td {
	padding: 10px 18px;
	border: 0.1rem solid var(--border);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
	background-image: none !important;
}

div.dt-container div.dt-length select {
	width: clamp(100px, 20vw, 200px) !important;
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.3em !important;
}

.dataTables_wrapper {
	position: relative;
	padding-bottom: 5%;
}

body .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
	color: var(--txt-secondary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	color: var(--txt-dark) !important;
}

table.table.dataTable th {
	background-color: var(--bg-light) !important;
}

/* .armory-table th:hover,
.armory-table td:hover,
.armory-table tbody:hover,
thead:hover,
tbody:hover,
tfoot:hover,
tr:hover,
td:hover,
th:hover,
table.dataTable thead th:hover,
table.dataTable thead td:hover {
	color: #fff;
} */

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
	text-align: left !important;
}

div.dt-container div.dt-search input {
	margin-left: 0 !important;
	display: inline-block;
	width: auto;
	height: 1em;
}

/* Hide dropdown arrow on mobile */
@media (max-width: 768px) {
	div.dt-container div.dt-length select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background-image: none;
	}
}

/* Datatables - Processing */
.dataTables_wrapper .dataTables_processing {
	top: 60% !important;
	padding: none !important;
	font-size: 0.8em !important;
	background-color: transparent !important;
}

#changelogTable td {
	font-family: monospace;
	font-weight: 100;
	font-size: 0.9rem;
	text-transform: capitalize;
}

#changelogTable th {
	font-weight: 600;
	font-size: 0.9rem;
}

#changelogTable tbody tr:hover td,
#changelogTable tbody tr:hover th {
	color: var(--txt-primary) !important;
}

/* Table - Sorting & Searching */
body .dataTables_wrapper .dataTables_paginate .paginate_button {
	background-color: var(--bg-darker) !important;
	border: 0.1rem solid var(--border) !important;
	border-radius: 0;
	color: var(--txt-secondary) !important;
	padding: 0.4rem 0.6rem;
	margin: 0 0.1rem;
	font-size: 0.85rem;
	font-weight: 500;
	min-width: 2rem;
	text-align: center;
	transition: all 0.2s ease;
	vertical-align: top;
	display: inline-block;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: var(--btn-txt-dark) !important;
	border: 0.1rem solid var(--btn-primary) !important;
	background-color: var(--btn-primary) !important;
	font-weight: 600;
	padding: 0.4rem 0.6rem;
	margin: 0 0.1rem;
	min-width: 2rem;
	text-align: center;
	font-size: 0.85rem;
	transition: all 0.2s ease;
	vertical-align: top;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: #000000 !important;
	border: 0.1rem solid var(--border) !important;
	background-color: #ffffff !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	cursor: default;
	color: var(--txt-dark) !important;
	border: 1px solid var(--border);
	background: transparent;
	box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--border-light) !important;
	border-radius: 0 !important;
	padding: 0.3rem !important;
	background-color: transparent;
	color: var(--txt-secondary) !important;
}

table.dataTable.no-footer {
	margin-bottom: 1rem !important;
}

.dataTables_filter label {
	margin-bottom: 1rem !important;
}

label {
	color: var(--txt-muted) !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 0.8rem !important;
	text-shadow: none !important;
	text-transform: uppercase;
	display: flex;
	align-items: center; /* Add this line */
	gap: 1rem !important;
}

/* Table Borders */
.table-bordered {
	border: 0.1rem solid var(--border);
}

/* Accordion button properties */
.accordion .accordion-item .accordion-header .accordion-button {
	color: var(--txt-dark);
	font-style: normal;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-shadow: none;
	border-radius: 0;
	padding: 0.8rem;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border: none !important;
	outline: none !important;
	border-bottom: none !important;
}

/* Accordion chevron arrow dark */
.accordion-button:not(.collapsed)::after {
	display: none;
}

/* Accordion body properties */
.accordion .accordion-item .accordion-body {
	background-color: var(--bg-dark);
	border: 0.1rem solid var(--border-light);
	font-weight: 500;
	text-transform: normal;
	color: var(--txt-secondary);
	text-shadow: none;
}

/* Accordion button after properties */
.accordion .accordion-item .accordion-header .accordion-button::after {
	display: none;
}

/* Card properties in timeline cards */
#timeline-cards .card {
	background-color: #080b0f;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
	margin-top: 50px;
}

/* Image zoom properties in card */
#timeline-cards .card .card-img-zoom {
	overflow: hidden;
}

/* Image properties in image zoom */
#timeline-cards .card .card-img-zoom img {
	height: 100%;
	width: 100%;
}

/* Card hover properties in timeline cards */
#timeline-cards .card:hover {
	box-shadow: 0 15px 26px rgba(0, 0, 0, 0.5);
}

/* Image properties in image zoom on card hover */
#timeline-cards .card:hover .card-img-zoom img {
	opacity: 0.7;
	transform: scale(1.15);
}

.card-bg {
	background-color: var(--bg-darker);
}

/* Common Tooltip Styles */
.tooltip,
.tooltip-inner,
#fusion_tooltip,
.fusion_tooltip {
	border-radius: 0.25rem;
	box-shadow: none;
	text-transform: capitalize;
}

/* Bootstrap Tooltip */
.tooltip {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border-dark);
	color: var(--txt-secondary) !important;
	font-size: 0.85rem;
}

.tooltip-inner {
	/* padding: 0.5rem; */
	color: var(--txt-secondary);
	background-color: var(--bg-darker);
}

/* FusionCMS Tooltip */
#fusion_tooltip,
.fusion_tooltip {
	background-color: var(--bg-dark);
	border: 0.1rem solid var(--border-light);
	color: var(--txt-secondary);
	padding: 1rem;
	font-size: 0.8rem;
}

/* Tooltip - Hide Arrow */
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
	display: none !important;
}

/* Affix-icon padding */
.affix-icon {
	padding: 0.2rem;
}

/* Avatar link setup */
.avatar-link {
	display: inline-block;
	position: relative;
	cursor: pointer;
}

/* Avatar image and text transitions */
.avatar-img,
.avatar-text {
	transition: opacity 0.3s ease-in-out;
}

/* Avatar image opacity on hover */
.avatar-link:hover .avatar-img {
	opacity: 0.3;
}

/* Avatar text visibility on hover */
.avatar-link:hover .avatar-text {
	opacity: 1;
}

/* Avatar text positioning and color */
.avatar-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	color: var(--txt-primary);
}

.avatar {
	float: left;
	margin-right: 10px;
	margin-left: 0;
	margin-top: 3px;
}

/* Avatar box shadow and border */
body .my_avatar {
	box-shadow: none;
	border: 0.1rem solid var(--border-light);
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

/* Avatar image desaturation on hover */
body .my_avatar:hover img {
	filter: saturate(0);
}

/* Avatar box shadow and border on hover */
body .my_avatar:hover {
	box-shadow: none;
	border: 0.1rem solid var(--border-primary);
}

/* Current avatar border */
body .avatar_current {
	border: 0.1rem solid var(--border-primary);
}

/* Badge border radius and font size */
.badge {
	border-radius: 0;
	font-size: 0.75em;
}

/* Character - Fit Image */
.character-avatar {
	object-fit: cover;
}

/* Alliance background image */
body .bg-faction.alliance {
	background-image: url(/application/images/misc/bg_alliance_complete.png);
}

/* Dark border color */
.border-dark {
	border-color: var(--border-dark);
}

/* Default card setup */
.card {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border);
	border-radius: 0rem;
	box-shadow: none;
}

/* Card title color */
.card-title {
	color: var(--txt-primary);
}

/* Card footer border */
.card-footer {
	border-top: 0.1rem solid var(--border);
}

/* Footer - Discord Widget Header */
.discord-header {
	background-color: var(--btn-discord);
}

/* Disabled card appearance */
.card-disabled {
	opacity: 50%;
	filter: saturate(0);
}

/* Character select block text */
.character-select .d-block {
	color: var(--txt-secondary);
	font-weight: 500;
	text-transform: uppercase;
}

/* Character select image setup */
.character-select img {
	background-color: transparent;
	border: 0.1rem solid #323649;
	border-radius: 0 !important;
}

/* Copper points text setup */
.copper-points,
.copper-points:before {
	color: #ffb45e;
	font-weight: 500;
	text-transform: uppercase;
}

/* Hide icon within copper points */
.copper-points i {
	display: none;
}

/* dp_price_value customization */
.dp_price_value {
	color: #141a21 !important;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	text-shadow: none;
}

/* Error feedback customization */
.error-feedback {
	background-color: #13141a;
	border: 0.1rem solid #323649;
	border-radius: 0;
	color: #df2929 !important;
	text-transform: uppercase;
}

/* Icon color settings */
.fa-arrow-alt-circle-left:before,
.fa-circle-left:before,
.fa-arrow-alt-circle-right:before,
.fa-circle-right:before,
.fa-shopping-cart {
	color: #080b0f;
}

/* Specific icon color override */
.fa-circle-arrow-right:before {
	color: var(--txt-secondary) !important;
	content: "\e1d9" !important;
}

/* Font weight for all children of fa-ul */
.fa-ul > * {
	font-weight: 400 !important;
}

/* Positioning for fixed-arrow */
.fixed-arrow {
	bottom: 20px;
	position: fixed;
	right: 20px;
	z-index: 999;
	transition: all 0.3s ease;
	opacity: 0;
	transform: translateY(20px);
}

.fixed-arrow.show {
	opacity: 1;
	transform: translateY(0);
}

.fixed-arrow:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Page link color and background settings */
.page-item .page-link,
.page-item.disabled .page-link,
#search_results_items_next {
	color: var(--txt-secondary);
	background-color: var(--bg-darker);
	border: 1px solid var(--border);
	border-radius: 0;
	padding: 0.4rem 0.6rem;
	margin: 0 0.1rem;
	font-size: 0.85rem;
	font-weight: 500;
	min-width: 2rem;
	text-align: center;
	transition: all 0.2s ease;
}

/* Border radius for first and last page-item */
.page-item:first-child .page-link {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Background color for active page-item and on hover */
.page-item.active .page-link {
	background-color: var(--btn-primary);
	border-color: var(--btn-primary);
	border: 1px solid var(--border);
	color: var(--btn-txt-dark);
	font-weight: 600;
}

.page-item .page-link:hover {
	background-color: #ffffff;
	border-color: var(--border);
	border: 1px solid var(--border);
	color: #000000;
}

.page-item.disabled .page-link {
	background-color: var(--bg-dark);
	border-color: var(--border);
	border: 1px solid var(--border);
	color: var(--txt-muted);
}

.page-item.disabled .page-link:hover {
	background-color: var(--bg-dark);
	border-color: var(--border);
	color: var(--txt-muted);
	cursor: not-allowed;
}

/* Add gaps to pagination buttons */
div.dt-container div.dt-paging ul.pagination {
	gap: 0.1rem;
	margin: 0;
	justify-content: center;
}

/* Margin for pagination button */
ul.pagination li.paginate_button {
	margin: 0;
}

/* Make pagination more compact */
.pagination {
	--bs-pagination-padding-x: 0.4rem;
	--bs-pagination-padding-y: 0.3rem;
	--bs-pagination-font-size: 0.8rem;
	--bs-pagination-border-radius: 0;
}

/* Box shadow for select on focus and active, and page-link on focus */
select:focus,
select:active,
.page-link:focus {
	box-shadow: none !important;
}

/* Customization for item, item a, and item img */
.item,
.item a,
.item img {
	border-radius: 0 !important;
}

/* Customization for item a */
.item a {
	background-image: none !important;
}

/* Customization for item img */
.item img {
	border: #181b25 0.1rem solid;
	border-radius: var(--vv-border-radius-sm) !important;
}

/* Customization for item_price img */
.item_price img {
	display: none;
}

/* Customization for list-group, list-group-item, list-group-item active, list-group-item + .list-group-item */
.list-group,
.list-group-item,
.list-group-item.active,
.list-group-item + .list-group-item {
	border-radius: 0;
	background-color: var(--bg-darker);
	border-color: var(--border);
	font-family: "Poppins", sans-serif;
	color: var(--txt-secondary);
	box-shadow: none;
	text-transform: uppercase;
}

/* Customization for list-group-item:focus, list-group-item.active */
.list-group-item:focus,
.list-group-item.active {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
	cursor: pointer;
}

/* Customization for list-group-item:hover */
.list-group-item:hover {
	background-color: var(--bg-secondary);
	color: var(--txt-dark);
	cursor: pointer;
}

/* Customization for location-select .d-block */
.location-select .d-block {
	color: var(--primary-color) !important;
	font-weight: 500;
	text-transform: uppercase;
}

/* Customization for nice_active::after, nice_active::before, nice_button img */
.nice_active::after,
.nice_active::before,
.nice_button img {
	display: none;
}

/* Customization for page-subbody */
.page-subbody {
	background: none;
	margin: 0rem;
	padding: 0rem;
}

/* Customization for page_form label */
.page_form label {
	color: var(--txt-muted);
	font-family: "Poppins", sans-serif;
	font-size: 1rem !important;
	font-weight: 500;
}

/* Customization for pagebody */
.pagebody {
	background: none;
	box-shadow: none;
	color: var(--txt-muted);
	padding: 1rem;
}

/* Customization for realm_bar and poll_bar */
.realm_bar,
.poll_bar {
	border-radius: 0;
	margin: 0;
}

/* Hide span inside realm_bar_fill */
.realm_bar_fill span {
	visibility: hidden;
}

/* Customization for realm_bar_fill.alliance and realm_bar_fill.horde */
.realm_bar_fill.alliance,
.realm_bar_fill.horde {
	border: 2px solid #141a21;
	border-radius: 0;
	padding: 0.4rem;
}

/* Background color for realm_bar_fill.alliance */
.realm_bar_fill.alliance {
	background-color: #0070dd;
}

/* Background color for realm_bar_fill.horde */
.realm_bar_fill.horde {
	background-color: #c41e3b;
}

/* Customization for sidebox */
.sidebox {
	background-color: var(--bg-darker);
	background-image: none;
	border: 0.1rem solid var(--border);
	border-radius: 0;
	box-shadow: none;
}

/* Padding for card-body inside sidebox */
.sidebox .card-body {
	padding: 0;
}

/* Customization for sidebox-body */
.sidebox .sidebox-body {
	color: var(--txt-secondary);
	height: auto;
	padding: 0.5rem;
	text-transform: uppercase;
	width: 100%;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1rem;
}

/* Customization for sort */
.sort {
	display: none;
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
}

/* Customization for popup messages */
.swal2-container.swal2-center > .swal2-popup {
	color: var(--txt-secondary);
	text-transform: uppercase;
	border: 0.1rem solid var(--border-light);
	border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background-color: var(--bg-dark);
	background-image: none;
}

.swal2-title {
	color: var(--txt-primary);
	font-size: 2em;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	word-wrap: break-word;
}

/* Customization for confirm button in popup messages */
.swal2-styled.swal2-confirm {
	background-color: var(--btn-primary) !important;
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* Customization for cancel button in popup messages */
.swal2-deny {
	background-color: var(--btn-cancel) !important;
	border-bottom: 0.3rem solid var(--btn-cancel-border-bottom) !important;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: all 3s ease;
}

/* Cookie Notice Popup - positioned in bottom-right */
.vinvictus-cookie-popup {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: 350px !important;
	max-width: 350px !important;
	background-color: #0a0c10 !important;
	border: 1px solid #1c202b !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px !important;
	text-align: center !important;
}

.vinvictus-cookie-title {
	color: var(--primary) !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	margin-bottom: 1rem !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

.vinvictus-cookie-popup .swal2-html-container {
	color: #f1f1f1 !important;
	font-size: 0.9rem !important;
	line-height: 1.5 !important;
	text-align: center !important;
	margin: 0 0 1.5rem 0 !important;
}

.vinvictus-cookie-btn {
	width: 100% !important;
}

/* Mobile responsive for cookie notice */
@media (max-width: 768px) {
	.vinvictus-cookie-popup {
		bottom: 10px !important;
		right: 10px !important;
		left: 10px !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* Fallback Cookie Notice */
.vinvictus-cookie-fallback {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 350px;
	z-index: 99999;
	background-color: #0a0c10;
	border: 1px solid #1c202b;
	border-radius: 0;
	box-shadow: none;
	padding: 20px;
	text-align: center;
}

.vinvictus-cookie-fallback .cookie-content {
	text-align: center;
}

.vinvictus-cookie-fallback .cookie-title {
	color: var(--primary);
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	text-align: center;
}

.vinvictus-cookie-fallback .cookie-title::before {
	content: "\f563";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
}

.vinvictus-cookie-fallback .cookie-text {
	color: #f1f1f1;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
	text-align: center;
}

.vinvictus-cookie-fallback .btn {
	width: 100%;
}

@media (max-width: 768px) {
	.vinvictus-cookie-fallback {
		bottom: 10px;
		right: 10px;
		left: 10px;
		width: auto;
	}
}

/* Customization for vp_price_value */
.vp_price_value {
	color: var(--txt-dark) !important;
	font-family: "Poppins", sans-serif;
	text-shadow: none;
}

/* Customization for invalid form controls on focus */
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
	border-color: var(--border);
	box-shadow: none;
}

.form-check-input:checked {
	background-color: var(--bg-light);
	border-color: var(--border);
}

.form-check-input:focus {
	border-color: var(--border);
	box-shadow: none;
}

/* Customization for hr */
hr {
	border-top: 0.1rem solid var(--border-light);
	color: var(--border-light);
	height: 0.1rem;
}

/* Customization for img.item_icon */
body .store_item img.item_icon {
	border: 0.1rem solid var(--border-light);
	margin-right: 0.1rem;
}

/* Customization for select and its options */
select,
select option,
select optgroup {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
	background-color: var(--bg-dark);
	color: var(--txt-muted);
}

/* Additional customization for select */
select {
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size: 1rem;
}

/* Customization for form controls */
select,
textarea,
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="file"],
input[type="text"],
input[type="time"],
input[type="week"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="datetime-local"] {
	color: var(--txt-dark);
	font-size: 0.9rem;
	font-family: var(--font-family);
	font-weight: 500;
	border-radius: 0;
	background-color: var(--bg-light);
	border-color: var(--border-light);
	text-shadow: none;
}

/* Customization for form-select */
.form-select {
	cursor: pointer;
	font-size: 0.9rem;
	background-color: var(--bg-light);
	border: transparent;
	text-shadow: none;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	border-radius: 0;
}

/* Form - Search Box - Focus */
textarea:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="text"]:focus,
input[type="text"]:active,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus {
	color: var(--txt-dark);
	background-color: var(--bg-light);
	box-shadow: none;
}

/* Customization for form controls on focus */
select:focus,
textarea:focus,
input:focus {
	border: transparent;
	box-shadow: none !important;
}

/* Customization for input-group */
.input-group {
	gap: 1rem;
	display: flex;
	flex-direction: row;
	border: transparent;
}

/* Font size for countdown label */
.countdown-label {
	font-size: 1rem;
}

.footer-logo {
	width: 100%;
	max-width: 80%;
	margin: auto;
}

@media (max-width: 768px) {
	.footer-logo {
		max-width: 100%;
	}
}

/* Footer - Logo - Hover */
.footer-logo {
	transition: filter 0.3s;
}

.footer-logo:hover {
	filter: saturate(0) brightness(1.2);
}

/* Textures */
.texture {
	position: relative;
}

.texture::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' width='700' height='700' opacity='0.2'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='3' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='18' specularConstant='0.2' specularExponent='20' lighting-color='%23eaeaea' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='95'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%230e1016'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23eaeaea' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
	background-size: 350px 350px;
	background-repeat: repeat;
	z-index: 0;
	opacity: 0.3;
}

/* Ensure content appears above texture */
.texture > * {
	position: relative;
	z-index: 1;
}

/* Button - Return To Top Button */
#return-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgba(45, 45, 45, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.1);
	width: 45px;
	height: 45px;
	border-radius: var(--vv-border-radius-md);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 1000;
	font-size: 16px;
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(20px);
}

#return-to-top:hover {
	background: rgba(60, 60, 60, 0.75);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(0px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#return-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Notice Bar */
.notice-bar {
	overflow: hidden;
	border-bottom: 0.1rem solid var(--border-light);
}

/* Notice Bar - Animation */
.notice-bar::before,
.notice-bar::after {
	content: "";
	position: absolute;
	top: 49%;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent, #ff0019, transparent);
	animation: backgroundShine 3s linear infinite;
	opacity: 1;
}

.notice-bar::before {
	transform: scaleY(3%);
}

.notice-bar::after {
	filter: blur(6px);
	opacity: 0.1;
}

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

/* News Article Image */
.img-height {
	height: 25vh;
	object-fit: cover;
	object-position: top;
}

.img-height-news {
	height: 15vh;
	object-fit: cover;
}

/* News Thumbnail Consistent Sizing */
.news-thumbnail {
	height: 15vh;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.news-thumbnail img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.news-thumbnail .article-video-wrapper {
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.news-thumbnail iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: none;
	pointer-events: auto;
	transition: transform 0.3s ease;
}

/* Hover effects for news thumbnails */
.card:hover .news-thumbnail img {
	transform: scale(1.05);
}

/* Responsive column adjustments */
@media (max-width: 767px) {
	.news-thumbnail {
		height: 12vh;
	}
}

@media (min-width: 1200px) {
	.news-thumbnail {
		height: 18vh;
	}
}

/* Player & Guild of the month Image */
.img-height-month {
	height: 25vh;
	object-fit: cover;
}

/* Maintenance Page */
.maintenance-margin {
	margin-top: 10rem;
}

.maintenance-logo {
	width: 400px;
	margin: auto;
}

.flex-fill {
	flex: 1 0 auto;
}

/* PVP TABLE */
.ranking-header {
	background-color: var(--bg-darker);
	color: var(--txt-primary);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.5em;
	border: 0.1rem solid var(--border);
	text-align: center;
}

/* CHARACTER PROFILE LINK */
.profile-header {
	font-family: "Poppins", sans-serif;
	font-size: 1em;
	font-weight: 600;
	color: var(--txt-dark);
	background-color: var(--bg-primary);
	border: 1px solid var(--border);
	text-transform: uppercase;
	padding: 0.5em;

	a {
		color: var(--txt-dark);
		text-decoration: none;
		font-family: "Poppins", sans-serif;
		font-weight: 600;
	}
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0;
	margin-bottom: 0;
	list-style: none;
}

.breadcrumb-item {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--txt-dark);
}

.fa-duotone.fa-swap-opacity:before,
.fa-duotone:after,
.fa-swap-opacity .fa-duotone:before,
.fa-swap-opacity .fad:before,
.fad.fa-swap-opacity:before,
.fad:after {
	opacity: var(--fa-secondary-opacity, 1) !important;
}

/* ============================================
   ARMORY LIVE SEARCH STYLES
   ============================================ */

/* Live search results container */
#live-search-results {
	background: rgba(42, 42, 42, 0.95);
	border: 1px solid #444;
	border-radius: var(--vv-border-radius-lg);
	margin-top: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px);
}

.live-search-results .results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
	border-bottom: 1px solid #555;
	border-radius: var(--vv-border-radius-lg) var(--vv-border-radius-lg) 0 0;
}

.live-search-results .results-header h5 {
	color: #ffd700;
	font-weight: 600;
	margin: 0;
}

.live-search-results .results-header .badge {
	background: #ffd700 !important;
	color: #000 !important;
	font-weight: 600;
}

/* Live results list */
.live-results-list {
	max-height: 400px;
	overflow-y: auto;
	padding: 8px;
}

.live-result-item {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	margin-bottom: 6px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--vv-border-radius-md);
	border: 1px solid transparent;
	transition: all 0.2s ease;
	cursor: pointer;
}

.live-result-item:hover {
	background: rgba(255, 215, 0, 0.1);
	border-color: rgba(255, 215, 0, 0.3);
	transform: translateY(-1px);
}

.live-result-item:last-child {
	margin-bottom: 0;
}

/* Item icons */
.live-result-item .item-icon {
	width: 32px;
	height: 32px;
	border-radius: var(--vv-border-radius-sm);
	border: 1px solid #666;
	flex-shrink: 0;
}

.live-result-item .character-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
	border: 2px solid #666;
	flex-shrink: 0;
}

.live-result-item .fa-shield-alt {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffd700;
	font-size: 18px;
	flex-shrink: 0;
}

/* Result info */
.live-result-item .result-info {
	flex: 1;
	min-width: 0;
}

.live-result-item .result-name {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.live-result-item .result-details {
	font-size: 12px;
	color: #aaa;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* WoW quality colors for live results */
.live-result-item .q0 {
	color: #9d9d9d;
}
.live-result-item .q1 {
	color: #ffffff;
}
.live-result-item .q2 {
	color: #1eff00;
}
.live-result-item .q3 {
	color: #0070dd;
}
.live-result-item .q4 {
	color: #a335ee;
}
.live-result-item .q5 {
	color: #ff8000;
}
.live-result-item .q6 {
	color: #e6cc80;
}
.live-result-item .q7 {
	color: #00ccff;
}

/* Class colors for live results */
.live-result-item .class-1 {
	color: #c79c6e;
} /* Warrior */
.live-result-item .class-2 {
	color: #f58cba;
} /* Paladin */
.live-result-item .class-3 {
	color: #abd473;
} /* Hunter */
.live-result-item .class-4 {
	color: #fff569;
} /* Rogue */
.live-result-item .class-5 {
	color: #ffffff;
} /* Priest */
.live-result-item .class-6 {
	color: #c41f3b;
} /* Death Knight */
.live-result-item .class-7 {
	color: #0070de;
} /* Shaman */
.live-result-item .class-8 {
	color: #69ccf0;
} /* Mage */
.live-result-item .class-9 {
	color: #9482c9;
} /* Warlock */
.live-result-item .class-11 {
	color: #ff7d0a;
} /* Druid */

/* Search form enhancements */
.vinvictus-search-form .form-control:focus,
.vinvictus-search-form .form-select:focus {
	border-color: #ffd700;
	box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
}

.search-button-container .btn {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
	border: none;
	color: #000;
	font-weight: 600;
	padding: 8px 20px;
	border-radius: var(--vv-border-radius-md);
	transition: all 0.2s ease;
}

.search-button-container .btn:hover {
	background: linear-gradient(135deg, #ffed4a 0%, #ffd700 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Main search results tables */
.table-container {
	background: rgba(42, 42, 42, 0.95);
	border: 1px solid #444;
	border-radius: var(--vv-border-radius-lg);
	margin-top: 20px;
	overflow: hidden;
}

.table-container .table-header {
	background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
	padding: 12px 16px;
	border-bottom: 1px solid #555;
}

.table-container .table-title {
	color: #ffd700;
	font-weight: 600;
	margin: 0;
	font-size: 16px;
}

.vinvictus-data-table {
	margin: 0;
	background: transparent;
}

.vinvictus-data-table th {
	background: #2a2a2a;
	color: #ffd700;
	border-bottom: 2px solid #444;
	font-weight: 600;
	padding: 12px;
}

.vinvictus-data-table td {
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid #333;
	padding: 10px 12px;
}

.vinvictus-data-table tbody tr:hover td {
	background: rgba(255, 215, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.live-result-item {
		padding: 8px 10px;
	}

	.live-result-item .result-name {
		font-size: 13px;
	}

	.live-result-item .result-details {
		font-size: 11px;
	}

	.live-results-list {
		max-height: 300px;
	}
}

/* CONNECTION STEPS */

/* Instructions heading styling */
.instructions-heading {
	color: var(--txt-secondary) !important;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

/* Step item container - border boxes with sharp corners */
.step-item {
	background: var(--bg-dark);
	border: 1px solid var(--border);
	border-radius: 0;
	padding: 0.75rem;
	transition: all 0.2s ease;
	min-height: 60px;
}

.step-item:hover {
	background: var(--bg-darker);
	border-color: var(--border-light);
}

/* Step number styling - simple yellow square */
.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--bg-primary);
	color: var(--txt-dark);
	font-weight: 700;
	font-size: 14px;
	border-radius: 0;
	flex-shrink: 0;
}

/* Step text styling - white text */
.step-text {
	color: var(--txt-secondary);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
}

/* Responsive adjustments for steps */
@media (max-width: 576px) {
	.step-item {
		padding: 0.5rem;
	}

	.step-number {
		width: 20px;
		height: 20px;
		font-size: 12px;
	}

	.step-text {
		font-size: 13px;
	}
}

@media (max-width: 768px) {
	.step-item {
		margin-bottom: 0.5rem;
	}
}

/* ============================================
   SEASON STATUS STYLES
   ============================================ */

/* Season status badge with dynamic colors */
.season-status-badge {
	padding: 0.5rem 1rem;
	border-radius: 0;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
}

/* Season status badge color classes */
.season-status-badge.badge-active {
	background-color: var(--primary) !important;
	color: black !important;
}

.season-status-badge.badge-upcoming {
	background-color: #6c757d !important;
	color: white !important;
}

.season-status-badge.badge-ending {
	background-color: #fd7e14 !important;
	color: white !important;
}

.season-status-badge.badge-ended {
	background-color: #dc3545 !important;
	color: white !important;
}

.season-status-badge.badge-development {
	background-color: #6f42c1 !important;
	color: white !important;
}

.season-status-badge.badge-planned {
	background-color: #6c757d !important;
	color: white !important;
}

/* Season status text styling */
.season-status-text {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Season time status styling */
.season-time-status {
	color: var(--txt-secondary);
}

.season-time-remaining {
	color: var(--txt-primary);
	font-weight: 600;
}

/* Override text color when parent has Bootstrap color classes */
.text-danger .season-time-remaining {
	color: inherit !important;
}

.text-warning .season-time-remaining {
	color: inherit !important;
}

.text-muted .season-time-remaining {
	color: inherit !important;
}

/* Season progress bar styling */
.season-progress-bar {
	border-radius: 0 !important;
}

.season-progress-bar .progress-bar {
	border-radius: 0 !important;
}

/* Progress bar background colors */
.progress-bar.bg-secondary {
	background-color: #6c757d !important;
}

.progress-bar.bg-info {
	background-color: #17a2b8 !important;
}

.progress-bar.bg-primary {
	background-color: #6f42c1 !important;
}

.progress-bar.bg-warning {
	background-color: var(--bg-primary) !important;
}

.progress-bar.bg-danger {
	background-color: #dc3545 !important;
}

/* Progress text styling */
.progress-text {
	font-weight: 600;
	font-family: var(--font-family);
}

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

/* Downloads page main container */
#downloads-page {
	background: var(--bg-dark);
	min-height: 100vh;
}

/* Remove rounded corners from all downloads page elements */
#downloads-page .card,
#downloads-page .btn,
#downloads-page .form-control,
#downloads-page .form-select,
#downloads-page .badge,
#downloads-page .alert {
	border-radius: 0 !important;
}

/* Search and filter section */
.downloads-search-section {
	background: var(--bg-darker);
	border: 1px solid var(--border);
	padding: 1.5rem;
	margin-bottom: 2rem;
	border-radius: 0;
}

/* Mobile responsive search section */
@media (max-width: 576px) {
	.downloads-search-section {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}
}

.downloads-search-section .form-control,
.downloads-search-section .form-select,
.downloads-search-section .btn {
	border-radius: 0;
}

/* Downloads section */
.downloads-section {
	margin-bottom: 3rem;
	padding: 1.5rem;
	background: var(--bg-darker);
	border: 1px solid var(--border);
	border-radius: 0;
}

/* Mobile responsive downloads section */
@media (max-width: 576px) {
	.downloads-section {
		margin-bottom: 2rem;
		padding: 1rem;
	}
}

.downloads-section-title {
	color: var(--quality-legendary);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--quality-legendary);
}

.downloads-section-title i {
	color: var(--quality-legendary);
	margin-right: 0.5rem;
}

/* Download cards */
.download-card {
	background: var(--bg-darker);
	border: 1px solid var(--border);
	margin-bottom: 1rem;
	transition: none;
	border-radius: 0;
	position: relative;
}

.download-card:hover {
	border-color: var(--border);
}

.download-card .card-body {
	padding: 1rem;
	border-radius: 0;
}

/* Mobile responsive card body */
@media (max-width: 576px) {
	.download-card .card-body {
		padding: 0.75rem;
	}

	.download-card .card-title {
		font-size: 1rem;
	}
}

.download-card .card-title {
	color: var(--quality-legendary);
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.download-card .card-text {
	color: #ffffff;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

/* Download meta information styling */
.download-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

/* Mobile responsive download meta */
@media (max-width: 576px) {
	.download-meta {
		flex-direction: column;
		gap: 0.5rem;
	}

	.download-meta-item {
		justify-content: flex-start;
	}
}

.download-meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #ffffff;
	font-size: 0.9rem;
}

.download-meta-item i {
	color: var(--quality-legendary);
	font-size: 1rem;
}

/* Category badge styling */
.category-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 0;
	background: #4a5568;
	color: #ffffff;
	margin-bottom: 0.5rem;
}

/* Mobile responsive category badges */
@media (max-width: 576px) {
	.category-badge {
		font-size: 0.75rem;
		padding: 0.2rem 0.5rem;
	}
}

.category-badge.client {
	background: #4a5568;
	color: #ffffff;
}

.category-badge.launcher {
	background: #4a5568;
	color: #ffffff;
}

.category-badge.patch {
	background: #4a5568;
	color: #ffffff;
}

.category-badge.addon {
	background: #4a5568;
	color: #ffffff;
}

.category-badge.tool {
	background: #4a5568;
	color: #ffffff;
}

/* Download actions styling */
.download-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Mobile responsive download actions */
@media (max-width: 576px) {
	.download-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.download-actions .btn {
		width: 100%;
		text-align: center;
	}

	.download-info {
		justify-content: center;
		order: 2;
	}
}

.download-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #9ca3af;
	font-size: 0.9rem;
}

.download-info i {
	color: #9ca3af;
}

/* Requirements section */
.requirements-section {
	margin-top: 1rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
}

/* Mobile responsive requirements */
@media (max-width: 576px) {
	.requirements-section {
		padding: 0.75rem;
		margin-top: 0.75rem;
	}

	.requirements-title {
		font-size: 0.9rem;
	}

	.requirements-text {
		font-size: 0.85rem;
	}
}

.requirements-title {
	color: var(--quality-legendary);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.requirements-text {
	color: #ffffff;
	font-size: 0.9rem;
}

/* Hidden state for filters */
.hidden {
	display: none !important;
}

/* Download button container styling */
.download-actions-container {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-light);
}

.download-actions-container .download-actions {
	display: flex;
	justify-content: center;
	align-items: center;
}

.download-actions-container .btn {
	width: 100%;
}

/* AUTH FORMS */

/* Enhanced Auth Form Containers */
.auth-form-container {
	padding: 2rem 0;
	background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* Auth Form Cards */
.auth-form-card {
	background: rgba(var(--bg-darker), 0.95);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	position: relative;
}

.auth-form-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--bg-primary), var(--bg-secondary));
}

/* Enhanced Form Labels */
.auth-form-card .form-label {
	color: var(--txt-primary);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

/* Enhanced Form Controls */
.auth-form-card .form-control {
	background-color: var(--bg-dark);
	border: 2px solid var(--border);
	border-radius: 0.25rem;
	color: var(--txt-primary);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.auth-form-card .form-control:focus {
	background-color: var(--bg);
	border-color: var(--bg-primary);
	color: var(--txt-primary);
	box-shadow: 0 0 0 0.2rem rgba(var(--vv-primary-rgb), 0.25);
}

.auth-form-card .form-control::placeholder {
	color: var(--txt-muted);
	opacity: 0.7;
}

/* Password Show/Hide Button */
.auth-form-card .position-relative .btn-link {
	border: none;
	background: none;
	color: var(--txt-muted);
	padding: 0;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.auth-form-card .position-relative .btn-link:hover,
.auth-form-card .position-relative .btn-link:focus {
	color: var(--txt-primary);
	text-decoration: none;
}

/* Enhanced Submit Buttons */
.auth-form-card .btn-primary {
	background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
	border: none;
	border-radius: 0.25rem;
	color: var(--txt-dark);
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.75rem 1.5rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.auth-form-card .btn-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.auth-form-card .btn-primary:hover::before {
	left: 100%;
}

.auth-form-card .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(var(--vv-primary-rgb), 0.4);
}

/* Form Check Styling */
.auth-form-card .form-check-input {
	background-color: var(--bg-dark);
	border: 2px solid var(--border);
	border-radius: 0.25rem;
}

.auth-form-card .form-check-input:checked {
	background-color: var(--bg-primary);
	border-color: var(--bg-primary);
}

.auth-form-card .form-check-label {
	color: var(--txt-secondary);
	font-weight: 500;
	text-transform: none;
}

/* Enhanced CAPTCHA Section */
.auth-form-card .captcha-image-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.auth-form-card .captcha-image-container img {
	border-radius: 0.25rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.auth-form-card .captcha-image-container .btn {
	font-size: 0.8rem;
	padding: 0.25rem 0.75rem;
}

/* Demo Account Card */
.demo-account-card {
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	position: relative;
	overflow: hidden;
}

.demo-account-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--txt-primary), var(--txt-secondary));
}

.demo-account-card .bg-dark {
	background: rgba(0, 0, 0, 0.3) !important;
	border-radius: 0.25rem;
}

/* Success Page Enhancements */
.success-icon {
	color: var(--bg-primary);
	font-size: 4rem;
	margin-bottom: 1rem;
}

.success-card {
	background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	position: relative;
	overflow: hidden;
}

.success-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #28a745, #20c997);
}

.success-card .alert-success {
	background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
	border: 1px solid rgba(40, 167, 69, 0.3);
	border-radius: 0.25rem;
	color: var(--txt-primary);
}

/* Form Error Messages */
.auth-form-card .form-text.text-danger {
	color: #dc3545;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* Alert Enhancements */
.auth-form-card .alert {
	border-radius: 0.25rem;
	border: 1px solid;
}

.auth-form-card .alert-danger {
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
	border-color: rgba(220, 53, 69, 0.3);
	color: #dc3545;
}

/* Enhanced Password Toggle Icon */
.password-toggle-icon {
	transition: all 0.3s ease;
	user-select: none;
}

.password-toggle-icon:hover i {
	opacity: 1 !important;
	color: #6c757d !important; /* Dark grey hover color */
}

.password-toggle-icon i {
	transition: all 0.3s ease;
	color: #555;
}

/* Demo Account Styling */
.demo-credential-box {
	background: var(--bg-dark);
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	padding: 0.75rem 1rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

/* Demo Account Style Variants */
.demo-style-subtle .demo-credential-box {
	background: var(--bg-darker);
	border: 1px solid var(--border);
	opacity: 0.9;
}

.demo-style-prominent .demo-credential-box {
	background: var(--bg-secondary);
	border: 2px solid var(--border-primary);
	box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.demo-style-minimal .demo-credential-box {
	background: transparent;
	border: 1px solid var(--border);
	border-style: dashed;
	opacity: 0.8;
}

.demo-credential-box .form-label {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.65rem;
	margin-bottom: 0.5rem;
	color: var(--txt-muted);
	text-align: center;
	display: block;
	opacity: 0.8;
}

.demo-value {
	color: var(--txt-primary);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	text-align: center;
	letter-spacing: 0.5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.container,
	.container-fluid,
	.container-xxl,
	.container-xl,
	.container-lg,
	.container-md,
	.container-sm {
		width: 100%;
		padding-right: var(--bs-gutter-x, 0.75rem);
		padding-left: var(--bs-gutter-x, 0.75rem);
		margin-right: auto;
		margin-left: auto;
		padding: 0.2rem;
	}

	.auth-form-container {
		padding: 1rem 0;
	}

	.auth-form-card {
		margin: 1rem;
	}

	.auth-form-card .card-body {
		padding: 2rem 1.5rem;
	}

	/* Mobile captcha layout */
	.captcha-image-container {
		width: 100%;
		text-align: center;
	}

	.captcha-image-container img {
		max-width: 100%;
		height: auto !important;
		max-height: 48px;
	}

	.captcha-image-container .btn {
		font-size: 0.875rem;
	}
}

/* Small screens */
@media (max-width: 576px) {
	.auth-form-card .card-body {
		padding: 1.5rem 1rem;
	}

	.demo-account-card .card-body {
		padding: 1.5rem 1rem;
	}

	/* Improve form elements on mobile */
	.form-control-lg {
		font-size: 1rem;
		padding: 0.75rem 1rem;
	}

	/* Demo account mobile improvements */
	.demo-credential-box {
		padding: 0.5rem 0.75rem;
		margin-bottom: 0.75rem;
	}

	.demo-credential-box .form-label {
		font-size: 0.75rem;
		margin-bottom: 0.375rem;
	}

	.demo-value {
		font-size: 0.875rem;
		font-weight: 500;
	}

	/* Password toggle button mobile */
	.password-toggle-icon {
		padding-right: 0.75rem !important;
	}

	.password-toggle-icon i {
		font-size: 0.875rem !important;
	}

	/* Captcha improvements for mobile */
	.captcha-image-container {
		margin-top: 0.5rem;
	}

	.captcha-image-container .btn {
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
	}

	/* Login button mobile */
	.btn-lg {
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
	}

	/* Form spacing adjustments */
	.mb-3 {
		margin-bottom: 1rem !important;
	}

	.mb-md-4 {
		margin-bottom: 1rem !important;
	}
}

/* Extra small screens */
@media (max-width: 375px) {
	.auth-form-card .card-body {
		padding: 1rem 0.75rem;
	}

	.demo-account-card .card-body {
		padding: 1rem 0.75rem;
	}

	/* Further reduce form control size */
	.form-control-lg {
		font-size: 0.9375rem;
		padding: 0.625rem 0.875rem;
	}

	/* Tighter spacing for very small screens */
	.demo-credential-box {
		padding: 0.375rem 0.625rem;
	}

	.demo-value {
		font-size: 0.8125rem;
	}

	.btn-lg {
		padding: 0.625rem 1.25rem;
		font-size: 0.9375rem;
	}
}

/* AOS ANIMATIONS */
/* Optimized AOS animations for authentication pages */

/* Simple fade-up animation for all elements */
[data-aos="fade-up"] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

[data-aos="fade-up"].aos-animate {
	opacity: 1;
	transform: translateY(0);
}

/* Smooth focus states for animated elements */
.auth-form [data-aos] .form-control:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
	border-color: var(--bg-primary);
	transition: all 0.2s ease-out;
}

.auth-form [data-aos] .btn:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
	transition: all 0.2s ease-out;
}

/* Hover effects for animated cards */
.auth-form [data-aos].card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease-out;
}

/* Special animation for demo account credentials */
.demo-credential-box[data-aos] {
	transition: all 0.3s ease-out;
}

.demo-credential-box[data-aos]:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
}

/* Mobile responsiveness for animations */
@media (max-width: 768px) {
	/* Faster animations on mobile */
	[data-aos] {
		transition-duration: 0.3s !important;
	}

	[data-aos="fade-up"] {
		transform: translateY(10px);
	}

	.auth-form [data-aos].card:hover {
		transform: none;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	}
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
	[data-aos] {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Loading state for AOS elements */
[data-aos]:not(.aos-animate) {
	visibility: hidden;
}

[data-aos].aos-animate {
	visibility: visible;
}

/* DEMO CREDENTIALS */
/* Enhanced demo credential box interactions */

.demo-credential-box {
	cursor: pointer;
	transition: all 0.3s ease-out;
	border-radius: 0;
	position: relative;
	overflow: hidden;
}

.demo-credential-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
	transition: left 0.5s ease-out;
}

.demo-credential-box:hover::before {
	left: 100%;
}

.demo-credential-box.demo-hover {
	background-color: rgba(255, 193, 7, 0.05);
	border-color: rgba(255, 193, 7, 0.2);
	transform: translateY(-2px);
}

.demo-credential-box:active {
	transform: translateY(0);
}

.demo-credential-box .demo-value {
	transition: all 0.3s ease-out;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.demo-credential-box.demo-hover .demo-value {
	color: var(--bg-primary);
	text-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

/* Demo fill animation for form inputs */
.form-control.demo-filled {
	background-color: rgba(255, 193, 7, 0.1);
	border-color: var(--bg-primary);
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
	animation: demoFillPulse 0.6s ease-out;
}

@keyframes demoFillPulse {
	0% {
		transform: scale(1);
		background-color: rgba(255, 193, 7, 0.2);
	}
	50% {
		transform: scale(1.02);
		background-color: rgba(255, 193, 7, 0.15);
	}
	100% {
		transform: scale(1);
		background-color: rgba(255, 193, 7, 0.1);
	}
}

/* Click indicator */
.demo-credential-box::after {
	content: "Click to fill";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.7rem;
	color: var(--txt-muted);
	opacity: 0;
	transition: all 0.3s ease-out;
	white-space: nowrap;
}

.demo-credential-box:hover::after {
	bottom: -15px;
	opacity: 0.8;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.demo-credential-box::after {
		content: "Tap to fill";
		bottom: -15px;
		font-size: 0.65rem;
	}

	.demo-credential-box:hover::after {
		bottom: -12px;
	}
}

/* =============================================================================
   GUILD MODULE STYLES
   ============================================================================= */

/* Guild rank loading state */
.guild-rank-placeholder.loading {
	opacity: 0.6;
	font-style: italic;
}

/* Guild rank loaded successfully */
.guild-rank-placeholder.loaded {
	opacity: 1;
	font-weight: 500;
	color: var(--txt-code);
}

/* Guild rank fallback state */
.guild-rank-placeholder.fallback {
	opacity: 0.8;
	color: #888;
}

/* =============================================================================
   PVP STATISTICS MODULE STYLES
   ============================================================================= */

/* PVP Statistics - DataTables Search and Realm Changer */
#dataTables-search-container .form-control,
#realm-changer.form-select {
	height: 38px;
	line-height: 1.5;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	border-radius: 0;
	border: 1px solid #6c757d;
	background-color: #9c9eb4;
	color: #212529;
	background-image: none;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* PVP Statistics - Search Placeholder Text */
#dataTables-search-container .form-control::placeholder {
	color: #495057;
	opacity: 1;
}

/* PVP Statistics - Focus States */
#dataTables-search-container .form-control:focus,
#realm-changer.form-select:focus {
	border-color: #6c757d;
	outline: 0;
	box-shadow: none;
	background-color: #9c9eb4;
}

/* PVP Statistics - Realm Selector Custom Styling */
#realm-changer.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

/* PVP Statistics - Mobile Pagination and Entries Centering */
@media (max-width: 767.98px) {
	.dataTables_info {
		text-align: center !important;
		margin-bottom: 1rem;
	}

	.dataTables_paginate {
		text-align: center !important;
		display: flex;
		justify-content: center;
	}

	.dataTables_paginate .pagination {
		margin: 0;
		justify-content: center;
	}
}

/* ---------------- END PVP STATISTICS PAGE STYLES ---------------- */

/* ---------------- GUILD PAGE STYLES ---------------- */

/* Guild Container */
.guild-container {
	margin: 0 auto;
	max-width: 1200px;
}

/* Guild Table - Clean styling without badges */
.guild-members-table {
	background: transparent;
}

.guild-members-table thead th {
	background: rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}

.guild-members-table tbody tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
}

.guild-members-table tbody tr:hover {
	background: transparent !important;
}

.guild-members-table tbody td {
	vertical-align: middle;
	text-align: center;
	padding: 12px 8px;
	color: #fff;
}

.guild-members-table tbody tr.leader-row {
	background: rgba(255, 215, 0, 0.05);
}

.faction-text.text-primary {
	color: #007bff !important;
	font-weight: 600;
}

.faction-text.text-danger {
	color: #dc3545 !important;
	font-weight: 600;
}

.stat-item {
	background-color: var(--border-darker);
	border: 1px solid var(--border);
}

/* Race/Class Icons - with hover effect */
.guild-race-icon,
.guild-class-icon {
	border: 1px solid rgba(255, 255, 255, 0.2);
}
/* DataTables Styling Fixes */
.dataTables_wrapper {
	color: #fff !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	color: #adb5bd !important;
}

/* Length dropdown - Top Left */
.dataTables_wrapper .dataTables_length {
	float: left;
	text-align: left;
}

.dataTables_wrapper .dataTables_length label {
	color: #adb5bd !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	white-space: nowrap !important;
	margin: 0;
}

/* Datatables Loading Box */
div.dt-processing {
	width: fit-content;
	padding: 1rem;
	color: var(--txt-primary);
}

div.dt-processing > div:last-child > div {
	position: absolute;
	top: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--bg-primary) !important;
	background: rgb(var(--dt-row-selected));
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

/* Search - Top Right */
.dataTables_wrapper .dataTables_filter {
	float: right;
	text-align: right;
}

.dataTables_wrapper .dataTables_filter label {
	color: #adb5bd !important;
	white-space: nowrap !important;
	margin: 0;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	justify-content: flex-end !important;
}

/* Info - Bottom Left */
.dataTables_wrapper .dataTables_info {
	float: left;
	text-align: left;
	padding-top: 8px;
}

/* Pagination - Bottom Right */
.dataTables_wrapper .dataTables_paginate {
	float: right;
	text-align: right;
	padding-top: 8px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	background-color: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
	border-radius: var(--vv-border-radius-sm);
	padding: 4px 8px;
	margin: 0;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
	color: #6c757d;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: #adb5bd !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--vv-border-radius-sm);
	margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	color: #000 !important;
	background: var(--primary) !important;
	border: 1px solid var(--primary) !important;
}

.table-responsive .dt-info {
	color: var(--txt-muted) !important;
}

/* Responsive Guild Table */
@media (max-width: 768px) {
	.guild-members-table {
		font-size: 0.85rem;
	}

	.guild-race-icon,
	.guild-class-icon {
		width: 20px !important;
		height: 20px !important;
	}

	.guild-members-table tbody td {
		padding: 8px 4px;
	}
}

/* Guild Table Enhanced Styles */
#guild-members-table {
	width: 100% !important;
}

#guild-members-table .guild-race-icon,
#guild-members-table .guild-class-icon {
	border-radius: var(--vv-border-radius-sm);
	border: 1px solid var(--border-light);
}

/* Remove table hover effects */
#guild-members-table tbody tr:hover {
	background-color: inherit !important;
}

/* Guild DataTables specific positioning */
#guild-members-table_wrapper .dataTables_length {
	float: left;
	text-align: left;
}

#guild-members-table_wrapper .dataTables_filter {
	float: right;
	text-align: right;
}

#guild-members-table_wrapper .dataTables_info {
	float: left;
	text-align: left;
	color: #6c757d !important;
}

#guild-members-table_wrapper .dataTables_paginate {
	float: right;
	text-align: right;
}

/* Ensure proper spacing for guild table controls */
#guild-members-table_wrapper .row.mb-3 {
	margin-bottom: 1rem !important;
}

#guild-members-table_wrapper .row.mt-3 {
	margin-top: 1rem !important;
}

/* Guild leader row styling */
.leader-row {
	background-color: rgba(255, 193, 7, 0.1) !important;
	border-left: 3px solid var(--txt-warning) !important;
}

/* Remove leader row hover effect */
.leader-row:hover {
	background-color: rgba(255, 193, 7, 0.1) !important;
}

/* ---------------- END GUILD PAGE STYLES ---------------- */

/* ---------------- RANKING TABLE WOW CLASS COLORS ---------------- */
/* Override global anchor styles for ranking table character names */
.ranking-table .text-warrior a,
.ranking-table .text-warrior a:visited,
.ranking-table .text-warrior a:focus,
.ranking-table .text-warrior a:active {
	color: var(--txt-warrior) !important;
}

.ranking-table .text-warrior a:hover {
	color: #ffffff !important;
}

.ranking-table .text-paladin a,
.ranking-table .text-paladin a:visited,
.ranking-table .text-paladin a:focus,
.ranking-table .text-paladin a:active {
	color: var(--txt-paladin) !important;
}

.ranking-table .text-paladin a:hover {
	color: #ffffff !important;
}

.ranking-table .text-hunter a,
.ranking-table .text-hunter a:visited,
.ranking-table .text-hunter a:focus,
.ranking-table .text-hunter a:active {
	color: var(--txt-hunter) !important;
}

.ranking-table .text-hunter a:hover {
	color: #ffffff !important;
}

.ranking-table .text-rogue a,
.ranking-table .text-rogue a:visited,
.ranking-table .text-rogue a:focus,
.ranking-table .text-rogue a:active {
	color: var(--txt-rogue) !important;
}

.ranking-table .text-rogue a:hover {
	color: #ffffff !important;
}

.ranking-table .text-priest a,
.ranking-table .text-priest a:visited,
.ranking-table .text-priest a:focus,
.ranking-table .text-priest a:active {
	color: var(--txt-priest) !important;
}

.ranking-table .text-priest a:hover {
	color: #ffffff !important;
}

.ranking-table .text-deathknight a,
.ranking-table .text-deathknight a:visited,
.ranking-table .text-deathknight a:focus,
.ranking-table .text-deathknight a:active {
	color: var(--txt-deathknight) !important;
}

.ranking-table .text-deathknight a:hover {
	color: #ffffff !important;
}

.ranking-table .text-shaman a,
.ranking-table .text-shaman a:visited,
.ranking-table .text-shaman a:focus,
.ranking-table .text-shaman a:active {
	color: var(--txt-shaman) !important;
}

.ranking-table .text-shaman a:hover {
	color: #ffffff !important;
}

.ranking-table .text-mage a,
.ranking-table .text-mage a:visited,
.ranking-table .text-mage a:focus,
.ranking-table .text-mage a:active {
	color: var(--txt-mage) !important;
}

.ranking-table .text-mage a:hover {
	color: #ffffff !important;
}

.ranking-table .text-warlock a,
.ranking-table .text-warlock a:visited,
.ranking-table .text-warlock a:focus,
.ranking-table .text-warlock a:active {
	color: var(--txt-warlock) !important;
}

.ranking-table .text-warlock a:hover {
	color: #ffffff !important;
}

.ranking-table .text-monk a,
.ranking-table .text-monk a:visited,
.ranking-table .text-monk a:focus,
.ranking-table .text-monk a:active {
	color: var(--txt-monk) !important;
}

.ranking-table .text-monk a:hover {
	color: #ffffff !important;
}

.ranking-table .text-druid a,
.ranking-table .text-druid a:visited,
.ranking-table .text-druid a:focus,
.ranking-table .text-druid a:active {
	color: var(--txt-druid) !important;
}

.ranking-table .text-druid a:hover {
	color: #ffffff !important;
}

.ranking-table .text-demonhunter a,
.ranking-table .text-demonhunter a:visited,
.ranking-table .text-demonhunter a:focus,
.ranking-table .text-demonhunter a:active {
	color: var(--txt-demonhunter) !important;
}

.ranking-table .text-demonhunter a:hover {
	color: #ffffff !important;
}

.ranking-table .text-evoker a,
.ranking-table .text-evoker a:visited,
.ranking-table .text-evoker a:focus,
.ranking-table .text-evoker a:active {
	color: var(--txt-evoker) !important;
}

.ranking-table .text-evoker a:hover {
	color: #ffffff !important;
}

.ranking-table .text-warning a,
.ranking-table .text-warning a:visited,
.ranking-table .text-warning a:focus,
.ranking-table .text-warning a:active {
	color: var(--txt-primary) !important;
}

.ranking-table .text-warning a:hover {
	color: #ffffff !important;
}

/* =============================================================================
   RESPONSIVE STYLES
   ============================================================================= */

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	[data-aos] {
		animation: none !important;
	}
}