/*

Theme Name: OmegaSurf2025

Theme URI: http://omegasurf.com/

Description: A cosmic-themed traffic exchange design with vibrant colors and energy.

Version: 1.0

Author: Claude Code AI

*/


@charset "utf-8";

/* ===========================
   Color Variables
   =========================== */

:root {
	--cosmic-navy: #0A0E27;
	--deep-space: #1A1F3A;
	--nebula-red: #4A0E15;
	--royal-purple: #6A4C93;
	--bright-pink: #E91E63;
	--hot-magenta: #FF006E;
	--cosmic-gold: #FFD700;
	--bright-cyan: #00FFFF;
}

/* ===========================
   Base Styles
   =========================== */

* {
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	background: linear-gradient(135deg, var(--cosmic-navy) 0%, var(--deep-space) 25%, var(--nebula-red) 50%, var(--royal-purple) 75%, var(--deep-space) 100%);
	background-size: 400% 400%;
	animation: cosmicShift 20s ease infinite;
	background-attachment: fixed;
	color: #E0E0E0;
	margin: 0;
	padding: 0;
	position: relative;
	overflow-x: hidden;
}

/* Starfield Effect */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		radial-gradient(2px 2px at 20px 30px, white, transparent),
		radial-gradient(2px 2px at 60px 70px, white, transparent),
		radial-gradient(1px 1px at 50px 50px, white, transparent),
		radial-gradient(1px 1px at 130px 80px, white, transparent),
		radial-gradient(2px 2px at 90px 10px, white, transparent);
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: 0.3;
	z-index: 0;
	pointer-events: none;
}

@keyframes cosmicShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ===========================
   Layout Structure
   =========================== */

.lfm_outerdiv {
	display: flex;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

/* ===========================
   Slidebar Navigation (Side Menu)
   =========================== */

.lfm_slidebar {
	min-width: 225px;
	max-width: 225px;
	min-height: 100vh;
	transition: all 0.4s ease-in-out;
	background: linear-gradient(180deg, var(--cosmic-navy) 0%, var(--deep-space) 30%, var(--nebula-red) 60%, var(--royal-purple) 100%);
	border-right: 4px solid var(--cosmic-gold);
	box-shadow: 4px 0 12px rgba(0,0,0,0.6);
	position: relative;
	overflow-y: auto;
}

/* Cosmic pattern overlay */
.lfm_slidebar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255,215,0,0.1) 10px, rgba(255,215,0,0.1) 11px),
		repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255,215,0,0.1) 10px, rgba(255,215,0,0.1) 11px);
	pointer-events: none;
	opacity: 0.3;
}

/* Desktop View Settings - Expand the slidebar by default */
@media (min-width: 890px) {
	.lfm_slidebar {
		margin-left: 0px;
	}
	.lfm_slidebar.toggled {
		margin-left: -225px;
	}
}

/* Mobile View Settings - Collapse the slidebar by default */
@media (max-width: 889px) {
	.lfm_slidebar {
		margin-left: -225px;
		position: fixed;
		z-index: 1050;
		left: 0;
		top: 0;
	}
	.lfm_slidebar.toggled {
		margin-left: 0px;
	}
}

/* Logo in menu */
.lfm_menu_logo {
	width: 100%;
	max-width: 200px;
	height: auto;
	display: block;
	margin: 20px auto 30px;
	padding: 0 10px;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
	transition: all 0.3s ease;
}

.lfm_menu_logo:hover {
	filter: drop-shadow(0 6px 12px rgba(255,215,0,0.5));
	transform: scale(1.05);
}

/* Slidebar main menu list */
.lfm_slidebar_mainmenu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.lfm_slidebar_mainmenu li {
	border-bottom: 1px solid rgba(255,215,0,0.2);
	transition: all 0.3s ease;
}

.lfm_slidebar_mainmenu li a {
	display: block;
	padding: 15px 20px;
	color: #FFD700;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: all 0.3s ease;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.lfm_slidebar_mainmenu li a span {
	margin-left: 5px;
}

.lfm_slidebar_mainmenu li a:hover {
	background: linear-gradient(90deg, rgba(233,30,99,0.8) 0%, rgba(255,0,110,0.8) 100%);
	box-shadow: inset 4px 0 0 var(--cosmic-gold);
	padding-left: 25px;
	text-shadow: 0 0 10px rgba(255,215,0,0.8), 2px 2px 4px rgba(0,0,0,0.9);
}

/* ===========================
   Main Content Area
   =========================== */

.main {
	flex: 1;
	background: transparent;
	position: relative;
	z-index: 1;
}

/* Mobile content margin when menu is open */
@media (max-width: 889px) {
	.lfm_slidebar.toggled ~ .main {
		margin-left: 225px;
	}
}

/* ===========================
   Custom Header Banner
   =========================== */

.custom-header-banner {
	width: 100%;
	position: relative;
	background: linear-gradient(135deg, var(--cosmic-navy) 0%, var(--deep-space) 50%, var(--cosmic-navy) 100%);
	border-bottom: 5px solid var(--cosmic-gold);
	box-shadow: 0 6px 20px rgba(0,0,0,0.7);
	overflow: hidden;
}

.header-background {
	position: relative;
	padding: 50px 20px 40px;
	background:
		radial-gradient(ellipse at center, rgba(255,215,0,0.15) 0%, transparent 70%),
		linear-gradient(180deg, rgba(233,30,99,0.3) 0%, transparent 100%);
}

.header-content {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

/* Animated Title */
.site-title {
	font-size: 4.5rem;
	font-weight: 900;
	margin: 0;
	padding: 0;
	background: linear-gradient(45deg,
		var(--hot-magenta) 0%,
		var(--cosmic-gold) 15%,
		var(--bright-cyan) 30%,
		var(--hot-magenta) 45%,
		var(--cosmic-gold) 60%,
		var(--bright-cyan) 75%,
		var(--hot-magenta) 90%,
		var(--cosmic-gold) 100%
	);
	background-size: 400% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: titleGlow 4s ease-in-out infinite, colorShift 8s linear infinite;
	filter: drop-shadow(4px 4px 0px rgba(233,30,99,0.5))
			drop-shadow(6px 6px 8px rgba(0,0,0,0.9));
	letter-spacing: 4px;
}

@keyframes titleGlow {
	0%, 100% {
		filter: drop-shadow(4px 4px 0px rgba(233,30,99,0.5))
				drop-shadow(6px 6px 8px rgba(0,0,0,0.9))
				drop-shadow(0 0 30px rgba(255,215,0,0.6));
	}
	50% {
		filter: drop-shadow(4px 4px 0px rgba(0,255,255,0.5))
				drop-shadow(6px 6px 8px rgba(0,0,0,0.9))
				drop-shadow(0 0 50px rgba(0,255,255,0.8));
	}
}

@keyframes colorShift {
	0% { background-position: 0% 50%; }
	100% { background-position: 400% 50%; }
}

.site-tagline {
	font-size: 1.5rem;
	color: var(--cosmic-gold);
	margin-top: 15px;
	font-weight: 700;
	letter-spacing: 3px;
	text-shadow:
		2px 2px 4px rgba(0,0,0,0.9),
		0 0 20px rgba(255,215,0,0.6);
	animation: taglineGlow 3s ease-in-out infinite;
}

@keyframes taglineGlow {
	0%, 100% {
		text-shadow:
			2px 2px 4px rgba(0,0,0,0.9),
			0 0 20px rgba(255,215,0,0.6);
	}
	50% {
		text-shadow:
			2px 2px 4px rgba(0,0,0,0.9),
			0 0 30px rgba(255,215,0,0.8),
			0 0 40px rgba(0,255,255,0.5);
	}
}

/* Responsive title sizes */
@media (max-width: 768px) {
	.site-title {
		font-size: 2.5rem;
		letter-spacing: 2px;
	}
	.site-tagline {
		font-size: 1rem;
		letter-spacing: 2px;
	}
	.header-background {
		padding: 30px 15px 25px;
	}
}

/* ===========================
   Top Bar
   =========================== */

.lfm_topbar {
	background: linear-gradient(180deg, var(--hot-magenta) 0%, var(--bright-pink) 100%);
	color: var(--cosmic-gold);
	margin-bottom: 20px;
	border-bottom: 3px solid var(--cosmic-gold);
	box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	font-weight: 600;
	padding: 10px 20px;
}

.lfm_slidebar_toggleswitch {
	font-size: 24px;
	color: var(--cosmic-gold);
	cursor: pointer;
	transition: all 0.3s ease;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.lfm_slidebar_toggleswitch:hover {
	color: var(--bright-cyan);
	text-shadow: 0 0 10px rgba(0,255,255,0.8), 2px 2px 4px rgba(0,0,0,0.9);
	transform: scale(1.1);
}

.lfm_topbar .btn-success {
	background: linear-gradient(135deg, var(--cosmic-gold) 0%, #FFA500 100%);
	border: 2px solid rgba(255,255,255,0.5);
	color: var(--cosmic-navy);
	font-weight: 700;
	text-shadow: none;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	transition: all 0.3s ease;
}

.lfm_topbar .btn-success:hover {
	background: linear-gradient(135deg, #FFA500 0%, var(--cosmic-gold) 100%);
	border-color: white;
	box-shadow: 0 6px 12px rgba(0,0,0,0.6), 0 0 20px rgba(255,215,0,0.6);
	transform: translateY(-2px);
}

/* ===========================
   Footer
   =========================== */

.lfm_footer {
	background: linear-gradient(180deg, var(--cosmic-navy) 0%, #000000 100%);
	border-top: 3px solid var(--cosmic-gold);
	box-shadow: 0 -4px 8px rgba(0,0,0,0.5);
	color: #E0E0E0;
}

.lfm_footer h4,
.lfm_footer h5 {
	color: var(--cosmic-gold);
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.lfm_footer a {
	color: #E0E0E0;
	transition: all 0.3s ease;
}

.lfm_footer a:hover {
	color: var(--cosmic-gold);
	text-shadow: 0 0 8px rgba(255,215,0,0.6);
	text-decoration: none;
}

/* ===========================
   Content Area
   =========================== */

.content {
	padding: 20px;
	position: relative;
	z-index: 1;
}

/* ===========================
   Bootstrap Component Overrides
   =========================== */

/* Cards */
.card {
	background: rgba(26,31,58,0.95) !important;
	border: 2px solid var(--cosmic-gold) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
	color: #E0E0E0 !important;
}

.card-header {
	background: linear-gradient(180deg, var(--hot-magenta) 0%, var(--bright-pink) 100%) !important;
	color: var(--cosmic-gold) !important;
	border-bottom: 2px solid var(--cosmic-gold) !important;
	font-weight: 700 !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

.card-body {
	background: rgba(26,31,58,0.95) !important;
	color: #E0E0E0 !important;
}

/* Tables */
table {
	background: rgba(232,212,176,0.9) !important;
	border: 2px solid var(--cosmic-gold) !important;
	color: #333 !important;
}

table thead {
	background: linear-gradient(180deg, var(--hot-magenta) 0%, var(--bright-pink) 100%) !important;
	color: var(--cosmic-gold) !important;
	font-weight: 700 !important;
}

table thead th {
	border-bottom: 2px solid var(--cosmic-gold) !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

table tbody tr {
	border-bottom: 1px solid rgba(107,107,107,0.3) !important;
}

table tbody tr:hover {
	background: rgba(255,215,0,0.2) !important;
}

/* Buttons */
.btn-primary {
	background: linear-gradient(135deg, var(--bright-pink) 0%, var(--hot-magenta) 100%) !important;
	border: 2px solid rgba(255,215,0,0.6) !important;
	color: white !important;
	font-weight: 600 !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
	transition: all 0.3s ease !important;
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--hot-magenta) 0%, var(--bright-pink) 100%) !important;
	border-color: var(--cosmic-gold) !important;
	box-shadow: 0 6px 12px rgba(0,0,0,0.6), 0 0 20px rgba(233,30,99,0.6) !important;
	transform: translateY(-2px) !important;
}

.btn-success {
	background: linear-gradient(135deg, var(--cosmic-gold) 0%, #FFA500 100%) !important;
	border: 2px solid rgba(255,255,255,0.5) !important;
	color: var(--cosmic-navy) !important;
	font-weight: 700 !important;
	text-shadow: none !important;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
	transition: all 0.3s ease !important;
}

.btn-success:hover {
	background: linear-gradient(135deg, #FFA500 0%, var(--cosmic-gold) 100%) !important;
	border-color: white !important;
	box-shadow: 0 6px 12px rgba(0,0,0,0.6), 0 0 20px rgba(255,215,0,0.6) !important;
	transform: translateY(-2px) !important;
}

.btn-danger {
	background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
	border: 2px solid rgba(255,215,0,0.6) !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

.btn-danger:hover {
	box-shadow: 0 6px 12px rgba(0,0,0,0.6), 0 0 20px rgba(220,20,60,0.6) !important;
	transform: translateY(-2px) !important;
}

/* Alerts */
.alert-success {
	background: rgba(106,76,147,0.9) !important;
	border: 2px solid var(--cosmic-gold) !important;
	color: white !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
}

.alert-danger {
	background: rgba(139,0,0,0.9) !important;
	border: 2px solid #DC143C !important;
	color: white !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
}

.alert-info {
	background: rgba(26,31,58,0.9) !important;
	border: 2px solid var(--bright-cyan) !important;
	color: var(--bright-cyan) !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
	background: rgba(26,31,58,0.95) !important;
	border: 2px solid var(--cosmic-gold) !important;
	color: #E0E0E0 !important;
	padding: 10px !important;
	transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--bright-pink) !important;
	box-shadow: 0 0 10px rgba(233,30,99,0.6) !important;
	outline: none !important;
}

/* Labels */
label {
	color: var(--cosmic-gold) !important;
	font-weight: 600 !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
}

/* Links */
a {
	color: var(--cosmic-gold);
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
	color: var(--bright-cyan);
	text-shadow: 0 0 8px rgba(0,255,255,0.5);
	text-decoration: none;
}

/* Pagination */
.pagination .page-link {
	background: rgba(26,31,58,0.95) !important;
	border: 2px solid var(--cosmic-gold) !important;
	color: var(--cosmic-gold) !important;
}

.pagination .page-link:hover {
	background: rgba(233,30,99,0.9) !important;
	border-color: var(--cosmic-gold) !important;
	color: white !important;
}

.pagination .page-item.active .page-link {
	background: linear-gradient(135deg, var(--bright-pink) 0%, var(--hot-magenta) 100%) !important;
	border-color: var(--cosmic-gold) !important;
	color: white !important;
}

/* Badges */
.badge-primary {
	background: linear-gradient(135deg, var(--bright-pink) 0%, var(--hot-magenta) 100%) !important;
}

.badge-success {
	background: linear-gradient(135deg, var(--cosmic-gold) 0%, #FFA500 100%) !important;
	color: var(--cosmic-navy) !important;
}

/* Progress Bars */
.progress {
	background: rgba(26,31,58,0.9) !important;
	border: 2px solid var(--cosmic-gold) !important;
}

.progress-bar {
	background: linear-gradient(90deg, var(--bright-pink) 0%, var(--hot-magenta) 50%, var(--cosmic-gold) 100%) !important;
}

/* ===========================
   Icons
   =========================== */

.far, .fas {
	margin-right: 5px;
}

/* ===========================
   Utility Classes
   =========================== */

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

.text-cosmic-pink {
	color: var(--bright-pink) !important;
}

.text-cosmic-cyan {
	color: var(--bright-cyan) !important;
}

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

.bg-cosmic-purple {
	background-color: var(--royal-purple) !important;
}

/* ===========================
   Responsive Adjustments
   =========================== */

@media (max-width: 576px) {
	.lfm_topbar {
		padding: 8px 15px;
	}

	.content {
		padding: 15px;
	}

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

/* ===========================
   Animation Classes
   =========================== */

.pulse {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.9;
	}
}

.glow {
	animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 10px rgba(255,215,0,0.5);
	}
	50% {
		box-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 30px rgba(0,255,255,0.5);
	}
}