/* =========================================================================
   Sedentarios WoW - Full In-Game Immersion Theme: Heavy Armory, Runes & Housing
   ========================================================================= */

:root {
	/* WoW Faction & Magic Colors */
	--wow-gold-light: #fde047;
	--wow-gold-main: #f59e0b;
	--wow-gold-dark: #b45309;
	--wow-gold-metal: #d4af37;
	--wow-arcane-blue: #38bdf8;
	--wow-arcane-bright: #7dd3fc;
	--wow-arcane-glow: rgba(56, 189, 248, 0.6);
	--wow-gold-glow: rgba(245, 158, 11, 0.7);
	--wow-fel-green: #4ade80;
	--wow-horde-red: #ef4444;
	--wow-horde-fire: rgba(239, 68, 68, 0.7);

	/* High Contrast Text */
	--color-primary: #e2e8f0;
	--color-secondary: #ffffff;
	--color-tertiary: #fcd34d;

	/* Links */
	--link-primary-idle: #70b4e8;
	--link-primary-active: #fcd34d;
	--link-secondary-idle: #e2e8f0;
	--link-secondary-active: #ffbe0b;

	/* Heavy Stone & Fortress Timber Surfaces */
	--bg-fortress-wood: #131b2a;
	--bg-panel-dark: linear-gradient(180deg, rgba(16, 23, 36, 0.94) 0%, rgba(9, 13, 22, 0.96) 100%);
	--bg-panel-header: linear-gradient(180deg, rgba(28, 40, 62, 0.98) 0%, rgba(13, 19, 31, 0.98) 100%);
}

/* -------------------------------------------------------------
   0. Custom WoW Runic Scrollbar
   ------------------------------------------------------------- */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #080c14;
	border-left: 1px solid rgba(212, 175, 55, 0.2);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #b45309 0%, #d4af37 50%, #78350f 100%);
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #f59e0b 0%, #fde047 50%, #b45309 100%);
	box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

/* -------------------------------------------------------------
   1. Header: Broken Stone Fortress Dintel & Embedded Faction Crests
   ------------------------------------------------------------- */
.header {
	padding: 1.5rem 0 1.25rem 0 !important;
	position: relative;
	z-index: 100;
}

.header-citadel-frame {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	gap: 0;
	background: linear-gradient(180deg, #2a2c30 0%, #15181d 50%, #0d0f13 100%);
	border: 3px solid #4a4e57;
	border-top: 4px solid #6b7280;
	border-bottom: 4px solid #1f2329;
	border-radius: 14px;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.95),
	            inset 0 2px 0 rgba(255, 255, 255, 0.15),
	            inset 0 -2px 0 rgba(0, 0, 0, 0.9),
	            0 0 30px rgba(0, 0, 0, 0.9);
	padding: 0 0.5rem;
}

/* Embedded Clean Alliance Crest (Left) */
.faction-broken-crest.faction-alliance {
	flex: 0 0 auto;
	margin-left: -20px;
	margin-top: -12px;
	margin-bottom: -12px;
	z-index: 20;
	cursor: pointer;
	position: relative;
	transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faction-broken-crest.faction-alliance img {
	height: 98px;
	width: auto;
	display: block;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
	transition: all 0.35s ease;
}

.faction-broken-crest.faction-alliance:hover {
	transform: scale(1.12) rotate(-3deg);
}

.faction-broken-crest.faction-alliance:hover img {
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 10px rgba(250, 204, 21, 0.6)) brightness(1.18);
}

/* Embedded Clean Horde Crest (Right) */
.faction-broken-crest.faction-horde {
	flex: 0 0 auto;
	margin-right: -20px;
	margin-top: -12px;
	margin-bottom: -12px;
	z-index: 20;
	cursor: pointer;
	position: relative;
	transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faction-broken-crest.faction-horde img {
	height: 98px;
	width: auto;
	display: block;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(239, 68, 68, 0.35));
	transition: all 0.35s ease;
}

.faction-broken-crest.faction-horde:hover {
	transform: scale(1.12) rotate(3deg);
}

.faction-broken-crest.faction-horde:hover img {
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(239, 68, 68, 0.95)) drop-shadow(0 0 10px rgba(249, 115, 22, 0.6)) brightness(1.18);
}

/* Dangling Fortress Chains at the Top */
.citadel-chains {
	position: absolute;
	top: -18px;
	width: 14px;
	height: 28px;
	background: repeating-linear-gradient(180deg, #52525b, #52525b 4px, #18181b 4px, #18181b 8px);
	border: 1px solid #71717a;
	border-radius: 4px;
	box-shadow: 0 4px 8px #000;
	z-index: 25;
}

.citadel-chain-1 { left: 18%; }
.citadel-chain-2 { right: 18%; }

/* Navbar carved plaque */
.header .navbar {
	flex: 1;
	background: transparent !important;
	border: none !important;
	padding: 0.5rem 1.5rem !important;
	box-shadow: none !important;
}

.header .navbar .navbar-nav .nav-item .nav-link {
	color: #e2e8f0 !important;
	font-weight: 800 !important;
	font-size: 1.05rem !important;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
	transition: all 0.25s ease-in-out !important;
	padding: 0.5rem 1.15rem !important;
	position: relative;
}

.header .navbar .navbar-nav .nav-item .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #fcd34d, transparent);
	transition: all 0.25s ease-in-out;
	transform: translateX(-50%);
	box-shadow: 0 0 8px #fcd34d;
}

.header .navbar .navbar-nav .nav-item .nav-link:hover::after,
.header .navbar .navbar-nav .nav-item .nav-link.active::after {
	width: 80%;
}

.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link.active {
	color: #fcd34d !important;
	text-shadow: 0 0 14px rgba(245, 158, 11, 0.95), 0 2px 4px #000 !important;
	transform: translateY(-2px);
}

.userbar {
	background: rgba(14, 20, 32, 0.9) !important;
	border: 1px solid rgba(212, 175, 55, 0.55) !important;
	border-radius: 8px !important;
	padding: 0.4rem 0.85rem !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
	transition: all 0.25s ease;
}

.userbar:hover {
	border-color: #f59e0b !important;
	box-shadow: 0 0 16px rgba(245, 158, 11, 0.55) !important;
}

/* -------------------------------------------------------------
   2. Slider Cinematic Edge-to-Edge Hero
   ------------------------------------------------------------- */
.section-slider {
	--slider-height: 480px !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0 !important;
	margin-bottom: 2rem !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border-top: 2px solid rgba(212, 175, 55, 0.5) !important;
	border-bottom: 3px solid rgba(212, 175, 55, 0.8) !important;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.95), 0 0 30px rgba(56, 189, 248, 0.25) !important;
	overflow: hidden;
}

.section-slider .container-fluid,
.section-slider .row,
.section-slider .slider,
.section-slider .fluxslider,
.section-slider .fluxslider .surface {
	width: 100% !important;
	height: 480px !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.section-slider .fluxslider .surface .images div,
.section-slider .slider img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

.section-slider .slider-caption {
	background: transparent !important;
	background-color: transparent !important;
	padding: 2rem 4rem !important;
	position: absolute !important;
	bottom: 1.5rem !important;
	right: 0 !important;
	width: 100% !important;
	pointer-events: none;
}

.section-slider .slider-caption::before {
	display: none !important;
	content: none !important;
	box-shadow: none !important;
}

.section-slider .slider-caption .caption-header {
	color: #ffffff !important;
	font-size: 2.2rem !important;
	font-weight: 900 !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 
	             0 4px 12px rgba(0, 0, 0, 0.9), 
	             0 0 18px rgba(56, 189, 248, 0.8) !important;
	margin-bottom: 0.4rem;
	letter-spacing: 0.5px;
}

.section-slider .slider-caption .caption-body {
	color: #fcd34d !important;
	font-size: 1.4rem !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 
	             0 4px 10px rgba(0, 0, 0, 0.9), 
	             0 0 14px rgba(245, 158, 11, 0.8) !important;
	margin-bottom: 0.3rem;
}

.section-slider .slider-caption .caption-footer {
	color: #7dd3fc !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 
	             0 0 10px rgba(56, 189, 248, 0.9) !important;
}

/* -------------------------------------------------------------
   3. Content Layout & Grid Balance (Non-Linear Heroic Flow)
   ------------------------------------------------------------- */
.section-content {
	padding-top: 1rem !important;
	padding-bottom: 3rem !important;
}

.section-content .container > .row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 0;
}

#left[mainbar] {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

#right[sidebar] {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* -------------------------------------------------------------
   4. Action Banners Row (Prominent Hero Placement)
   ------------------------------------------------------------- */
.banners {
	width: 100%;
	display: flex;
	gap: 1.25rem;
	margin-bottom: 0.5rem;
}

.banners .banner {
	border: 3px solid rgba(212, 175, 55, 0.6) !important;
	border-radius: 12px !important;
	overflow: hidden;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	cursor: pointer;
}

.banners .banner::before {
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 10px !important;
	transition: all 0.35s ease !important;
}

/* Hover: Arcane / Gold Dynamic Halo */
.banners .banner:hover {
	transform: translateY(-5px) scale(1.02) !important;
	border-color: #f59e0b !important;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95),
	            0 0 30px rgba(245, 158, 11, 0.7),
	            0 0 20px rgba(56, 189, 248, 0.5) !important;
	filter: brightness(1.08) contrast(1.05) !important;
}

/* -------------------------------------------------------------
   5. Heavy In-Game Boxes: Armor Brackets, Wood & Kirin Tor Runes
   ------------------------------------------------------------- */
.box {
	background: var(--bg-panel-dark) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	border: 2px solid rgba(212, 175, 55, 0.5) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9),
	            inset 0 1px 0 rgba(255, 255, 255, 0.15),
	            inset 0 0 25px rgba(0, 0, 0, 0.7) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	position: relative;
	overflow: hidden;
}

.box:hover {
	border-color: rgba(212, 175, 55, 0.85) !important;
	box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95),
	            0 0 22px rgba(212, 175, 55, 0.4),
	            0 0 18px rgba(56, 189, 248, 0.25),
	            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
	transform: translateY(-2px);
}

/* Corner Metal Rivets / Armor Plates */
.box .box-corner {
	position: absolute;
	width: 14px;
	height: 14px;
	z-index: 10;
	pointer-events: none;
	border-color: #d4af37;
	border-style: solid;
}

.box .box-corner-tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-top-left-radius: 6px; }
.box .box-corner-tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-top-right-radius: 6px; }
.box .box-corner-bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 6px; }
.box .box-corner-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 6px; }

/* Box Header Plaque */
.box .box-head {
	background: var(--bg-panel-header) !important;
	color: #fde047 !important;
	font-weight: 900 !important;
	font-size: 1.15rem !important;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	padding: 0.85rem 1.25rem 0.6rem 1.25rem !important;
	border-bottom: 2px solid rgba(212, 175, 55, 0.5) !important;
	text-shadow: 0 0 12px rgba(245, 158, 11, 0.7),
	             0 2px 5px rgba(0, 0, 0, 0.95) !important;
	position: relative;
	display: flex;
	flex-direction: column;
}

.box .box-head .box-head-title {
	display: flex;
	align-items: center;
	width: 100%;
}

.box .box-head .box-head-title::before {
	content: '❖';
	color: #f59e0b;
	margin-right: 0.6rem;
	font-size: 0.9rem;
	text-shadow: 0 0 8px #f59e0b;
	transition: transform 0.3s ease;
}

.box:hover .box-head .box-head-title::before {
	transform: rotate(90deg) scale(1.2);
	color: #38bdf8;
	text-shadow: 0 0 12px #38bdf8;
}

/* Kirin Tor Arcane Runic Ribbon Bar */
.box .box-runic-bar {
	width: 100%;
	height: 6px;
	margin-top: 0.5rem;
	background: url('../images/custom/runic_border.jpg') center center repeat-x;
	background-size: auto 100%;
	border-radius: 3px;
	opacity: 0.75;
	box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
	transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.box:hover .box-runic-bar {
	opacity: 1;
	box-shadow: 0 0 14px rgba(56, 189, 248, 0.85);
}

.box .box-body {
	padding: 1.25rem !important;
	color: #e2e8f0 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
	line-height: 1.65;
}

.box .box-body p,
.box .box-body article,
.box .box-body span,
.box .box-body td {
	color: #e2e8f0 !important;
}

.box .box-body h1, 
.box .box-body h2, 
.box .box-body h3, 
.box .box-body h4, 
.box .box-body h5 {
	color: #ffffff !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* -------------------------------------------------------------
   6. WoW Epic Buttons (Stone & Gilded Metal)
   ------------------------------------------------------------- */
.nice_button,
button,
.btn,
input[type="submit"],
input[type="button"] {
	background: linear-gradient(180deg, #2a374d 0%, #151d2c 50%, #0d121c 100%) !important;
	color: #f8fafc !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.75px;
	border: 2px solid #d4af37 !important;
	border-radius: 6px !important;
	padding: 0.6rem 1.4rem !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7),
	            inset 0 1px 0 rgba(255, 255, 255, 0.25),
	            inset 0 -2px 0 rgba(0, 0, 0, 0.8) !important;
	text-shadow: 0 2px 4px #000 !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	position: relative;
	overflow: hidden;
}

.nice_button:hover,
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	color: #fffbeb !important;
	border-color: #fcd34d !important;
	background: linear-gradient(180deg, #384d6c 0%, #1e293b 50%, #111827 100%) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85),
	            0 0 18px rgba(245, 158, 11, 0.75),
	            inset 0 0 10px rgba(253, 224, 71, 0.3) !important;
	text-shadow: 0 0 10px rgba(253, 224, 71, 0.8), 0 2px 4px #000 !important;
	transform: translateY(-2px);
}

.nice_button:active,
button:active,
.btn:active,
input[type="submit"]:active {
	transform: translateY(1px) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.nice_button.type-special,
.btn-primary {
	background: linear-gradient(180deg, #854d0e 0%, #713f12 50%, #451a03 100%) !important;
	border-color: #f59e0b !important;
}

.nice_button.type-special:hover,
.btn-primary:hover {
	background: linear-gradient(180deg, #a16207 0%, #854d0e 50%, #713f12 100%) !important;
	border-color: #fde047 !important;
	box-shadow: 0 0 22px rgba(245, 158, 11, 0.85) !important;
}

/* -------------------------------------------------------------
   7. Realm Status & Information Bars
   ------------------------------------------------------------- */
.realm {
	color: #ffffff !important;
	padding: 0.5rem 0;
}

.realm .realm_online {
	color: #4ade80 !important;
	font-weight: 800;
	text-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
}

.realm .realm_offline {
	color: #ef4444 !important;
	font-weight: 800;
	text-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

.realm_bar,
.poll_bar {
	background-color: rgba(8, 12, 20, 0.95) !important;
	border: 1px solid rgba(56, 189, 248, 0.4) !important;
	border-radius: 6px !important;
	height: 24px !important;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(56, 189, 248, 0.2) !important;
	overflow: hidden;
}

.realm_bar .realm_bar_fill {
	background: linear-gradient(90deg, #0284c7 0%, #38bdf8 60%, #f59e0b 100%) !important;
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
	transition: width 0.6s ease;
}

/* -------------------------------------------------------------
   8. Tables, Rankings & Lists (Interactive Runic Hover)
   ------------------------------------------------------------- */
table.nice_table,
.table {
	border-collapse: separate !important;
	border-spacing: 0 4px !important;
	width: 100%;
}

table.nice_table th,
.table th {
	background: rgba(16, 24, 38, 0.9) !important;
	color: #fde047 !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	padding: 0.75rem 1rem !important;
	border: none !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.4) !important;
}

table.nice_table tr,
.table tr {
	transition: all 0.2s ease;
}

table.nice_table tbody tr:hover,
.table tbody tr:hover {
	background: rgba(56, 189, 248, 0.12) !important;
	box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.25), 0 0 8px rgba(0, 0, 0, 0.5);
	transform: scale(1.005);
}

table.nice_table td,
.table td {
	padding: 0.75rem 1rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4) !important;
}

/* -------------------------------------------------------------
   9. Discord & Sidebox Widget Enhancements
   ------------------------------------------------------------- */
.widget-discord {
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid rgba(88, 101, 242, 0.5);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
	transition: all 0.3s ease;
}

.widget-discord:hover {
	border-color: #5865f2;
	box-shadow: 0 0 20px rgba(88, 101, 242, 0.6), 0 8px 25px rgba(0, 0, 0, 0.9);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------
   10. Rugged WoW Housing Tavern & Armory Footer
   ------------------------------------------------------------- */
.footer-housing {
	position: relative !important;
	background: url('../images/custom/footer_housing.jpg') center bottom no-repeat !important;
	background-size: cover !important;
	min-height: 480px !important;
	padding: 3rem 0 2rem 0 !important;
	border-top: 4px solid #d4af37 !important;
	box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.95), 0 0 30px rgba(245, 158, 11, 0.3) !important;
	overflow: hidden;
}

/* Heavy Timber Beam across the top of footer */
.footer-timber-beam {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 12px;
	background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Dark Vignette Overlay for Crisp Legibility */
.footer-housing::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(6, 9, 16, 0.94) 0%, rgba(6, 9, 16, 0.65) 45%, rgba(6, 9, 16, 0.88) 100%);
	pointer-events: none;
	z-index: 1;
}

.footer-housing-container {
	position: relative;
	z-index: 5;
}

.footer-nav-housing .navbar-nav .nav-link {
	color: #fde047 !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0 2px 4px #000, 0 0 10px rgba(245, 158, 11, 0.6) !important;
	transition: all 0.25s ease !important;
}

.footer-nav-housing .navbar-nav .nav-link:hover {
	color: #ffffff !important;
	text-shadow: 0 0 16px rgba(56, 189, 248, 0.9), 0 2px 4px #000 !important;
	transform: translateY(-2px);
}

.footer-divider-housing {
	height: 2px;
	background: linear-gradient(90deg, transparent, #d4af37, #f59e0b, #d4af37, transparent);
	box-shadow: 0 0 10px #f59e0b;
	margin: 1.5rem 0 !important;
}

.footer-copyright-housing {
	background: rgba(10, 15, 26, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(212, 175, 55, 0.4);
	border-radius: 10px;
	padding: 1.25rem 2rem;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	display: inline-block;
}

.footer-murloc-quote {
	color: #7dd3fc;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.5px;
	text-shadow: 0 0 12px rgba(56, 189, 248, 0.8), 0 2px 4px #000;
	margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------
   11. Sticky Vertical Action Banners (Votar & Donar)
   ------------------------------------------------------------- */
.sticky-banner-pillar {
	position: fixed;
	top: 190px;
	z-index: 1000;
	width: 125px;
	transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	display: none;
}

@media (min-width: 1380px) {
	.sticky-banner-pillar {
		display: block;
	}
}

.sticky-banner-left {
	left: 15px;
}

.sticky-banner-right {
	right: 15px;
}

/* Hanging chains above vertical banner */
.sticky-chain-hanging {
	height: 35px;
	background: repeating-linear-gradient(180deg, #71717a, #71717a 5px, #27272a 5px, #27272a 10px);
	border-left: 2px solid #a1a1aa;
	border-right: 2px solid #a1a1aa;
	margin: 0 auto;
	width: 14px;
	box-shadow: 0 4px 10px #000;
}

.sticky-banner-link {
	display: block;
	text-decoration: none;
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid #d4af37;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95),
	            0 0 15px rgba(245, 158, 11, 0.45);
	transition: all 0.35s ease;
}

.sticky-banner-link img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.35s ease, filter 0.35s ease;
}

.sticky-banner-pillar:hover {
	transform: translateY(-8px) scale(1.05);
}

.sticky-banner-pillar:hover .sticky-banner-link {
	border-color: #fde047;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 1),
	            0 0 30px rgba(245, 158, 11, 0.9),
	            0 0 20px rgba(56, 189, 248, 0.6);
}

.sticky-banner-pillar:hover .sticky-banner-link img {
	filter: brightness(1.1);
}