/* Define color variables */
:root {
	--bg: #131313; /* Off-black */
	--color1: #f54b73; /* Pink */
	--foreground: #131313; /* Dark greyish */
	--text-color: #e0e0e0; /* Light grey for text */
	--accent: #d14d7b; /* Pink */
	--error: #ff4444; /* Red for errors */
	--success: #44ff44; /* Green for success */
	--grey-border: #222222;
}

/* Basic Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/* super cool modern font here */
	font-family: "Poppins", "Roboto", sans-serif;
	background-color: var(--bg);
	color: var(--text-color);
	display: grid;
	grid-template-areas:
		"header header"
		"nav main";
	grid-template-columns: 250px 1fr; /* Increased width for nav */
	grid-template-rows: 60px 1fr; /* Height for header, rest for content */
	min-height: 100vh;
	background-image: url("https://05f5772df6a6b9847df8c77cc97a2c19.cdn.bubble.io/f1724545077454x336295181208753800/wavey-fingerprint.svg");
	/* background opacity */
	background-position: center;
}



.row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
}

.header {
	grid-area: header;
	background-color: var(--foreground);
	padding: 10px 20px;
	border-bottom: 1px solid var(--color1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header h1 {
	color: var(--color1);
}

.header a {
	text-decoration: none;
	color: var(--color1);
}

.user-area {
	display: flex;
	align-items: center;
}

.login-btn {
	background-color: var(--color1);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.login-btn:hover {
	background-color: #ff45a3;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 15px;
}

#username {
	font-weight: bold;
}

#tokens {
	background-color: rgba(255, 105, 180, 0.2);
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.9em;
}

/* Center the main content area */
#main {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px; /* Add some padding around the centered element */
	grid-area: main;
	overflow-y: auto; /* Allow scrolling if content exceeds height */
}

/* Styles for the Buy Tokens Section */
#buyTokensDollars {
	max-width: 550px; /* Increased max width */
	margin: 0; /* Remove auto margin, flexbox handles centering */
	padding: 30px; /* Increased padding */
	background-color: #1a1a1a;
	border-radius: 12px; /* Slightly larger border radius */
	color: #fff;
	font-family: sans-serif;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Added shadow */
}



#buyTokensDollars h2 {
	text-align: center;
	font-size: 1.8rem; 
	margin-bottom: 12px; 
}



#buyTokensDollars p.description {
	text-align: center;
	color: #bbb; 
	margin-bottom: 30px; 
}


.page h2 {
	color: var(--color1);
}


.subscription-options {
	display: flex; /* Use flexbox for layout */
	flex-direction: column;
	gap: 20px; /* Space between options */
	margin-bottom: 30px; 
}



.subscription-option {
	background-color: #2a2a2a;
	border: 1px solid #444;
	border-radius: 10px; /* Slightly larger radius */
	padding: 20px; /* Increased padding */
	position: relative;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Added transitions */
	cursor: pointer; /* Indicate interactivity */
}

.subscription-option:hover {
	transform: translateY(-3px); /* Lift effect on hover */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

.subscription-option.recommended {
	border-color: var(--color1); /* Use the pink color */
	border-width: 2px; /* Make recommended border thicker */
	box-shadow: 0 0 15px rgba(245, 75, 115, 0.3); /* Add a subtle glow */
}

.subscription-option .option-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px; /* Increased margin */
}

.subscription-option .option-title {
	font-weight: 600; /* Slightly bolder */
	font-size: 1.2rem; /* Slightly larger */
}

.subscription-option .discount-badge {
	background-color: var(--color1);
	color: #fff;
	padding: 4px 10px; /* Adjusted padding */
	border-radius: 12px; /* Pill shape */
	font-size: 0.8rem;
	font-weight: bold;
}

.subscription-option .price-details {
	display: flex;
	align-items: baseline;
	margin-bottom: 8px; /* Increased margin */
}

.subscription-option .price-amount {
	font-size: 2rem; /* Larger price */
	font-weight: bold;
	color: var(--color1);
	margin-right: 5px;
}

.subscription-option .price-currency {
	font-size: 1.1rem; /* Larger currency */
	color: var(--color1);
	margin-right: 8px; /* Increased spacing */
}

.subscription-option .price-period {
	font-size: 1rem; /* Slightly larger */
	color: #aaa;
}

.subscription-option .original-price {
	font-size: 0.85rem; /* Slightly larger */
	color: #999; /* Slightly lighter */
	text-decoration: line-through;
	margin: 0;
}

.payment-info {
	margin-bottom: 30px; /* Increased margin */
	padding-left: 5px; /* Align with options */
}

.payment-info-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px; /* Increased spacing */
}

.payment-info-item:last-child {
    margin-bottom: 0;
}

.payment-info-item i {
	color: #4caf50;
	font-size: 1.2rem;
	margin-right: 8px;
}

.payment-info-item span {
	font-size: 0.9rem;
	color: #ccc;
}

.payment-buttons {
	/* Container for payment buttons */
}

.pay-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: none;
	border-radius: 10px; /* Consistent radius */
	padding: 16px; /* Increased padding */
	font-size: 1.2rem; /* Larger font */
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; /* Added transitions */
}

.pay-button:active {
	transform: scale(0.98); /* Add press effect */
}

.pay-button.primary {
	background-color: var(--color1);
	color: #fff;
	margin-bottom: 15px; /* Keep margin for potential future buttons */
}

.pay-button.primary:hover {
	background-color: #e04369; /* Slightly darker pink on hover */
}

.pay-button.secondary {
	background-color: #3a3a3a;
	color: #fff;
}

.pay-button img.pix-logo {
	height: 20px;
	margin-left: 10px;
}

.pay-button img.card-logo {
	margin-left: 5px;
}

.pay-button img.visa-logo {
	height: 15px;
	margin-left: 10px;
	background-color: white;
	padding: 2px 4px;
	border-radius: 3px;
}

.pay-button img.mastercard-logo {
	height: 18px;
}

/* --- RESPONSIVE STYLES for Mobile --- */
@media (max-width: 600px) {
	/* Adjust main layout */
	body {
		grid-template-areas:
			"header"
			"main"; /* Stack header and main, remove nav area assumption */
		grid-template-columns: 1fr; /* Single column */
		grid-template-rows: auto 1fr; /* Header auto height, main takes rest */
	}

	/* Adjust main content centering for potentially taller content */
	#main {
		padding: 15px; /* Reduce padding */
		align-items: flex-start; /* Align items to top */
	}

	/* Make subscription box full width with some margin */
	#buyTokensDollars {
		max-width: 95%; /* Allow it to take most screen width */
		width: 95%;
		padding: 20px; /* Reduce padding */
		margin: 20px auto; /* Add some vertical margin */
	}

	#buyTokensDollars h2 {
		font-size: 1.5rem; /* Reduce font size */
	}

	#buyTokensDollars p.description {
		font-size: 0.9rem; /* Adjust font size */
	}

	.subscription-option {
		padding: 15px; /* Reduce padding */
	}

	.subscription-option .option-title {
		font-size: 1.1rem; /* Adjust font size */
	}

	.subscription-option .price-amount {
		font-size: 1.8rem; /* Adjust font size */
	}

	.subscription-option .price-currency,
	.subscription-option .price-period {
		font-size: 0.9rem; /* Adjust font size */
	}

	.payment-info-item span {
		font-size: 0.85rem; /* Adjust font size */
	}

	.pay-button {
		padding: 14px; /* Adjust padding */
		font-size: 1.1rem; /* Adjust font size */
	}
}

/* Premium Benefits Section */
.premium-benefits-section {
	margin-top: 2rem;
	padding: 1.5rem;
	background-color: #1e1e1e; /* Slightly lighter dark background */
	border-radius: 8px;
}

.benefits-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #e0e0e0; /* Lighter text color */
	margin-bottom: 1rem;
}

.benefits-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.benefits-list li {
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	color: #c0c0c0; /* Slightly muted text color */
}

.benefits-list li i {
	color: #ffcc00; /* Gold color for the checkmark */
	font-size: 1.2rem;
	margin-right: 0.75rem;
}

/* Add more styles as needed */

.settings-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 25px;
	border-bottom: 1px solid var(--grey-border);
}