/*
Theme Name: Fasthits Modern
Theme URI: https://fasthits.be
Description: A modern, impactful dark theme for Fasthits.
Version: 2.0
Author: Artificial Intelligence
*/

@charset "utf-8";

/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
	/* Colors */
	--bg-dark: #0f172a;
	/* Deep Slate */
	--bg-card: #1e293b;
	/* Lighter Slate */
	--primary: #06b6d4;
	/* Cyan Neon */
	--primary-glow: rgba(6, 182, 212, 0.5);
	--secondary: #8b5cf6;
	/* Purple Neon */
	--secondary-glow: rgba(139, 92, 246, 0.5);
	--text-main: #ffffff;
	/* Pure White for better contrast */
	--text-muted: #cbd5e1;
	/* Lighter Grey for better visibility */
	--accent-gradient: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);

	/* Effects */
	--glass-bg: rgba(30, 41, 59, 0.7);
	--glass-border: 1px solid rgba(255, 255, 255, 0.1);
	--blur: blur(12px);
	--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
	--shadow-neon: 0 0 15px var(--primary-glow);

	/* Typography */
	--font-heading: 'Orbitron', sans-serif;
	--font-body: 'Poppins', sans-serif;
}

body {
	background-color: var(--bg-dark);
	color: var(--text-main);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
	background-image:
		radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
		radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%);
	background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--text-main);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1rem;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover {
	color: #fff;
	text-shadow: 0 0 8px var(--primary);
	text-decoration: none;
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */

/* The top bar container */
.lfm_menu_bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--glass-bg);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	border-bottom: var(--glass-border);
	padding: 0.5rem 1rem;
	box-shadow: var(--shadow-lg);
	margin-bottom: 40px;
}

.lfm_menu_logo {
	max-height: 50px;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
	transition: transform 0.3s ease;
}

.lfm_menu_logo:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 8px var(--primary-glow));
}

/* Navbar Links */
.lfm_menu_bar .navbar-nav>.nav-item>.nav-link {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--text-muted);
	padding: 10px 15px;
	margin: 0 5px;
	border-radius: 8px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid transparent;
}

/* Hover State */
.lfm_menu_bar .navbar-nav>.nav-item>.nav-link:hover {
	color: var(--primary);
	background: rgba(6, 182, 212, 0.1);
	box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
	border-color: rgba(6, 182, 212, 0.3);
}

/* Active/Opened State */
.lfm_menu_bar .navbar-nav>.nav-item.lfm_tab_opened>.nav-link {
	color: #fff;
	background: var(--accent-gradient);
	box-shadow: var(--shadow-neon);
	border: none;
}

/* Dropdown Menu (Secondary Level) */
.lfm_menu_tab {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--bg-card);
	border-top: 1px solid var(--primary);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	padding: 10px 0;
	display: none;
	/* JS handles display */
	z-index: 990;
	justify-content: center;
	flex-wrap: wrap;
}

li.lfm_tab_opened .lfm_menu_tab {
	display: flex;
	animation: slideDown 0.3s ease forwards;
}

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

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

/* Second level links */
.lfm_menu_tab>li>a {
	color: var(--text-muted);
	font-size: 14px;
	padding: 8px 20px;
	border-radius: 20px;
	margin: 5px;
	transition: all 0.2s;
	font-weight: 500;
}

.lfm_menu_tab>li>a:hover {
	background-color: var(--bg-dark);
	color: var(--primary);
	box-shadow: 0 0 5px var(--primary-glow);
}

/* Third Level Dropdowns */
.lfm_menu_tab .dropdown-menu {
	background-color: var(--bg-dark);
	border: var(--glass-border);
	box-shadow: var(--shadow-lg);
}

.lfm_menu_tab .dropdown-menu a {
	color: var(--text-muted);
	padding: 8px 15px;
	display: block;
	transition: 0.2s;
}

.lfm_menu_tab .dropdown-menu a:hover {
	color: var(--secondary);
	background: rgba(255, 255, 255, 0.05);
	padding-left: 20px;
	/* Slide effect */
}

/* =========================================
   3. CONTENT AREAS
   ========================================= */

#headerwrapper {
	/* Hide old header wrapper space if not needed, or style it */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 2rem auto;
	text-align: center;
}

#header {
	/* Kept for compatibility but made responsive */
	width: 100%;
	height: auto;
	min-height: 250px;
	background-image: url('header_template.png');
	/* Relative path */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

#header::before {
	/* Overlay to ensure text readability if needed */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.6));
}

/* Info Bars / Cards */
.infobar {
	background: var(--bg-card);
	border: var(--glass-border);
	border-radius: 12px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: var(--shadow-sm);
}

.infobar h2 {
	color: var(--primary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 10px;
	display: inline-block;
}

/* Buttons */
.buttonlink,
.btn,
input[type="submit"] {
	background: var(--accent-gradient);
	color: white;
	padding: 10px 25px;
	border-radius: 30px;
	border: none;
	font-family: var(--font-heading);
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 4px 15px var(--primary-glow);
	transition: transform 0.2s, box-shadow 0.2s;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.buttonlink:hover,
.btn:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px var(--secondary-glow);
	color: white;
}

.btn-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	font-size: 18px;
	margin-right: 10px;
}

/* Text Styles */
.lfm_title {
	font-family: var(--font-heading);
	color: var(--text-main);
	font-size: 28px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.lfm_descr {
	font-family: var(--font-body);
	color: var(--text-muted);
	font-size: 16px;
}

.lfm_descr_bold {
	font-family: var(--font-body);
	color: var(--text-main);
	font-weight: 700;
}

/* Footer */
.lfm_footer {
	background: var(--bg-card);
	border-top: 1px solid var(--primary);
	padding: 40px 0;
	margin-top: 50px;
	text-align: center;
	color: var(--text-main);
}

.lfm_footer h4,
.lfm_footer h5 {
	color: var(--text-main);
	font-weight: 700;
}

.lfm_footer a {
	color: var(--primary);
	font-weight: 500;
	transition: all 0.3s ease;
}

.lfm_footer a:hover {
	color: #fff;
	text-shadow: 0 0 8px var(--primary);
	text-decoration: none;
}

.lfm_footer p {
	color: var(--text-muted);
}

/* =========================================
   4. TEXT VISIBILITY ENHANCEMENTS
   ========================================= */

/* Ensure all text in cards is visible */
.card,
.upgrade-card,
.reward-card,
.pricing-card {
	color: var(--text-main);
}

.card p,
.upgrade-card p,
.reward-card p,
.pricing-card p {
	color: var(--text-muted);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.upgrade-card h1,
.upgrade-card h2,
.upgrade-card h3,
.upgrade-card h4,
.upgrade-card h5,
.upgrade-card h6,
.reward-card h1,
.reward-card h2,
.reward-card h3,
.reward-card h4,
.reward-card h5,
.reward-card h6,
.pricing-card h1,
.pricing-card h2,
.pricing-card h3,
.pricing-card h4,
.pricing-card h5,
.pricing-card h6 {
	color: var(--text-main);
}

/* List items visibility */
ul.list-unstyled li,
.reward-list li {
	color: var(--text-muted);
}

/* Strong/bold text should be white */
strong {
	color: var(--text-main);
	font-weight: 600;
}

/* Ensure lead text is visible */
.lead {
	color: var(--text-muted);
	font-size: 1.15rem;
}

/* Text color utilities */
.text-white {
	color: #ffffff !important;
}

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

/* Badge visibility */
.badge {
	font-weight: 600;
	padding: 0.35em 0.65em;
}

.badge-primary {
	background-color: var(--primary);
	color: #ffffff;
}

.badge-warning {
	background-color: #fbbf24;
	color: #000000;
}

/* User info and status text */
.user-info,
.user-status {
	color: var(--text-main);
}

.user-info p,
.user-status p {
	color: var(--text-muted);
}

/* Ensure small text is visible */
small,
.small {
	color: var(--text-muted);
}

/* Alert text visibility */
.alert {
	color: var(--text-main);
}

/* =========================================
   5. MOBILE RESPONSIVENESS
   ========================================= */

@media (max-width: 992px) {
	.lfm_menu_bar {
		padding: 0.5rem;
	}

	.lfm_menu_tab {
		position: relative;
		background: transparent;
		box-shadow: none;
		border: none;
		padding-left: 20px;
	}

	.lfm_menu_tab>li>a {
		background: rgba(255, 255, 255, 0.05);
		margin: 2px 0;
	}

	/* Center header image on mobile */
	#header {
		border-radius: 0;
	}
}