/* --- Base Setup & Variables --- */
:root {
	/* Colors from theme.json */
	--primary-neon: #ff33cc;
	--secondary-cyan: #33ffff;
	--violet: #a333ff;
	--ink: #000000;
	--panel-bg: rgba(0, 0, 0, 0.7);
	--text: #e0ffff;
	--muted-text: #9966ff;
	--top-bg: #0d0a1e;
	--bottom-bg: #000000;
	--success: #00ff9d;
	--error: #ff3333;

	/* Effects from theme.json */
	--glow-main: 0 0 10px #ff33cc, 0 0 20px #33ffff;
	--glow-pink: 0 0 15px #ff33cc, 0 0 5px rgba(255, 51, 204, 0.5);
	--glow-cyan: 0 0 15px #33ffff, 0 0 5px rgba(51, 255, 255, 0.5);
	--panel-radius: 16px;
	--button-radius: 28px;
	--backdrop-blur: 12px;
}

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

/* --- Galaxy Background --- */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	/* Deep space gradient */
	background-image: linear-gradient(
		to bottom,
		var(--top-bg) 0%,
		var(--bottom-bg) 100%
	);
	background-color: var(--ink); /* Fallback */
	color: var(--text);
	min-height: 100vh;
	padding: 1.5rem;
	transition: background-color 0.3s;
	position: relative;
}

/* Background assets positioning fix */
#background-assets {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	opacity: 0.15;
	pointer-events: none;
	z-index: 0;
}

/* Ensure content is above background */
header,
main {
	position: relative;
	z-index: 1;
}

/* --- Typography and Neon Glow --- */
.main-title,
.subtitle {
	color: var(--secondary-cyan);
	/* Intense multi-layer glow */
	text-shadow: 0 0 5px var(--secondary-cyan), 0 0 10px var(--secondary-cyan),
		0 0 20px var(--secondary-cyan), 0 0 40px var(--primary-neon);
}
.main-title {
	font-size: clamp(2.5rem, 8vw, 4rem);
	letter-spacing: 0.15em;
	margin-bottom: 0.25rem;
}
.subtitle {
	font-size: clamp(0.75rem, 2vw, 1rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary-neon);
	text-shadow: 0 0 3px var(--primary-neon), 0 0 8px var(--primary-neon);
}

/* --- User Status Bar --- */
.user-status-bar {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--violet);
	border-radius: 12px;
	padding: 0.75rem 1.5rem;
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	backdrop-filter: blur(8px);
	box-shadow: 0 0 10px var(--violet);
}

.user-info {
	display: flex;
	gap: 2rem;
	align-items: center;
}

.account-status {
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: bold;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid transparent;
}

.status-free {
	background: rgba(255, 51, 204, 0.1);
	color: var(--primary-neon);
	border-color: var(--primary-neon);
	box-shadow: 0 0 5px var(--primary-neon);
}

.status-premium {
	background: rgba(51, 255, 255, 0.1);
	color: var(--secondary-cyan);
	border-color: var(--secondary-cyan);
	box-shadow: 0 0 5px var(--secondary-cyan);
	text-shadow: 0 0 5px var(--secondary-cyan);
}

.account-status:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 10px var(--primary-neon);
}

.token-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	background: rgba(163, 51, 255, 0.1);
	border: 1px solid var(--violet);
	cursor: pointer;
	transition: all 0.3s ease;
}

.token-info:hover {
	background: rgba(163, 51, 255, 0.2);
	border-color: var(--primary-neon);
	box-shadow: 0 0 8px var(--primary-neon);
}

.token-label {
	color: var(--muted-text);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.token-count {
	color: var(--primary-neon);
	font-weight: bold;
	font-size: 1.1rem;
	text-shadow: 0 0 5px var(--primary-neon);
}

header {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
}

.premium-promotion {
	margin-top: 1.5rem;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.premium-link, .tokens-link {
	color: var(--secondary-cyan);
	text-decoration: none;
	cursor: pointer;
	font-size: 0.9rem;
	line-height: 1.4;
	margin: 0.5rem 0;
	transition: all 0.3s ease;
	padding: 0.5rem;
	border-radius: 6px;
}

.premium-link:hover, .tokens-link:hover {
	background: rgba(51, 255, 255, 0.1);
	color: var(--text);
	text-shadow: 0 0 8px var(--secondary-cyan);
	transform: translateY(-1px);
}

.premium-link strong, .tokens-link strong {
	color: var(--primary-neon);
	text-shadow: 0 0 5px var(--primary-neon);
}

main {
	max-width: 800px;
	margin: 0 auto;
}

.view {
	display: none;
}
.view.active {
	display: block;
}

/* Hidden utility class */
.hidden {
	display: none !important;
}

/* --- Panel & Form Elements --- */
.panel {
	background: var(--panel-bg);
	/* New high-contrast glowing border */
	border: 2px solid var(--violet);
	box-shadow: 0 0 15px var(--violet) inset, 0 0 10px var(--secondary-cyan);
	border-radius: var(--panel-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	backdrop-filter: blur(var(--backdrop-blur));
}

.panel-title,
.results-title {
	font-size: 1.25rem;
	color: var(--secondary-cyan);
	margin-bottom: 1rem;
	text-shadow: 0 0 5px var(--secondary-cyan);
	border-bottom: 1px dashed var(--muted-text);
	padding-bottom: 0.5rem;
}

.form-field {
	margin-bottom: 1rem;
}

label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--text);
	font-size: 0.9rem;
	text-shadow: 0 0 2px var(--text);
}

input[type="text"],
textarea,
select {
	width: 100%;
	padding: 0.75rem;
	background: var(--ink);
	border: 1px solid var(--violet);
	color: var(--text);
	border-radius: 4px;
	transition: all 0.3s;
	/* Subtle inner glow */
	box-shadow: inset 0 0 5px var(--violet);
	-webkit-appearance: none;
}
input[type="text"]:focus,
textarea:focus,
select:focus {
	border-color: var(--primary-neon);
	outline: none;
	box-shadow: 0 0 8px var(--primary-neon), inset 0 0 5px var(--primary-neon);
}
select {
	appearance: none;
}
textarea {
	resize: vertical;
	min-height: 80px;
}
.radio-group,
.checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.radio-group label,
.checkbox-group label {
	display: flex;
	align-items: center;
	margin-bottom: 0;
	cursor: pointer;
	text-shadow: 0 0 2px var(--muted-text);
}
input[type="radio"],
input[type="checkbox"] {
	margin-right: 0.5rem;
	accent-color: var(--primary-neon);
}

/* --- Buttons --- */
.actions-row {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}
.btn {
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--button-radius);
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Primary Pink Glow Button */
.btn-primary_pink {
	background: var(--primary-neon);
	color: var(--ink);
	border: 2px solid var(--primary-neon);
	box-shadow: 0 0 5px var(--primary-neon), 0 0 20px var(--primary-neon);
}
.btn-primary_pink:hover {
	background: #ff66e5;
	box-shadow: 0 0 10px #ff66e5, 0 0 30px #ff66e5;
}

/* Outline Cyan Glow Button */
.btn-outline_cyan {
	background: transparent;
	color: var(--secondary-cyan);
	border: 2px solid var(--secondary-cyan);
	box-shadow: 0 0 5px var(--secondary-cyan), 0 0 15px var(--secondary-cyan);
}
.btn-outline_cyan:hover {
	background: rgba(51, 255, 255, 0.1);
	box-shadow: 0 0 10px #33ffff, 0 0 30px #33ffff;
}

/* Outline Pink Glow Button (Back to Generator) */
.btn-outline_pink {
	background: transparent;
	color: var(--primary-neon);
	border: 2px solid var(--primary-neon);
	box-shadow: 0 0 5px var(--primary-neon), 0 0 15px var(--primary-neon);
}
.btn-outline_pink:hover {
	background: rgba(255, 51, 204, 0.1);
	box-shadow: 0 0 10px #ff33cc, 0 0 30px #ff33cc;
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

/* --- Loading Overlay --- */
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	text-align: center;
	/* Applying the glow to the loading text */
	text-shadow: var(--glow-main);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
#loading-overlay.hidden {
	opacity: 0;
	pointer-events: none;
}
#loading-overlay:not(.hidden) {
	opacity: 1;
	pointer-events: auto;
}
.spinner {
	width: 60px;
	height: 60px;
	border: 5px solid var(--violet);
	border-top-color: var(--secondary-cyan); /* Spinner is now cyan */
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 1rem;
	/* Glow around the spinner */
	box-shadow: 0 0 15px var(--secondary-cyan), 0 0 5px var(--primary-neon);
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Enhanced loading animations */
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}
.spinner {
	animation: spin 1s linear infinite, pulse 2s ease-in-out infinite;
}

/* --- Results View --- */
.results-box {
	margin-bottom: 1.5rem;
}
.results-title {
	/* Inherits styling from panel-title */
	margin-bottom: 0.75rem;
}
.results-content {
	background: rgba(0, 0, 0, 0.4);
	/* Glowing border for content box */
	border: 1px solid var(--secondary-cyan);
	box-shadow: 0 0 10px var(--secondary-cyan);
	border-radius: 8px;
	padding: 1rem;
	min-height: 150px;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.results-content p {
	line-height: 1.6;
	/* Subtle text glow for readability */
	text-shadow: 0 0 1px var(--text);
}

/* Dynamic Forms */
.dynamic-form-purpose {
	font-style: italic;
	color: var(--muted-text);
	text-shadow: 0 0 2px var(--muted-text);
	margin-bottom: 1rem;
	padding: 0.5rem;
	border-left: 3px solid var(--primary-neon);
}

/* Dynamic form wrapper */
.dynamic-form-wrapper {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--violet);
	border-radius: 8px;
	padding: 1rem;
}


/* Copy button container */
#copy_button_container {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
}

/* Pagination */
.pagination-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
	color: var(--muted-text);
	text-shadow: 0 0 3px var(--muted-text);
}

/* --- Age Gate & Interstitial Overlays --- */
.age-gate-overlay,
.interstitial-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(10px);
	cursor: pointer; /* Make entire overlay clickable */
}

.age-gate-overlay .age-gate-panel,
.interstitial-overlay .interstitial-panel {
	cursor: default; /* Reset cursor for content area */
}

.age-gate-panel,
.interstitial-panel {
	background: var(--panel-bg);
	border: 2px solid var(--violet);
	box-shadow: 0 0 15px var(--violet) inset, 0 0 10px var(--secondary-cyan);
	border-radius: var(--panel-radius);
	padding: 2rem;
	max-width: 500px;
	width: 90%;
	text-align: center;
	cursor: default; /* Prevent cursor inheritance */
}

.age-gate-panel h2,
.interstitial-panel h2 {
	color: var(--secondary-cyan);
	text-shadow: 0 0 5px var(--secondary-cyan);
	margin-bottom: 1rem;
}

.age-gate-panel p,
.interstitial-panel p {
	color: var(--text);
	margin-bottom: 1rem;
	line-height: 1.6;
}

.age-gate-buttons,
.interstitial-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

/* Enhanced feedback for modals */
.interstitial-overlay:hover {
	background: rgba(0, 0, 0, 0.95);
}

.age-gate-overlay:hover {
	background: rgba(0, 0, 0, 0.95);
}

/* --- Token Shop --- */
.token-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	margin: 2rem 0;
}

.token-package {
	background: var(--panel-bg);
	border: 2px solid var(--violet);
	border-radius: var(--panel-radius);
	padding: 1.5rem;
	text-align: center;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}

.token-package::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--primary-neon), transparent);
	transition: left 0.5s;
}

.token-package:hover {
	border-color: var(--primary-neon);
	box-shadow: 0 0 15px var(--primary-neon);
	transform: translateY(-2px);
}

.token-package:hover::before {
	left: 100%;
}

.token-package h3 {
	color: var(--secondary-cyan);
	margin-bottom: 1rem;
	text-shadow: 0 0 5px var(--secondary-cyan);
	font-size: 1.3rem;
}

.package-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.token-count {
	color: var(--text);
	font-weight: bold;
	font-size: 1.1rem;
}

.package-price {
	color: var(--primary-neon);
	font-weight: bold;
	font-size: 1.4rem;
	text-shadow: 0 0 5px var(--primary-neon);
}

.package-desc {
	color: var(--muted-text);
	font-size: 0.9rem;
	margin-bottom: 1rem;
	line-height: 1.4;
}

.package-btn {
	transition: all 0.3s ease;
}

.package-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 15px var(--primary-neon);
}

/* --- Premium Page --- */
.premium-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.premium-plan {
	background: var(--panel-bg);
	border: 2px solid var(--violet);
	border-radius: var(--panel-radius);
	padding: 2rem;
	text-align: center;
	position: relative;
	transition: all 0.3s;
	overflow: hidden;
}

.premium-plan::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--secondary-cyan), transparent);
	transition: left 0.5s;
}

.premium-plan:hover {
	border-color: var(--primary-neon);
	box-shadow: 0 0 20px var(--primary-neon);
	transform: translateY(-5px);
}

.premium-plan:hover::before {
	left: 100%;
}

.premium-plan.popular {
	border-color: var(--primary-neon);
	box-shadow: 0 0 15px var(--primary-neon);
	animation: popularPulse 2s infinite;
}

@keyframes popularPulse {
	0%, 100% { box-shadow: 0 0 15px var(--primary-neon); }
	50% { box-shadow: 0 0 25px var(--primary-neon); }
}


.premium-plan h3 {
	color: var(--secondary-cyan);
	font-size: 1.5rem;
	margin-bottom: 1rem;
	text-shadow: 0 0 5px var(--secondary-cyan);
}

.plan-price {
	margin-bottom: 1rem;
}

.plan-price .price {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--primary-neon);
	text-shadow: 0 0 8px var(--primary-neon);
}

.plan-price .period {
	color: var(--muted-text);
	font-size: 1rem;
}

.plan-description {
	color: var(--text);
	margin-bottom: 1.5rem;
	font-style: italic;
}

.plan-features {
	list-style: none;
	padding: 0;
	margin-bottom: 2rem;
}

.plan-features li {
	color: var(--text);
	margin-bottom: 0.5rem;
	padding-left: 1.5rem;
	position: relative;
	text-align: left;
	transition: all 0.3s;
}

.plan-features li:hover {
	color: var(--secondary-cyan);
	transform: translateX(5px);
}

.plan-features li:before {
	content: "✨";
	position: absolute;
	left: 0;
	color: var(--primary-neon);
	animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.2); }
}

.plan-btn {
	transition: all 0.3s ease;
}

.plan-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 15px var(--primary-neon);
}

/* --- Footer --- */
footer {
	position: relative;
	z-index: 1;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--muted-text);
	text-align: center;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.footer-links a {
	color: var(--muted-text);
	text-decoration: none;
	font-size: 0.85rem;
	transition: color 0.3s;
}

.footer-links a:hover {
	color: var(--secondary-cyan);
	text-shadow: 0 0 5px var(--secondary-cyan);
}

.footer-disclaimer {
	font-size: 0.75rem;
	color: var(--muted-text);
	line-height: 1.4;
	max-width: 600px;
	margin: 0 auto;
}

/* --- Ad Banner --- */
.ad-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.9);
	border-top: 2px solid var(--violet);
	padding: 1rem 2rem;
	text-align: center;
	z-index: 1000;
	backdrop-filter: blur(10px);
	box-shadow: 0 0 15px var(--violet);
	animation: adFloat 3s ease-in-out infinite;
}

@keyframes adFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

.ad-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.ad-text {
	color: var(--secondary-cyan);
	font-weight: bold;
	text-shadow: 0 0 5px var(--secondary-cyan);
	font-size: 0.9rem;
	animation: adTextPulse 2s ease-in-out infinite;
}

@keyframes adTextPulse {
	0%, 100% { text-shadow: 0 0 5px var(--secondary-cyan); }
	50% { text-shadow: 0 0 15px var(--secondary-cyan), 0 0 25px var(--secondary-cyan); }
}

.ad-button {
	background: var(--primary-neon);
	color: var(--ink);
	border: 2px solid var(--primary-neon);
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 0 5px var(--primary-neon), 0 0 15px var(--primary-neon);
	animation: buttonGlow 1.5s ease-in-out infinite;
}

@keyframes buttonGlow {
	0%, 100% { box-shadow: 0 0 5px var(--primary-neon), 0 0 15px var(--primary-neon); }
	50% { box-shadow: 0 0 10px var(--primary-neon), 0 0 25px var(--primary-neon); }
}

.ad-button:hover {
	background: #ff66e5;
	box-shadow: 0 0 10px #ff66e5, 0 0 30px #ff66e5;
	transform: scale(1.05);
}

/* Enhanced user feedback toast notifications */
.feedback-toast {
	animation: slideIn 0.3s ease-out;
}

.feedback-toast.info {
	border-left: 4px solid var(--secondary-cyan);
}

.feedback-toast.success {
	border-left: 4px solid var(--success);
}

.feedback-toast.error {
	border-left: 4px solid var(--error);
}

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

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

/* Ensure main content doesn't get covered by ad banner */
body {
	padding-bottom: 80px; /* Space for ad banner */
}

/* Adjust footer position when ad banner is present */
footer {
	margin-bottom: 80px; /* Space for ad banner */
}

/* Media Query for smaller screens */
@media (max-width: 600px) {
	body {
		padding: 1rem;
	}

	.actions-row {
		flex-direction: column;
	}
	.btn {
		width: 100%;
		margin: 0;
	}

	.main-title {
		font-size: 2rem;
	}

	.subtitle {
		font-size: 0.7rem;
	}

	.age-gate-buttons,
	.interstitial-buttons {
		flex-direction: column;
	}

	.footer-links {
		flex-direction: column;
		gap: 1rem;
	}
}

/* --- New Galaxy Neon Assets Styling --- */

/* Starfield Element: Used for a subtle, repeating background pattern */
#starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.1; /* Very subtle background */
}

/* Ensure the SVG fills the container and repeats */
#starfield svg {
    /* Set SVG size small to allow it to be treated like a repeating pattern */
    width: 250px; 
    height: 250px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(51, 255, 255, 0.05),
        rgba(51, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 50px
    );
    background-size: 250px 250px;
    opacity: 0.5; /* The repeating background effect */
}


/* Cosmic Sigil Element: Used for the central, subtly rotating graphic */
#cosmic-sigil {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Center the element */
    transform: translate(-50%, -50%); 
    width: 70vh; /* Large size relative to viewport height */
    height: 70vh;
    max-width: 700px;
    max-height: 700px;
    opacity: 0.35; /* Subtle glow element */
    pointer-events: none;
    z-index: 1; 
    
    /* Optional: Add a slow rotation effect */
    animation: slow-rotate 40s linear infinite;
}

/* Define the rotation animation */
@keyframes slow-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Make sure the SVG inside the sigil container fills it */
#cosmic-sigil svg {
    width: 100%;
    height: 100%;
}

/* --- Premium Spread Styling --- */

/* Style for premium spread options in select dropdown */
select option.premium-spread-option {
    color: var(--muted-text);
    background-color: rgba(163, 51, 255, 0.1);
    font-style: italic;
}

/* Style for disabled premium spread options */
select option.premium-spread-option[disabled] {
    color: #666666;
    background-color: rgba(163, 51, 255, 0.05);
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Hover effect for premium spread options (when enabled) */
select option.premium-spread-option:not([disabled]):hover {
    background-color: rgba(163, 51, 255, 0.2);
    color: var(--primary-neon);
    font-weight: bold;
}

/* Premium spread label styling in the select dropdown */
select option.premium-spread-option::after {
    content: " (Premium)";
    font-size: 0.8em;
    color: var(--primary-neon);
    font-weight: bold;
    margin-left: 0.5em;
}

/* Enhanced select dropdown styling for better visibility */
select {
    /* Existing styles preserved */
    background: var(--ink);
    border: 1px solid var(--violet);
    color: var(--text);
    border-radius: 4px;
    transition: all 0.3s;
    box-shadow: inset 0 0 5px var(--violet);
    -webkit-appearance: none;
    /* Enhanced styling */
    padding-right: 2rem; /* Space for dropdown arrow */
    background-image: linear-gradient(45deg, transparent 50%, var(--violet) 50%), linear-gradient(135deg, var(--violet) 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

select:focus {
    /* Existing styles preserved */
    border-color: var(--primary-neon);
    outline: none;
    box-shadow: 0 0 8px var(--primary-neon), inset 0 0 5px var(--primary-neon);
    /* Enhanced styling */
    background-image: linear-gradient(45deg, transparent 50%, var(--primary-neon) 50%), linear-gradient(135deg, var(--primary-neon) 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
}

/* --- Premium Spread Options --- */
.premium-spread-option {
	color: var(--muted-text);
	font-style: italic;
	opacity: 0.7;
}

.premium-spread-option:disabled {
	color: var(--muted-text);
	opacity: 0.5;
	cursor: not-allowed;
}

/* Enhanced premium spread styling */
option.premium-spread-option {
	color: var(--muted-text);
	font-style: italic;
	opacity: 0.7;
}

option.premium-spread-option:disabled {
	color: var(--muted-text);
	opacity: 0.5;
	cursor: not-allowed;
	background-color: rgba(0, 0, 0, 0.2);
}

/* Separator between free and premium spreads */
option[value=""] {
	color: var(--secondary-cyan);
	font-weight: bold;
	opacity: 1;
	pointer-events: none;
}

/* --- Cookie Consent Banner --- */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(13, 10, 30, 0.95);
	border-top: 2px solid var(--primary-neon);
	padding: 1.5rem;
	z-index: 2000;
	backdrop-filter: blur(10px);
	box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
	animation: slideUp 0.5s ease-out;
	display: flex;
	justify-content: center;
}

.cookie-content {
	max-width: 600px;
	text-align: center;
}

.cookie-content h3 {
	color: var(--primary-neon);
	margin-bottom: 0.5rem;
	text-shadow: 0 0 5px var(--primary-neon);
}

.cookie-content p {
	color: var(--text);
	margin-bottom: 1rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.cookie-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.8rem;
}

.cookie-link {
	color: var(--secondary-cyan);
	font-size: 0.8rem;
	text-decoration: underline;
	transition: color 0.3s;
}

.cookie-link:hover {
	color: var(--primary-neon);
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}