@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root {
	--guest-bg-dark: #07111f;
	--guest-bg-medium: #0f1b2d;
	--guest-surface: rgba(15, 27, 45, 0.88);
	--guest-surface-soft: rgba(255, 255, 255, 0.04);
	--guest-border: rgba(145, 182, 220, 0.18);
	--guest-text-primary: #ecf4ff;
	--guest-text-secondary: #9cb2ca;
	--guest-accent-blue: #6cb4ff;
	--guest-accent-blue-soft: #5e9de0;
	--guest-accent-green: #41d87d;
	--guest-accent-gold: #ffd166;
	--guest-danger-bg: rgba(255, 107, 107, 0.16);
	--guest-danger-text: #ff8d8d;
	--guest-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.35);
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Inter', sans-serif !important;
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(circle at top left, rgba(65, 216, 125, 0.14), transparent 28%),
		radial-gradient(circle at top right, rgba(108, 180, 255, 0.18), transparent 30%),
		linear-gradient(180deg, #06101c 0%, #081424 38%, #0b1727 100%) !important;
	color: var(--guest-text-primary) !important;
}

header,
footer {
	background: rgba(15, 27, 45, 0.92) !important;
	color: var(--guest-text-primary) !important;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
	border-color: var(--guest-border) !important;
	backdrop-filter: blur(14px);
}

header {
	position: relative;
	padding: 18px 0 14px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

footer {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto 28px;
	padding: 26px 28px !important;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--guest-shadow-lg) !important;
}

header a,
footer a,
a {
	color: var(--guest-accent-blue-soft);
}

header a:hover,
footer a:hover,
#userInfo a:hover,
#nav a:hover,
.link:hover {
	color: var(--guest-accent-blue) !important;
	text-decoration: underline;
}

.logo-container {
	display: inline-flex !important;
	align-items: center;
	gap: 10px !important;
	color: var(--guest-text-primary) !important;
	text-decoration: none;
}

.logo-container img {
	width: 50px !important;
	height: auto;
}

header h1,
.logo-container h1 {
	margin: 0;
	font-size: 1.9rem;
	font-weight: 900;
	color: var(--guest-text-primary);
}

.slogan-container {
	margin-top: 4px;
}

.slogan {
	margin: 0;
	color: var(--guest-text-secondary) !important;
	font-weight: 700 !important;
	font-size: 0.98rem;
}

#nav {
	margin-top: 12px;
}

nav ul,
footer ul {
	list-style: none;
	padding: 0;
}

nav ul {
	margin: 12px 0 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

nav li {
	display: block !important;
}

nav ul li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
	color: var(--guest-accent-blue) !important;
	text-decoration: none;
	font-size: 0.95rem !important;
	white-space: nowrap;
}

nav ul li a:hover {
	text-decoration: none !important;
	border-color: rgba(108, 180, 255, 0.35);
	background: rgba(108, 180, 255, 0.12);
}

.button,
.btn-submit,
button[type="submit"] {
	padding: 12px 18px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: linear-gradient(135deg, var(--guest-accent-green) 0%, #78f5a8 100%) !important;
	color: #06111e !important;
	font-weight: 800 !important;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(65, 216, 125, 0.22);
}

.button:hover,
.btn-submit:hover,
button[type="submit"]:hover {
	background: linear-gradient(135deg, #35c46d 0%, #69e696 100%) !important;
}

#userInfo {
	position: fixed;
	top: 14px;
	left: 14px;
	background: rgba(15, 27, 45, 0.96) !important;
	border: 1px solid var(--guest-border) !important;
	border-radius: 16px !important;
	padding: 10px 14px !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
	z-index: 20;
}

#accountIdentifier,
#userInfo a,
#balanceAmount {
	color: var(--guest-text-primary) !important;
}

.wallet-pill.cash {
	background: rgba(108, 180, 255, 0.15) !important;
	color: var(--guest-accent-blue) !important;
	border-color: rgba(108, 180, 255, 0.3) !important;
}

.wallet-pill.promo {
	background: rgba(255, 209, 102, 0.15) !important;
	color: var(--guest-accent-gold) !important;
	border-color: rgba(255, 209, 102, 0.35) !important;
}

.container,
main {
	width: min(980px, calc(100% - 32px));
	margin: 24px auto 56px !important;
}

.container,
main section {
	background: var(--guest-surface) !important;
	border: 1px solid var(--guest-border);
	border-radius: 24px !important;
	box-shadow: var(--guest-shadow-lg) !important;
	backdrop-filter: blur(14px);
}

.container {
	padding: 32px !important;
}

main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 0 !important;
}

main section {
	padding: 28px !important;
}

h2 {
	margin: 0 0 16px;
	text-align: left !important;
	color: var(--guest-text-primary) !important;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
}

h3 {
	color: var(--guest-accent-blue) !important;
	margin-top: 26px;
}

p,
li,
main p,
section p,
.notice {
	color: var(--guest-text-secondary) !important;
	line-height: 1.7;
}

strong {
	color: var(--guest-text-primary) !important;
}

ul {
	padding-left: 20px;
}

li {
	margin-bottom: 10px;
}

.selected {
	color: var(--guest-accent-green) !important;
	font-weight: 800 !important;
	text-decoration: underline !important;
}

.fetchFailure,
.notice,
#result.failure {
	background-color: var(--guest-danger-bg) !important;
	color: var(--guest-danger-text) !important;
	border: 1px solid rgba(255, 107, 107, 0.4) !important;
	border-radius: 14px !important;
	padding: 14px !important;
}

#result.success {
	background: rgba(65, 216, 125, 0.14);
	color: var(--guest-accent-green);
	border: 1px solid var(--guest-accent-green);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: 14px 15px !important;
	border: 1px solid var(--guest-border) !important;
	border-radius: 14px !important;
	background: rgba(6, 17, 30, 0.92) !important;
	color: var(--guest-text-primary) !important;
}

label {
	color: var(--guest-text-secondary) !important;
	font-weight: 700 !important;
}

.faq-item {
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.faq-item h3 {
	margin: 0;
	color: var(--guest-text-primary) !important;
	cursor: pointer;
}

.faq-item p {
	margin: 10px 0 0;
	color: var(--guest-text-secondary) !important;
}

section {
	border-left: none !important;
}

section li {
	gap: 12px;
}

section li span.label {
	color: var(--guest-text-primary) !important;
	font-weight: 700;
}

section li span.value,
section li span.value a,
main a,
.link {
	color: var(--guest-accent-blue) !important;
}

footer ul {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 0;
	margin: 0 0 15px 0 !important;
}

footer ul li {
	padding: 0 12px;
	border-right: 1px solid var(--guest-border);
}

footer ul li:last-child {
	border-right: none;
}

footer p,
.footer-bottom {
	margin: 15px 0 0 !important;
	color: var(--guest-text-secondary) !important;
	font-size: 0.9rem !important;
}

.hidden {
	display: none !important;
}

@media (max-width: 768px) {
	footer,
	.container,
	main {
		width: min(100% - 20px, 980px);
	}

	.container,
	main section,
	footer {
		padding: 22px !important;
		border-radius: 20px !important;
	}

	nav ul {
		gap: 8px;
	}

	nav ul li a {
		width: 100%;
	}

	#userInfo {
		position: static;
		width: min(100% - 20px, 980px);
		margin: 16px auto 0;
	}

	section li {
		flex-direction: column;
		align-items: flex-start !important;
	}
}