/* London region theme — navy #1A2B4C + gold #D4A853
   --region-color is injected by home.dwt from settings.php $backgroundBG */

:root {
	--primary-color: #1A2B4C;
	--primary-light: #2A3D5C;
	--primary-dark: #0F1A2E;
	--primary-gradient-start: rgba(26, 43, 76, 0.95);
	--primary-gradient-mid: rgba(42, 61, 100, 0.85);
	--primary-gradient-end: rgba(15, 26, 46, 0.75);
	--accent-gold: #D4A853;
	--accent-gold-light: #E8C678;
}

body {
	background: var(--region-color) !important;
}

body .overlay {
	background: transparent linear-gradient(
		180deg,
		var(--primary-gradient-start) 0%,
		var(--primary-gradient-mid) 50%,
		var(--primary-gradient-end) 100%
	) 0% 0% no-repeat padding-box !important;
}

.overlayx {
	background-color: color-mix(in srgb, var(--region-color) 40%, transparent);
}

.adss-banner,
.adss-bannerx {
	background: rgba(26, 43, 76, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.card.adss-banner {
	background: rgba(26, 43, 76, 0.35) !important;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.carousel-indicators [data-bs-target] {
	background-color: rgba(255, 255, 255, 0.4);
}
.carousel-indicators .active {
	background-color: var(--accent-gold) !important;
}

a:hover,
.text-hover-primary:hover {
	color: var(--accent-gold-light) !important;
}

.slide-overlay {
	background: transparent linear-gradient(
		360deg,
		var(--primary-color) 10%,
		rgba(26, 43, 76, 0.6) 50%,
		transparent 100%
	) 0% 0% no-repeat padding-box !important;
}

.separator-dashed {
	border-color: rgba(212, 168, 83, 0.3) !important;
}

#kt_footer {
	background: rgba(26, 43, 76, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#kt_scrolltop {
	background-color: var(--primary-color) !important;
}
#kt_scrolltop:hover {
	background-color: var(--accent-gold) !important;
}

.btn-primary {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}
.btn-primary:hover {
	background-color: var(--primary-light) !important;
	border-color: var(--primary-light) !important;
}

.carousel-caption h5,
.carousel-caption p {
	text-shadow: 2px 2px 8px rgba(26, 43, 76, 0.8);
}

.card-xl-stretch {
	border-top: 3px solid var(--accent-gold) !important;
}

/* ========== FLOATING PARTICLES ========== */

.particles-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.particle {
	position: absolute;
	width: 5px;
	height: 5px;
	background: radial-gradient(circle, rgba(212, 168, 83, 0.6) 0%, transparent 70%);
	border-radius: 50%;
	animation: float 20s infinite ease-in-out;
}

@keyframes float {
	0%, 100% {
		transform: translateY(100vh) translateX(0) scale(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
		transform: translateY(80vh) translateX(20px) scale(1);
	}
	50% {
		opacity: 0.8;
		transform: translateY(40vh) translateX(-20px) scale(1.2);
	}
	90% {
		opacity: 0.3;
		transform: translateY(10vh) translateX(10px) scale(0.8);
	}
	100% {
		transform: translateY(-10vh) translateX(0) scale(0);
		opacity: 0;
	}
}