/* CSS Variables (Dark Theme) */
:root {
	--background: hsl(240, 6%, 10%);
	--foreground: hsl(0, 0%, 98%);
	--card: hsl(240, 6%, 10%);
	--card-foreground: hsl(0, 0%, 98%);
	--primary: hsl(262, 73%, 57%);
	--primary-foreground: hsl(0, 0%, 98%);
	--primary-dark: hsl(262, 73%, 47%);
	--secondary: hsl(240, 4%, 16%);
	--secondary-foreground: hsl(0, 0%, 98%);
	--muted: hsl(240, 4%, 16%);
	--muted-foreground: hsl(240, 5%, 64.9%);
	--border: hsl(240, 4%, 16%);
	--input: hsl(240, 4%, 16%);
	--ring: hsl(262, 73%, 57%);
	--radius: 0.5rem;
}

/* Base Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
		sans-serif;
	background-color: var(--background);
	color: var(--foreground);
	line-height: 1.6;
	scroll-behavior: smooth;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Gradient Text */
.gradient-text {
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% 200%;
	animation: gradient-shift 6s ease-in-out infinite;
}

@keyframes gradient-shift {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* Glass Card Effect */
.glass-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
}

/* Button Styles */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.btn-primary {
	background-color: var(--primary);
	color: var(--primary-foreground);
}

.btn-primary:hover {
	background-color: var(--primary-dark);
}

.btn-outline {
	background-color: transparent;
	border: 1px solid var(--primary);
	color: var(--primary);
}

.btn-outline:hover {
	background-color: var(--primary);
	color: var(--primary-foreground);
}

.btn-lg {
	padding: 0.75rem 2rem;
	font-size: 1.125rem;
}

.btn-full {
	width: 100%;
}

.btn-icon {
	font-size: 1.25rem;
}

/* Navigation */
.nav-bar {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 50;
	background-color: rgba(15, 15, 23, 0.8);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

.nav-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}

.nav-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 4rem;
}

.nav-logo .logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--foreground);
}

.logo-icon {
	font-size: 2rem;
	color: var(--primary);
	margin-right: 0.5rem;
}

.logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nav-desktop {
	display: none;
}

@media (min-width: 768px) {
	.nav-desktop {
		display: block;
	}
	.mobile-menu-btn {
		display: none;
	}
}

.nav-items {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color: var(--foreground);
	border-radius: var(--radius);
	transition: all 0.2s ease;
	position: relative;
}

.nav-item:hover {
	color: var(--primary);
	background-color: rgba(139, 92, 246, 0.1);
}

.nav-item.active {
	color: var(--primary);
}

.nav-icon {
	font-size: 1rem;
}

.pro-badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	background-color: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.75rem;
	padding: 0.125rem 0.375rem;
	border-radius: 9999px;
	font-weight: 600;
}

.mobile-menu-btn {
	display: block;
}

@media (min-width: 768px) {
	.mobile-menu-btn {
		display: none;
	}
}

.menu-toggle {
	background: none;
	border: none;
	color: var(--foreground);
	font-size: 1.5rem;
	cursor: pointer;
}

.mobile-menu {
	display: none;
	margin-top: 0.5rem;
}

.mobile-menu.active {
	display: block;
}

.mobile-nav-items {
	background-color: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mobile-nav-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: var(--foreground);
	border-radius: var(--radius);
	transition: all 0.2s ease;
	position: relative;
}

.mobile-nav-item:hover {
	color: var(--primary);
	background-color: rgba(139, 92, 246, 0.1);
}

.mobile-nav-item.active {
	color: var(--primary);
}

.mobile-auth-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

/* Hero Section */
.hero-section {
	position: relative;
	min-height: 100vh;
	padding-top: 4rem;
	background: linear-gradient(
		135deg,
		var(--background) 0%,
		rgba(139, 92, 246, 0.1) 50%,
		var(--background) 100%
	);
	overflow: hidden;
}

.floating-elements {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.floating-element {
	position: absolute;
	opacity: 0.3;
	color: var(--primary);
	animation: float 25s linear infinite;
}

@keyframes float {
	0% {
		transform: translateY(110vh) translateX(0px) rotate(0deg);
		opacity: 0;
	}
	5% {
		opacity: 0.4;
	}
	95% {
		opacity: 0.4;
	}
	100% {
		transform: translateY(-10vh) translateX(50px) rotate(360deg);
		opacity: 0;
	}
}

.bg-gradient {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at top,
		rgba(139, 92, 246, 0.2),
		var(--background),
		var(--background)
	);
}

.bg-circle {
	position: absolute;
	width: 24rem;
	height: 24rem;
	border-radius: 50%;
	filter: blur(3rem);
	animation: pulse 2s infinite;
}

.bg-circle-1 {
	top: 25%;
	left: 25%;
	background-color: rgba(139, 92, 246, 0.1);
}

.bg-circle-2 {
	bottom: 25%;
	right: 25%;
	background-color: rgba(168, 85, 247, 0.1);
	animation-delay: 1s;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.8;
	}
}

.hero-container {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 5rem 1rem 4rem;
	z-index: 10;
}

.hero-content {
	text-align: center;
}

.hero-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	line-height: 1.1;
}

@media (min-width: 768px) {
	.hero-title {
		font-size: 4rem;
	}
}

@media (min-width: 1024px) {
	.hero-title {
		font-size: 5rem;
	}
}

.hero-title-normal {
	color: var(--foreground);
}

.hero-subtitle {
	font-size: 1.25rem;
	color: var(--muted-foreground);
	margin-bottom: 2rem;
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.hero-subtitle {
		font-size: 1.5rem;
	}
}

.hero-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 4rem;
}

@media (min-width: 640px) {
	.hero-buttons {
		flex-direction: row;
	}
}

/* Features Grid */
.features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.feature-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	transition: all 0.3s ease;
	animation: fadeIn 0.5s ease-in-out;
}

.feature-card:hover {
	background: rgba(139, 92, 246, 0.1);
}

.feature-icon {
	font-size: 2rem;
	margin: 0 auto 1rem;
	color: var(--primary);
}

.feature-text {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Stats Section */
.stats-section {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem 4rem;
	z-index: 10;
}

.stats-container {
	max-width: 1280px;
	margin: 0 auto;
}

.stats-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 1rem;
	padding: 2rem;
}

.stats-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	text-align: center;
}

@media (min-width: 768px) {
	.stats-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-number {
	font-size: 2rem;
	font-weight: 700;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
	.stat-number {
		font-size: 2.5rem;
	}
}

.stat-label {
	color: var(--muted-foreground);
}

/* Profile Grid Section */
.profile-grid-section {
	padding: 4rem 0;
	background-color: var(--secondary);
}

.section-title {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 3rem;
	color: var(--foreground);
}

.profiles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.profiles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.profiles-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Premium Section */
.premium-section {
	padding: 4rem 0;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		var(--background)
	);
}

.premium-content {
	text-align: center;
}

.premium-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--foreground);
}

.premium-subtitle {
	color: var(--muted-foreground);
	margin-bottom: 2rem;
}

/* Footer */
.footer {
	background-color: var(--secondary);
	padding: 2rem 0;
	border-top: 1px solid var(--border);
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

@media (min-width: 768px) {
	.footer-content {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

.footer-logo {
	display: flex;
	align-items: center;
}

.footer-links {
	display: flex;
	gap: 1.5rem;
}

.footer-links a {
	color: var(--muted-foreground);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-links a:hover {
	color: var(--primary);
}

.footer-copyright {
	color: var(--muted-foreground);
	font-size: 0.875rem;
}

/* Browse Page Styles */
.browse-page {
	min-height: 100vh;
	background-color: var(--background);
	padding-top: 5rem;
}

.browse-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}

.browse-header {
	margin-bottom: 2rem;
}

.browse-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.browse-title {
		font-size: 2.5rem;
	}
}

.browse-subtitle {
	color: var(--muted-foreground);
}

/* Search and Filters */
.search-filters {
	margin-bottom: 2rem;
}

.search-bar-container {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.search-input-wrapper {
	position: relative;
	flex: 1;
	min-width: 200px;
}

.search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted-foreground);
}

.search-input {
	width: 100%;
	padding: 0.75rem 0.75rem 0.75rem 2.5rem;
	background-color: var(--input);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--foreground);
	font-size: 0.875rem;
}

.search-input::placeholder {
	color: var(--muted-foreground);
}

.search-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.filter-btn,
.location-btn {
	white-space: nowrap;
}

/* Filter Tags */
.filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.filter-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background-color: transparent;
	border: 1px solid var(--border);
	border-radius: 9999px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--foreground);
}

.filter-tag:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.filter-tag.active {
	background-color: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}

/* Load More Section */
.load-more-section {
	text-align: center;
	margin-top: 3rem;
}

/* Profile Card */
.profile-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 0.75rem;
	overflow: hidden;
	transition: all 0.3s ease;
	animation: fadeIn 0.5s ease-in-out;
	position: relative;
}

.profile-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
}

.profile-image {
	width: 100%;
	height: 400px;
	object-fit: contain;
	position: relative;
	aspect-ratio: 2/3;
	background-color: var(--secondary);
}

.profile-content {
	padding: 1rem;
}

.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0.5rem;
}

.profile-name {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--foreground);
}

.profile-age {
	color: var(--muted-foreground);
	font-size: 0.875rem;
}

.profile-badges {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 10;
}

.profile-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	text-shadow: none;
}

.profile-badge.verified {
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-badge.ai {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-badge.premium {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-location {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--muted-foreground);
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.profile-interests {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.interest-tag {
	background-color: var(--secondary);
	color: var(--foreground);
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
}

/* Admin Panel Styles */
.admin-panel {
	min-height: 100vh;
	background-color: var(--background);
}

.admin-layout {
	display: flex;
	min-height: 100vh;
}

.admin-sidebar {
	width: 16rem;
	background-color: var(--card);
	border-right: 1px solid var(--border);
}

.admin-sidebar-header {
	padding: 1.5rem;
}

.admin-title {
	font-size: 1.25rem;
	font-weight: 700;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.admin-nav {
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.admin-nav-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: none;
	border: none;
	border-radius: var(--radius);
	color: var(--foreground);
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	font-size: 0.875rem;
	position: relative;
}

.admin-nav-item:hover {
	background-color: var(--muted);
}

.admin-nav-item.active {
	background-color: var(--primary);
	color: var(--primary-foreground);
}

.nav-badge {
	margin-left: auto;
	background-color: var(--secondary);
	color: var(--foreground);
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
}

.admin-nav-item.active .nav-badge {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--primary-foreground);
}

.admin-main {
	flex: 1;
	padding: 2rem;
	overflow-y: auto;
}

.admin-section {
	display: none;
}

.admin-section.active {
	display: block;
}

.admin-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.admin-section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--foreground);
}

.pending-badge {
	background-color: var(--secondary);
	color: var(--foreground);
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
}

/* Admin Tables */
.users-table-container {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	overflow: hidden;
}

.users-table {
	width: 100%;
	border-collapse: collapse;
}

.users-table th,
.users-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.users-table th {
	background-color: var(--muted);
	font-weight: 600;
	color: var(--foreground);
}

.users-table td {
	color: var(--foreground);
}

.users-table tr:last-child td {
	border-bottom: none;
}

/* Message Cards */
.messages-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.message-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.message-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.message-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--foreground);
}

.message-from {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.message-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.message-status {
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.message-status.pending {
	background-color: #dc2626;
	color: white;
}

.message-status.replied {
	background-color: #10b981;
	color: white;
}

.message-timestamp {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.message-text {
	color: var(--foreground);
	margin-bottom: 1rem;
	line-height: 1.6;
}

.message-actions {
	display: flex;
	gap: 0.5rem;
}

/* AI Profiles Grid */
.ai-profiles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.ai-profiles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ai-profiles-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ai-profile-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.ai-profile-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ai-profile-avatar {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	overflow: hidden;
}

.ai-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ai-profile-info h3 {
	font-weight: 600;
	color: var(--foreground);
}

.ai-profile-info p {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.ai-profile-status {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	border: 1px solid var(--border);
	color: var(--foreground);
	margin-top: 0.25rem;
}

.ai-profile-stats {
	margin-bottom: 1rem;
}

.ai-profile-stat {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.ai-profile-actions {
	display: flex;
	gap: 0.5rem;
}

/* Settings Card */
.settings-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.settings-placeholder {
	text-align: center;
	padding: 3rem 0;
}

.settings-icon {
	font-size: 3rem;
	color: var(--muted-foreground);
	margin-bottom: 1rem;
}

.settings-text {
	color: var(--muted-foreground);
}

/* Membership Page Styles */
.membership-page {
	min-height: 100vh;
	background-color: var(--background);
	padding-top: 5rem;
}

.membership-container {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1rem 2rem;
}

.membership-header {
	text-align: center;
	margin-bottom: 3rem;
}

.premium-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background-color: rgba(139, 92, 246, 0.2);
	color: var(--primary);
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.crown-icon {
	font-size: 1rem;
}

.membership-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--foreground);
}

.membership-subtitle {
	font-size: 1.25rem;
	color: var(--muted-foreground);
}

.membership-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.membership-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Plan Card */
.plan-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.plan-header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.plan-icon {
	font-size: 2rem;
	color: var(--primary);
	margin-bottom: 1rem;
}

.plan-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--foreground);
	margin-bottom: 0.5rem;
}

.plan-price {
	font-size: 2.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.plan-duration {
	color: var(--muted-foreground);
}

.plan-features {
	margin-bottom: 1.5rem;
}

.features-title {
	font-weight: 600;
	color: var(--foreground);
	margin-bottom: 0.75rem;
}

.features-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.feature-check {
	color: #10b981;
	flex-shrink: 0;
}

.feature-text {
	font-size: 0.875rem;
	color: var(--foreground);
}

/* Privacy Notice */
.privacy-notice {
	background-color: rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 1rem;
	text-align: center;
	margin-top: 1.5rem;
}

.privacy-icon {
	font-size: 1.5rem;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.privacy-text {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

/* Payment Card */
.payment-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.payment-header {
	margin-bottom: 1.5rem;
}

.payment-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--foreground);
}

.payment-content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Payment Methods */
.payment-methods {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.payment-method {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem;
	background: none;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--foreground);
	font-family: inherit;
}

.payment-method:hover {
	border-color: rgba(139, 92, 246, 0.5);
}

.payment-method.active {
	border-color: var(--primary);
	background-color: rgba(139, 92, 246, 0.1);
}

.payment-method-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	margin-bottom: 0.5rem;
}

.payment-method-icon.btc {
	background-color: #f7931a;
}

.payment-method-icon.ltc {
	background-color: #a6a9aa;
}

.payment-method-icon.usdt {
	background-color: #26a17b;
}

.payment-method-icon.card {
	background-color: #8b5cf6;
}

.payment-method-name {
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
}

.payment-method-code {
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

/* Payment Details */
.payment-details {
	background-color: rgba(139, 92, 246, 0.05);
	border-radius: var(--radius);
	padding: 1rem;
}

.payment-instructions {
	margin-bottom: 1rem;
}

.payment-instructions h4 {
	font-weight: 600;
	color: var(--foreground);
	margin-bottom: 0.75rem;
}

.payment-instructions p {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-bottom: 0.75rem;
}

.payment-address {
	background-color: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.75rem;
	font-family: monospace;
	font-size: 0.875rem;
	word-break: break-all;
	margin-bottom: 0.75rem;
}

/* Payment Verification */
.payment-verification {
	margin-top: 1rem;
}

.verification-input {
	margin-bottom: 1rem;
}

.verification-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--foreground);
	margin-bottom: 0.5rem;
}

.verification-input-field {
	width: 100%;
	padding: 0.75rem;
	background-color: var(--input);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--foreground);
	font-size: 0.875rem;
}

.verification-input-field:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.verification-note {
	font-size: 0.75rem;
	color: var(--muted-foreground);
	text-align: center;
	margin-top: 1rem;
}

/* FAQ Card */
.faq-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-top: 2rem;
}

.faq-title {
	font-weight: 600;
	color: var(--foreground);
	margin-bottom: 1rem;
}

.faq-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.faq-item {
	font-size: 0.875rem;
}

.faq-question {
	font-weight: 500;
	color: var(--foreground);
	margin-bottom: 0.25rem;
}

.faq-answer {
	color: var(--muted-foreground);
	line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 1rem;
	}

	.admin-layout {
		flex-direction: column;
	}

	.admin-sidebar {
		width: 100%;
		order: 2;
	}

	.admin-main {
		order: 1;
		padding: 1rem;
	}

	.payment-methods {
		grid-template-columns: 1fr;
	}

	.membership-content {
		grid-template-columns: 1fr;
	}
}

/* Login Page Styles */
.login-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 6rem 1rem 2rem;
	overflow: hidden;
}

.login-container {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 400px;
}

.login-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.login-header {
	text-align: center;
	margin-bottom: 2rem;
}

.login-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.login-subtitle {
	color: var(--muted-foreground);
	font-size: 1rem;
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-label {
	font-weight: 600;
	color: var(--foreground);
	font-size: 0.875rem;
}

.form-input {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--input);
	color: var(--foreground);
	font-size: 1rem;
	transition: all 0.2s ease;
}

.form-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.form-input::placeholder {
	color: var(--muted-foreground);
}

.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.875rem;
}

.checkbox-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--foreground);
}

.checkbox-container input[type="checkbox"] {
	display: none;
}

.checkmark {
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--border);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
	background-color: var(--primary);
	border-color: var(--primary);
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
	content: "✓";
	color: white;
	font-size: 0.75rem;
}

.forgot-password {
	color: var(--primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.forgot-password:hover {
	color: var(--primary-dark);
}

.login-footer {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.signup-link {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.signup-link:hover {
	color: var(--primary-dark);
}

/* Account Review Page Styles */
.review-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 6rem 1rem 2rem;
	overflow: hidden;
}

.review-container {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 500px;
	text-align: center;
}

.review-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: var(--radius);
	padding: 3rem 2rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.review-icon {
	font-size: 4rem;
	margin-bottom: 1.5rem;
	animation: pulse 2s infinite;
}

.review-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.review-message {
	color: var(--muted-foreground);
	font-size: 1.125rem;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.review-steps {
	text-align: left;
	margin-bottom: 2rem;
}

.review-steps h3 {
	color: var(--foreground);
	margin-bottom: 1rem;
	font-size: 1.125rem;
}

.review-steps ul {
	list-style: none;
	padding: 0;
}

.review-steps li {
	color: var(--muted-foreground);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.review-steps li::before {
	content: "✓";
	color: var(--primary);
	font-weight: bold;
}

.review-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 640px) {
	.review-actions {
		flex-direction: row;
		justify-content: center;
	}
}

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

/* Profile Page Styles */
.profile-page {
	min-height: 100vh;
	padding: 6rem 0 2rem;
	background: var(--background);
}

.profile-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.profile-nav {
	margin-bottom: 2rem;
}

.back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted-foreground);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.2s ease;
}

.back-btn:hover {
	color: var(--foreground);
}

.profile-header-section {
	margin-bottom: 3rem;
}

.profile-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 768px) {
	.profile-hero {
		grid-template-columns: 300px 1fr;
		gap: 3rem;
	}
}

.profile-hero-image {
	width: 100%;
	height: 400px;
	object-fit: contain;
	border-radius: var(--radius);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	background-color: var(--secondary);
}

.profile-hero-content {
	space-y: 1.5rem;
}

.profile-title {
	margin-bottom: 1rem;
}

.profile-display-name {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.profile-verification {
	margin-bottom: 1rem;
}

.verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.verified-icon {
	font-size: 1rem;
}

.profile-basic-info {
	space-y: 1rem;
}

.profile-age-location {
	font-size: 1.125rem;
	color: var(--muted-foreground);
	margin-bottom: 1rem;
}

.separator {
	margin: 0 0.5rem;
}

.profile-interests-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.profile-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.profile-content {
		grid-template-columns: 2fr 1fr;
	}
}

.profile-section {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
}

.section-content {
	margin-top: 1rem;
}

.profile-about-text,
.profile-looking-for-text {
	line-height: 1.7;
	color: var(--muted-foreground);
	font-size: 1rem;
}

/* Gallery Styles */
.gallery-container {
	margin-top: 1rem;
}

.photo-gallery,
.video-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

.gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.gallery-item:hover {
	transform: scale(1.05);
}

.gallery-image,
.gallery-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.gallery-item:hover .gallery-overlay {
	opacity: 1;
}

.gallery-icon {
	font-size: 2rem;
	color: white;
}

/* Connect Section */
.connect-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.connect-buttons {
		flex-direction: row;
	}
}

.connect-note {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	text-align: center;
}

/* Media Modal */
.media-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-close {
	position: absolute;
	top: -50px;
	right: 0;
	font-size: 2rem;
	color: white;
	cursor: pointer;
	z-index: 1001;
}

.modal-media-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-image,
.modal-video {
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--radius);
}

.modal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.modal-nav-btn {
	background: rgba(0, 0, 0, 0.7);
	color: white;
	border: none;
	padding: 1rem;
	border-radius: 50%;
	font-size: 1.5rem;
	cursor: pointer;
	pointer-events: all;
	transition: background-color 0.2s ease;
}

.modal-nav-btn:hover {
	background: rgba(0, 0, 0, 0.9);
}

/* Notification Styles */
.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 1rem 1.5rem;
	border-radius: var(--radius);
	color: white;
	font-weight: 600;
	z-index: 1000;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.notification.show {
	opacity: 1;
	transform: translateX(0);
}

.notification-success {
	background-color: #10b981;
}

.notification-error {
	background-color: #dc2626;
}

.notification-info {
	background-color: #6366f1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.profile-display-name {
		font-size: 2rem;
	}

	.profile-hero-image {
		height: 300px;
	}

	.photo-gallery,
	.video-gallery {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.modal-content {
		max-width: 95vw;
		max-height: 95vh;
	}

	.modal-nav-btn {
		padding: 0.75rem;
		font-size: 1.25rem;
	}
}

/* Profile card wrapper animation */
.profile-card-wrapper {
	animation: fadeInUp 0.6s ease forwards;
	opacity: 0;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* MODERN PROFILE PAGE STYLES */

/* Modern Profile Page Container */
.profile-page-modern {
	min-height: 100vh;
	background: linear-gradient(135deg, #0a0a0b 0%, #1a1a1b 50%, #0a0a0b 100%);
	position: relative;
	overflow-x: hidden;
}

.profile-page-modern::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(
			circle at 30% 20%,
			rgba(139, 92, 246, 0.1) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 70% 80%,
			rgba(168, 85, 247, 0.1) 0%,
			transparent 50%
		);
	pointer-events: none;
}

/* Back Navigation */
.profile-back-nav {
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	position: sticky;
	top: 80px;
	z-index: 40;
	background: rgba(10, 10, 11, 0.8);
	margin-bottom: 2rem;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--muted-foreground);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: all 0.3s ease;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	border: 1px solid transparent;
}

.back-link:hover {
	color: var(--foreground);
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
	transform: translateX(-2px);
}

.back-link svg {
	transition: transform 0.3s ease;
}

.back-link:hover svg {
	transform: translateX(-3px);
}

/* Modern Hero Section */
.profile-hero-modern {
	padding: 4rem 0 6rem;
	position: relative;
}

.profile-hero-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 1024px) {
	.profile-hero-content {
		grid-template-columns: 400px 1fr;
		gap: 4rem;
	}
}

/* Profile Image Container */
.profile-image-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.profile-image-wrapper {
	position: relative;
	width: 320px;
	height: 400px;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.1)
	);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.05);
	transition: all 0.4s ease;
	cursor: pointer;
}

.profile-image-wrapper:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.1);
}

.profile-main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.profile-image-wrapper:hover .profile-main-image {
	transform: scale(1.05);
}

.profile-image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.8),
		rgba(168, 85, 247, 0.8)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.profile-image-wrapper:hover .profile-image-overlay {
	opacity: 1;
}

.image-view-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.image-view-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

/* Status Indicator */
.profile-status-indicator {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0.75rem 1.25rem;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10b981;
	animation: pulse 2s infinite;
}

.status-text {
	color: #10b981;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* Profile Info Modern */
.profile-info-modern {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.profile-header-modern {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.profile-name-modern {
	font-size: 3.5rem;
	font-weight: 300;
	line-height: 1.1;
	background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
}

@media (max-width: 768px) {
	.profile-name-modern {
		font-size: 2.5rem;
	}
}

.profile-verification-modern {
	display: flex;
	align-items: center;
}

.verified-badge-modern {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Meta Information */
.profile-meta-modern {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--muted-foreground);
	font-size: 1rem;
}

.meta-item svg {
	opacity: 0.7;
}

.meta-text {
	font-weight: 500;
}

/* Profile Interests Modern */
.profile-interests-modern {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.interest-tag {
	padding: 0.5rem 1rem;
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #a855f7;
	transition: all 0.3s ease;
}

.interest-tag:hover {
	background: rgba(139, 92, 246, 0.2);
	border-color: rgba(139, 92, 246, 0.4);
	transform: translateY(-1px);
}

/* Action Buttons */
.profile-actions-modern {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.btn-modern {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	border-radius: 16px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.btn-modern::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.btn-modern:hover::before {
	transform: translateX(100%);
}

.btn-primary-modern {
	background: linear-gradient(135deg, #8b5cf6, #a855f7);
	color: white;
	box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary-modern:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}

.btn-secondary-modern {
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: white;
	box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary-modern:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(239, 68, 68, 0.5);
}

.btn-outline-modern {
	background: rgba(255, 255, 255, 0.05);
	color: var(--muted-foreground);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

.btn-outline-modern:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--foreground);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

/* Content Section */
.profile-content-modern {
	padding: 4rem 0;
	position: relative;
}

.profile-layout-modern {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 1024px) {
	.profile-layout-modern {
		grid-template-columns: 2fr 1fr;
		gap: 4rem;
	}
}

.profile-main-content {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

/* Content Sections */
.content-section-modern {
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	padding: 2.5rem;
	transition: all 0.3s ease;
}

.content-section-modern:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
}

.section-header-modern {
	margin-bottom: 2rem;
}

.section-title-modern {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--foreground);
	margin: 0 0 1rem 0;
}

.section-divider {
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, #8b5cf6, #a855f7);
	border-radius: 2px;
}

.about-text-modern,
.looking-for-text-modern {
	line-height: 1.8;
	color: var(--muted-foreground);
	font-size: 1rem;
	margin: 0;
}

/* Gallery Modern */
.gallery-modern {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
}

.gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.05);
}

.gallery-item:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Sidebar */
.profile-sidebar-modern {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.sidebar-card-modern {
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	padding: 2rem;
	transition: all 0.3s ease;
}

.sidebar-card-modern:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.card-header-modern {
	margin-bottom: 1.5rem;
}

.card-title-modern {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--foreground);
	margin: 0;
}

.info-items-modern {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.info-item-modern {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-item-modern:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.info-value {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--foreground);
}

.status-active {
	color: #10b981 !important;
}

/* Premium Notice */
.premium-notice-modern {
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.1)
	) !important;
	border: 1px solid rgba(139, 92, 246, 0.2) !important;
	text-align: center;
}

.premium-icon-modern {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
	color: #a855f7;
}

.premium-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--foreground);
	margin: 0 0 0.75rem 0;
}

.premium-description {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
}

.btn-premium-modern {
	background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
	color: white !important;
	padding: 0.875rem 1.5rem !important;
	font-size: 0.875rem !important;
	box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.btn-premium-modern:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}

/* Enhanced Media Modal */
.media-modal-modern {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.modal-backdrop-modern {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(10px);
}

.modal-container-modern {
	position: relative;
	max-width: 95vw;
	max-height: 95vh;
	display: flex;
	flex-direction: column;
}

.modal-header-modern {
	display: flex;
	justify-content: flex-end;
	padding: 1rem;
}

.modal-close-modern {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.modal-close-modern:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

.modal-content-modern {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: calc(100vw - 120px); /* Leave space for side navigation */
	max-height: 90vh;
}

.modal-media-modern {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}

.modal-image-modern,
.modal-video-modern {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 16px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.modal-navigation-modern {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 100vw;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	pointer-events: none;
	z-index: 1001;
}

.modal-nav-btn-modern {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(15px);
	border: 2px solid rgba(255, 255, 255, 0.2);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	pointer-events: all;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-nav-btn-modern:hover {
	background: rgba(0, 0, 0, 0.95);
	transform: scale(1.1);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
	.profile-hero-content {
		padding: 0 1rem;
	}

	.profile-image-wrapper {
		width: 280px;
		height: 350px;
	}

	.profile-name-modern {
		font-size: 2.5rem;
	}

	.profile-actions-modern {
		flex-direction: column;
	}

	.btn-modern {
		justify-content: center;
	}

	.content-section-modern,
	.sidebar-card-modern {
		padding: 1.5rem;
	}

	.gallery-modern {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
	}

	/* Mobile modal navigation adjustments */
	.modal-content-modern {
		max-width: calc(100vw - 80px); /* Less space needed on mobile */
	}

	.modal-navigation-modern {
		padding: 0 10px; /* Reduced padding for mobile */
	}

	.modal-nav-btn-modern {
		width: 44px;
		height: 44px;
	}
}

/* Additional Premium Animations and Effects */

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Add floating animation to certain elements */
@keyframes float-gentle {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

.profile-image-container {
	animation: float-gentle 6s ease-in-out infinite;
}

/* Enhanced hover effects for gallery items */
.gallery-item {
	position: relative;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.1)
	);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.2),
		rgba(168, 85, 247, 0.2)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 16px;
}

.gallery-item:hover::before {
	opacity: 1;
}

/* Staggered animation for content sections */
.content-section-modern {
	opacity: 0;
	transform: translateY(30px);
	animation: slideInUp 0.8s ease forwards;
}

.content-section-modern:nth-child(1) {
	animation-delay: 0.1s;
}

.content-section-modern:nth-child(2) {
	animation-delay: 0.2s;
}

.content-section-modern:nth-child(3) {
	animation-delay: 0.3s;
}

.content-section-modern:nth-child(4) {
	animation-delay: 0.4s;
}

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

/* Sidebar cards animation */
.sidebar-card-modern {
	opacity: 0;
	transform: translateX(30px);
	animation: slideInRight 0.8s ease forwards;
}

.sidebar-card-modern:nth-child(1) {
	animation-delay: 0.3s;
}

.sidebar-card-modern:nth-child(2) {
	animation-delay: 0.5s;
}

@keyframes slideInRight {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Hero content animation */
.profile-hero-content {
	opacity: 0;
	animation: fadeInScale 1s ease forwards;
	animation-delay: 0.2s;
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Enhanced button interactions */
.btn-modern {
	position: relative;
	z-index: 1;
}

.btn-modern::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	background: inherit;
	filter: blur(20px);
	transition: opacity 0.3s ease;
	z-index: -1;
}

.btn-modern:hover::after {
	opacity: 0.6;
}

/* Interest tags enhanced animation */
.interest-tag {
	position: relative;
	overflow: hidden;
}

.interest-tag::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;
}

.interest-tag:hover::before {
	left: 100%;
}

/* Profile verification badge glow */
.verified-badge-modern {
	position: relative;
}

.verified-badge-modern::after {
	content: "";
	position: absolute;
	inset: -2px;
	background: inherit;
	border-radius: inherit;
	filter: blur(8px);
	opacity: 0.4;
	z-index: -1;
}

/* Status indicator enhanced animation */
.status-dot {
	box-shadow: 0 0 10px #10b981;
}

@keyframes pulse-glow {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 10px #10b981;
	}
	50% {
		opacity: 0.5;
		box-shadow: 0 0 20px #10b981;
	}
}

.status-dot {
	animation: pulse-glow 2s infinite;
}

/* Gallery items staggered load animation */
.gallery-item {
	opacity: 0;
	transform: scale(0.8);
	animation: scaleIn 0.5s ease forwards;
}

.gallery-item:nth-child(1) {
	animation-delay: 0.1s;
}
.gallery-item:nth-child(2) {
	animation-delay: 0.2s;
}
.gallery-item:nth-child(3) {
	animation-delay: 0.3s;
}
.gallery-item:nth-child(4) {
	animation-delay: 0.4s;
}
.gallery-item:nth-child(5) {
	animation-delay: 0.5s;
}
.gallery-item:nth-child(6) {
	animation-delay: 0.6s;
}

@keyframes scaleIn {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Enhanced modal animations */
.media-modal-modern {
	animation: fadeIn 0.3s ease forwards;
}

.modal-container-modern {
	animation: modalSlideIn 0.4s ease forwards;
	transform: scale(0.9) translateY(20px);
}

@keyframes modalSlideIn {
	to {
		transform: scale(1) translateY(0);
	}
}

/* Micro-interactions */
.card-title-modern,
.section-title-modern {
	position: relative;
}

.card-title-modern::after,
.section-title-modern::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #8b5cf6, #a855f7);
	transition: width 0.3s ease;
}

.sidebar-card-modern:hover .card-title-modern::after,
.content-section-modern:hover .section-title-modern::after {
	width: 30px;
}

/* Enhanced scrollbar styling for webkit browsers */
.profile-page-modern ::-webkit-scrollbar {
	width: 8px;
}

.profile-page-modern ::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
}

.profile-page-modern ::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, #8b5cf6, #a855f7);
	border-radius: 4px;
}

.profile-page-modern ::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #7c3aed, #9333ea);
}

/* Loading states */
.profile-main-image[src=""] {
	background: linear-gradient(
		45deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.1)
	);
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 200px 0;
	}
}

/* Advanced backdrop filter effects */
.profile-back-nav,
.content-section-modern,
.sidebar-card-modern {
	backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
	-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
}

/* Refined typography improvements */
.profile-name-modern {
	letter-spacing: -0.02em;
	text-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.section-title-modern {
	letter-spacing: -0.01em;
}

.about-text-modern,
.looking-for-text-modern {
	text-align: justify;
	hyphens: auto;
	word-spacing: 0.1em;
}

/* Focus states for accessibility */
.btn-modern:focus,
.back-link:focus,
.gallery-item:focus {
	outline: 2px solid #a855f7;
	outline-offset: 2px;
}

/* Print styles */
@media print {
	.profile-page-modern::before,
	.profile-back-nav,
	.profile-actions-modern,
	.premium-notice-modern {
		display: none !important;
	}

	.profile-page-modern {
		background: white !important;
		color: black !important;
	}
}

/* Notification Popup Styles */
.notification-popup {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	min-width: 300px;
	max-width: 400px;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1rem 1.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transform: translateX(100%);
	opacity: 0;
	transition: all 0.3s ease;
}

.notification-popup.show {
	transform: translateX(0);
	opacity: 1;
}

.notification-content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.notification-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: bold;
	flex-shrink: 0;
}

.notification-success {
	border-color: rgba(16, 185, 129, 0.3);
}

.notification-success .notification-icon {
	background: #10b981;
	color: white;
}

.notification-error {
	border-color: rgba(239, 68, 68, 0.3);
}

.notification-error .notification-icon {
	background: #ef4444;
	color: white;
}

.notification-info {
	border-color: rgba(99, 102, 241, 0.3);
}

.notification-info .notification-icon {
	background: #6366f1;
	color: white;
}

.notification-message {
	color: var(--foreground);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
}

/* Mobile responsive for notifications */
@media (max-width: 640px) {
	.notification-popup {
		right: 10px;
		left: 10px;
		min-width: auto;
		max-width: none;
	}
}

/* Profile image hover effect */
.profile-main-image {
	transition: transform 0.4s ease, filter 0.3s ease;
	cursor: pointer;
}

.profile-image-wrapper:hover .profile-main-image {
	transform: scale(1.05);
	filter: brightness(1.1);
}

/* ================================
   EVENTS PAGE STYLES
   ================================ */

/* Events Hero Section */
.events-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		hsl(240, 6%, 10%) 0%,
		hsl(262, 73%, 8%) 100%
	);
	padding-top: 4rem;
}

.events-hero-container {
	position: relative;
	z-index: 10;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
}

.events-hero-content {
	max-width: 800px;
	margin: 0 auto;
}

.events-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2rem;
}

.events-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
	filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
}

.events-title {
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.events-title {
		font-size: 4rem;
	}
}

.events-title-normal {
	color: var(--foreground);
	font-weight: 700;
}

.events-subtitle {
	font-size: 1.25rem;
	color: var(--muted-foreground);
	margin-bottom: 2rem;
	line-height: 1.6;
}

/* Location Stats */
.location-stats {
	margin: 3rem 0;
}

.location-stat-card {
	background: rgba(139, 92, 246, 0.1);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-radius: 16px;
	padding: 2rem;
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
}

.location-stat-card .stat-number {
	font-size: 3rem;
	font-weight: 900;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.location-stat-card .stat-label {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--foreground);
	margin-bottom: 0.5rem;
}

.stat-location {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	font-style: italic;
}

/* Premium Preview Section */
.premium-preview-section {
	padding: 5rem 0;
	background: var(--background);
}

.preview-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.preview-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.preview-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}

.preview-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 16px;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.preview-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.1)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.preview-card:hover::before {
	opacity: 1;
}

.preview-card:hover {
	transform: translateY(-8px);
	border-color: rgba(139, 92, 246, 0.3);
	box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
}

.preview-card > * {
	position: relative;
	z-index: 2;
}

.preview-icon {
	font-size: 3rem;
	margin-bottom: 1.5rem;
	filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.3));
}

.preview-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 1rem;
}

.preview-description {
	color: var(--muted-foreground);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.preview-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.preview-count {
	color: var(--primary);
	font-weight: 700;
	font-size: 1.125rem;
}

/* Missing Section */
.missing-section {
	padding: 5rem 0;
	background: linear-gradient(
		135deg,
		hsl(240, 6%, 8%) 0%,
		hsl(262, 73%, 6%) 100%
	);
}

.missing-content {
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
}

.missing-title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 3rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.missing-preview {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
}

.blurred-events {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	filter: blur(3px);
	pointer-events: none;
}

@media (min-width: 768px) {
	.blurred-events {
		grid-template-columns: repeat(1, 1fr);
	}
}

.event-preview-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1.5rem;
	text-align: left;
}

.event-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.event-preview-date {
	font-size: 0.875rem;
	color: var(--primary);
	font-weight: 600;
}

.event-preview-type {
	background: rgba(139, 92, 246, 0.2);
	color: var(--primary);
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.event-preview-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 0.5rem;
}

.event-preview-location {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-bottom: 0.5rem;
}

.event-preview-members {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

/* Unlock Overlay */
.unlock-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(139, 92, 246, 0.15);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-radius: 20px;
	padding: 3rem 2rem;
	text-align: center;
	max-width: 400px;
	width: 90%;
}

.unlock-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.unlock-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
}

.unlock-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 1rem;
}

.unlock-description {
	color: var(--muted-foreground);
	line-height: 1.6;
	margin-bottom: 2rem;
	text-align: center;
}

/* Events Features Section */
.events-features-section {
	padding: 5rem 0;
	background: var(--background);
}

.feature-card-large {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 16px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.3s ease;
	height: 100%;
}

.feature-card-large:hover {
	transform: translateY(-5px);
	border-color: rgba(139, 92, 246, 0.3);
	box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
}

.feature-icon-large {
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
	filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.3));
}

.feature-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 1rem;
}

.feature-description {
	color: var(--muted-foreground);
	line-height: 1.6;
}

/* CTA Section */
.events-cta-section {
	padding: 5rem 0;
	background: linear-gradient(
		135deg,
		hsl(262, 73%, 8%) 0%,
		hsl(240, 6%, 8%) 100%
	);
	text-align: center;
}

.cta-content {
	max-width: 600px;
	margin: 0 auto;
}

.cta-title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cta-subtitle {
	font-size: 1.25rem;
	color: var(--muted-foreground);
	margin-bottom: 2.5rem;
	line-height: 1.6;
}

.cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

@media (min-width: 640px) {
	.cta-buttons {
		flex-direction: row;
		justify-content: center;
	}
}

/* Floating Elements Specific to Events */
.floating-element {
	position: absolute;
	font-size: 2rem;
	opacity: 0.1;
	animation: float 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

.floating-element-small {
	font-size: 1.5rem;
	animation-duration: 6s;
}

.floating-element-medium {
	font-size: 2.5rem;
	animation-duration: 10s;
}

.floating-element-large {
	font-size: 3rem;
	animation-duration: 12s;
}

/* Button Ripple Effect */
.button-ripple {
	position: absolute;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	transform: scale(0);
	animation: ripple 0.6s ease-out;
	pointer-events: none;
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* Scroll Animations */
.preview-card,
.feature-card-large,
.event-preview-card,
.cta-content {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease;
}

.preview-card.animate-in,
.feature-card-large.animate-in,
.event-preview-card.animate-in,
.cta-content.animate-in {
	opacity: 1;
	transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.events-title {
		font-size: 2.5rem;
	}

	.events-subtitle {
		font-size: 1.125rem;
	}

	.location-stat-card {
		padding: 1.5rem;
	}

	.location-stat-card .stat-number {
		font-size: 2.5rem;
	}

	.preview-card,
	.feature-card-large {
		padding: 1.5rem;
	}

	.missing-title,
	.cta-title {
		font-size: 2rem;
	}

	.unlock-overlay {
		padding: 2rem 1.5rem;
	}

	.events-icon {
		font-size: 3rem;
	}

	.preview-icon,
	.feature-icon-large {
		font-size: 2.5rem;
	}
}

/* ================================
   GLORYHOLE LOCATIONS PAGE STYLES
   ================================ */

/* Gloryhole Hero Section */
.gloryhole-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		hsl(240, 6%, 8%) 0%,
		hsl(262, 73%, 6%) 100%
	);
	padding-top: 4rem;
}

.gloryhole-hero-container {
	position: relative;
	z-index: 10;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
}

.gloryhole-hero-content {
	max-width: 900px;
	margin: 0 auto;
}

.gloryhole-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2rem;
}

.gloryhole-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
	filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
	opacity: 0.8;
}

.gloryhole-title {
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.gloryhole-title {
		font-size: 4rem;
	}
}

.gloryhole-title-normal {
	color: var(--foreground);
	font-weight: 700;
}

.gloryhole-subtitle {
	font-size: 1.25rem;
	color: var(--muted-foreground);
	margin-bottom: 3rem;
	line-height: 1.6;
}

/* Secret Notice */
.secret-notice {
	background: rgba(139, 92, 246, 0.08);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-radius: 16px;
	padding: 2rem;
	margin-top: 3rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.secret-icon {
	font-size: 2rem;
	filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.3));
	flex-shrink: 0;
}

.secret-text {
	font-size: 0.95rem;
	color: var(--muted-foreground);
	line-height: 1.5;
	margin: 0;
	text-align: left;
	transition: opacity 0.3s ease;
}

.secret-text strong {
	color: var(--primary);
	font-weight: 700;
}

/* Categories Section */
.categories-section {
	padding: 5rem 0;
	background: var(--background);
}

.categories-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}

.category-card {
	background: rgba(139, 92, 246, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 20px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.category-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.1)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.category-card:hover::before {
	opacity: 1;
}

.category-card:hover {
	transform: translateY(-8px);
	border-color: rgba(139, 92, 246, 0.3);
	box-shadow: 0 25px 50px rgba(139, 92, 246, 0.25);
}

.category-card > * {
	position: relative;
	z-index: 2;
}

.category-icon {
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
	filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.3));
}

.category-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 1rem;
}

.category-description {
	color: var(--muted-foreground);
	line-height: 1.6;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.category-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-bottom: 1.5rem;
}

.category-count {
	color: var(--primary);
	font-weight: 700;
	font-size: 1.125rem;
}

.category-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.feature-tag {
	background: rgba(139, 92, 246, 0.2);
	color: var(--primary);
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Hidden Section */
.hidden-section {
	padding: 5rem 0;
	background: linear-gradient(
		135deg,
		hsl(240, 6%, 6%) 0%,
		hsl(262, 73%, 4%) 100%
	);
}

.hidden-content {
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
}

.hidden-title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 3rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hidden-preview {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.blurred-locations {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	filter: blur(3px);
	pointer-events: none;
}

@media (min-width: 768px) {
	.blurred-locations {
		grid-template-columns: repeat(1, 1fr);
	}
}

.location-preview-card {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 2rem;
	text-align: left;
	transition: filter 0.3s ease;
}

.location-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.location-preview-type {
	background: rgba(139, 92, 246, 0.3);
	color: var(--primary);
	padding: 0.375rem 1rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
}

.location-preview-status {
	background: rgba(16, 185, 129, 0.2);
	color: #10b981;
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	transition: opacity 0.3s ease;
}

.location-preview-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 0.75rem;
}

.location-preview-address {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.location-preview-address::before {
	content: "📍";
	font-size: 0.75rem;
}

.location-preview-details {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-bottom: 1rem;
	line-height: 1.4;
}

.location-preview-rating {
	font-size: 0.875rem;
	color: var(--foreground);
	font-weight: 500;
}

/* Gloryhole Features Section */
.gloryhole-features-section {
	padding: 5rem 0;
	background: var(--background);
}

/* Insider Section */
.insider-section {
	padding: 5rem 0;
	background: linear-gradient(
		135deg,
		hsl(262, 73%, 8%) 0%,
		hsl(240, 6%, 8%) 100%
	);
}

.insider-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.insider-content {
		grid-template-columns: 1fr 400px;
		gap: 4rem;
	}
}

.insider-text {
	text-align: left;
}

.insider-title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.insider-description {
	font-size: 1.125rem;
	color: var(--muted-foreground);
	line-height: 1.7;
	margin-bottom: 2.5rem;
}

.insider-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.insider-stat {
	text-align: center;
}

.insider-stat .stat-number {
	font-size: 2rem;
	font-weight: 900;
	background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
	display: block;
}

.insider-stat .stat-label {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

/* Network Visualization */
.insider-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.network-visual {
	position: relative;
	width: 300px;
	height: 300px;
	margin-bottom: 1rem;
}

.network-node {
	position: absolute;
	width: 20px;
	height: 20px;
	background: rgba(139, 92, 246, 0.3);
	border: 2px solid rgba(139, 92, 246, 0.5);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.network-node.active {
	background: var(--primary);
	border-color: var(--primary);
	box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.network-node:nth-child(1) {
	top: 50px;
	left: 140px;
}

.network-node:nth-child(2) {
	top: 120px;
	left: 80px;
}

.network-node:nth-child(3) {
	top: 120px;
	right: 80px;
}

.network-node:nth-child(4) {
	bottom: 100px;
	left: 100px;
}

.network-node:nth-child(5) {
	bottom: 100px;
	right: 100px;
}

.node-pulse {
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	opacity: 0;
	animation: node-pulse 2s infinite;
}

@keyframes node-pulse {
	0% {
		transform: scale(0.8);
		opacity: 1;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

.network-caption {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	font-style: italic;
}

/* CTA Section */
.gloryhole-cta-section {
	padding: 5rem 0;
	background: linear-gradient(
		135deg,
		hsl(240, 6%, 10%) 0%,
		hsl(262, 73%, 8%) 100%
	);
	text-align: center;
}

/* Secret Mode Enhancements */
.secret-mode .network-node.active {
	animation: secret-glow 1s infinite alternate;
}

.secret-mode .category-card {
	border-color: rgba(139, 92, 246, 0.3);
}

.secret-mode .gloryhole-icon {
	animation: secret-pulse 2s infinite;
}

@keyframes secret-glow {
	0% {
		box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
	}
	100% {
		box-shadow: 0 0 30px rgba(139, 92, 246, 0.8);
	}
}

@keyframes secret-pulse {
	0%,
	100% {
		transform: scale(1);
		filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
	}
	50% {
		transform: scale(1.05);
		filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.8));
	}
}

/* Scroll Animations for Gloryhole Page */
.category-card,
.location-preview-card,
.insider-content {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease;
}

.category-card.animate-in,
.location-preview-card.animate-in,
.insider-content.animate-in {
	opacity: 1;
	transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.gloryhole-title {
		font-size: 2.5rem;
	}

	.gloryhole-subtitle {
		font-size: 1.125rem;
	}

	.category-card {
		padding: 2rem;
	}

	.category-icon {
		font-size: 3rem;
	}

	.hidden-title,
	.insider-title {
		font-size: 2rem;
	}

	.secret-notice {
		flex-direction: column;
		text-align: center;
		padding: 1.5rem;
	}

	.secret-text {
		text-align: center;
	}

	.insider-stats {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.network-visual {
		width: 250px;
		height: 250px;
	}

	.location-preview-card {
		padding: 1.5rem;
	}

	.gloryhole-icon {
		font-size: 3rem;
	}
}

/* ================================
   TOY CONTROL PAGE STYLES
   ================================ */

/* Toy Control Hero Section */
.toy-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		hsl(240, 6%, 10%) 0%,
		hsl(262, 73%, 8%) 50%,
		hsl(280, 60%, 6%) 100%
	);
	padding-top: 4rem;
}

.toy-hero-container {
	position: relative;
	z-index: 10;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
}

.toy-hero-content {
	max-width: 800px;
	margin: 0 auto;
}

.toy-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2rem;
}

.toy-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
	filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
	animation: toyIconPulse 3s ease-in-out infinite;
}

@keyframes toyIconPulse {
	0%,
	100% {
		transform: scale(1);
		filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
	}
	50% {
		transform: scale(1.1);
		filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.5));
	}
}

.toy-title {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 900;
	line-height: 0.9;
	margin-bottom: 1rem;
}

.toy-title-normal {
	color: hsl(0, 0%, 95%);
	font-weight: 700;
}

.toy-subtitle {
	font-size: 1.25rem;
	color: hsl(0, 0%, 70%);
	max-width: 600px;
	margin: 0 auto 3rem;
	line-height: 1.6;
}

/* Live Stats */
.live-stats {
	margin-bottom: 2rem;
}

.live-stat-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-radius: 1rem;
	padding: 2rem;
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.live-stat-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(139, 92, 246, 0.8),
		transparent
	);
	animation: statScan 3s infinite;
}

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

.stat-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 1rem;
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: hsl(262, 73%, 70%);
	margin-bottom: 0.5rem;
}

.stat-label {
	font-size: 0.9rem;
	color: hsl(0, 0%, 60%);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stat-divider {
	width: 1px;
	height: 3rem;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(139, 92, 246, 0.5),
		transparent
	);
}

.stat-location {
	text-align: center;
	color: hsl(0, 0%, 50%);
	font-size: 0.9rem;
}

/* Toy Categories Section */
.toy-categories-section {
	padding: 6rem 0;
	background: hsl(240, 6%, 8%);
}

.toy-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.toy-category-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 1rem;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.toy-category-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.toy-category-card:hover {
	border-color: rgba(139, 92, 246, 0.3);
	transform: translateY(-5px);
}

.toy-category-card:hover::before {
	opacity: 1;
}

.toy-category-icon {
	font-size: 3rem;
	margin-bottom: 1.5rem;
	filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.3));
}

.toy-category-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: hsl(0, 0%, 95%);
	margin-bottom: 1rem;
}

.toy-category-description {
	color: hsl(0, 0%, 70%);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.toy-category-stats {
	margin-bottom: 1rem;
}

.toy-category-count {
	font-size: 1.5rem;
	font-weight: 700;
	color: hsl(262, 73%, 70%);
}

.toy-category-features {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.toy-feature-tag {
	background: rgba(139, 92, 246, 0.2);
	color: hsl(262, 73%, 80%);
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.8rem;
	font-weight: 500;
}

/* Live Requests Section */
.live-requests-section {
	padding: 6rem 0;
	background: hsl(240, 6%, 6%);
}

.live-requests-content {
	max-width: 1000px;
	margin: 0 auto;
}

.live-requests-title {
	font-size: 2.5rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 3rem;
	background: linear-gradient(
		135deg,
		hsl(262, 73%, 70%) 0%,
		hsl(280, 60%, 60%) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.requests-preview {
	position: relative;
}

.blurred-requests {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	filter: blur(3px);
	pointer-events: none;
}

.request-preview-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(139, 92, 246, 0.15);
	border-radius: 1rem;
	padding: 1.5rem;
	transition: all 0.3s ease;
}

.request-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.request-preview-status {
	font-weight: 600;
	font-size: 0.9rem;
}

.request-preview-time {
	color: hsl(0, 0%, 50%);
	font-size: 0.8rem;
}

.request-preview-user {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, hsl(262, 73%, 60%), hsl(280, 60%, 50%));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

.user-name {
	font-weight: 600;
	color: hsl(0, 0%, 90%);
}

.user-location {
	color: hsl(0, 0%, 60%);
	font-size: 0.8rem;
}

.request-preview-toy {
	margin-bottom: 1rem;
}

.toy-type {
	font-weight: 600;
	color: hsl(262, 73%, 70%);
	margin-bottom: 0.25rem;
}

.toy-model {
	color: hsl(0, 0%, 70%);
	font-size: 0.9rem;
}

.request-preview-message {
	background: rgba(139, 92, 246, 0.1);
	padding: 1rem;
	border-radius: 0.5rem;
	color: hsl(0, 0%, 85%);
	font-style: italic;
	margin-bottom: 1rem;
}

.request-preview-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.control-duration {
	color: hsl(262, 73%, 70%);
	font-weight: 600;
	font-size: 0.9rem;
}

.viewer-count {
	color: hsl(0, 0%, 60%);
	font-size: 0.8rem;
}

/* How It Works Section */
.how-it-works-section {
	padding: 6rem 0;
	background: hsl(240, 6%, 8%);
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.step-card {
	text-align: center;
	position: relative;
}

.step-number {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, hsl(262, 73%, 60%), hsl(280, 60%, 50%));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 auto 1rem;
	color: white;
}

.step-icon {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.step-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: hsl(0, 0%, 95%);
	margin-bottom: 1rem;
}

.step-description {
	color: hsl(0, 0%, 70%);
	line-height: 1.6;
}

/* Toy Features Section */
.toy-features-section {
	padding: 6rem 0;
	background: hsl(240, 6%, 6%);
}

/* Toy CTA Section */
.toy-cta-section {
	padding: 6rem 0;
	background: linear-gradient(
		135deg,
		hsl(262, 73%, 10%) 0%,
		hsl(280, 60%, 8%) 100%
	);
	text-align: center;
}

/* Pulse Effect */
.pulse-effect {
	animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
	0%,
	100% {
		box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
	}
	50% {
		box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.toy-categories-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.steps-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.stat-row {
		flex-direction: column;
		gap: 1rem;
	}

	.stat-divider {
		width: 3rem;
		height: 1px;
		background: linear-gradient(
			to right,
			transparent,
			rgba(139, 92, 246, 0.5),
			transparent
		);
	}

	.request-preview-actions {
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
	}
}

/* Profile Activity Popup Notifications */
.activity-popup {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 320px;
	background: linear-gradient(
		135deg,
		rgba(139, 92, 246, 0.1),
		rgba(168, 85, 247, 0.05)
	);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.1);
	transform: translateX(100%);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1000;
	cursor: pointer;
}

.activity-popup.show {
	transform: translateX(0);
	opacity: 1;
}

.activity-popup:hover {
	transform: translateX(0) translateY(-2px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 40px rgba(139, 92, 246, 0.15);
}

.popup-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.popup-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(139, 92, 246, 0.3);
}

.popup-user-info {
	flex: 1;
}

.popup-username {
	font-weight: 600;
	font-size: 14px;
	color: var(--foreground);
	margin: 0;
}

.popup-location {
	font-size: 12px;
	color: var(--muted-foreground);
	margin: 0;
}

.popup-close {
	background: none;
	border: none;
	color: var(--muted-foreground);
	cursor: pointer;
	font-size: 16px;
	padding: 4px;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.popup-close:hover {
	color: var(--foreground);
	background: rgba(139, 92, 246, 0.1);
}

.popup-activity {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(139, 92, 246, 0.05);
	border-radius: 8px;
	padding: 10px 12px;
	border: 1px solid rgba(139, 92, 246, 0.1);
}

.popup-activity-icon {
	font-size: 18px;
	animation: pulse-icon 2s infinite;
}

.popup-activity-text {
	font-size: 13px;
	color: var(--foreground);
	line-height: 1.4;
}

.popup-activity-highlight {
	color: var(--primary);
	font-weight: 600;
}

.popup-timestamp {
	font-size: 11px;
	color: var(--muted-foreground);
	text-align: right;
	margin-top: 8px;
}

@keyframes pulse-icon {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

/* Progress bar for auto-close */
.popup-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), rgba(168, 85, 247, 0.8));
	border-radius: 0 0 12px 12px;
	transform-origin: left;
	animation: popup-countdown 5s linear forwards;
}

@keyframes popup-countdown {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}

/* Mobile responsiveness */
@media (max-width: 640px) {
	.activity-popup {
		width: 280px;
		bottom: 15px;
		right: 15px;
		padding: 14px;
	}

	.popup-avatar {
		width: 36px;
		height: 36px;
	}

	.popup-username {
		font-size: 13px;
	}

	.popup-activity-text {
		font-size: 12px;
	}
}

/* Animation variants for different activity types */
.activity-popup.event-type {
	border-left: 4px solid #10b981;
}

.activity-popup.gloryhole-type {
	border-left: 4px solid #f59e0b;
}

.activity-popup.toy-type {
	border-left: 4px solid #ec4899;
}

.activity-popup.event-type .popup-activity-icon {
	color: #10b981;
}

.activity-popup.gloryhole-type .popup-activity-icon {
	color: #f59e0b;
}

.activity-popup.toy-type .popup-activity-icon {
	color: #ec4899;
}