/* ============================================================
   Noctis Demo Mode — styles
   Uses the theme's brand tokens (loaded on :root) with fallbacks.
   ============================================================ */

/* "Demo Connect" button (rendered into every wallet-connect mount) */
.nd-connect-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 18px; border: none; border-radius: var(--radius, 6px);
	background: var(--noctis-blue, #2D3FFF); color: #fff;
	font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 700;
	font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer;
	transition: filter 0.18s;
}
.nd-connect-btn::before { content: '◆'; font-size: 0.7em; opacity: 0.9; }
.nd-connect-btn:hover { filter: brightness(1.12); }
.nd-connect-btn:disabled { opacity: 0.7; cursor: default; }

/* Connected "Demo Wallet" chip */
.nd-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: var(--radius-full, 999px);
	background: rgba(var(--noctis-green-rgb, 95,181,27), 0.12);
	border: 1px solid rgba(var(--noctis-green-rgb, 95,181,27), 0.45);
	color: var(--noctis-green, #5fb51b);
	font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 700;
	font-size: 0.78rem; white-space: nowrap;
}
.nd-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--noctis-green, #5fb51b); box-shadow: 0 0 6px rgba(var(--noctis-green-rgb, 95,181,27), 0.7); }

/* Blocked-submit notice modal */
.nd-modal {
	position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
	padding: 24px; background: rgba(6,6,10,0.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.nd-modal-card {
	width: 100%; max-width: 400px; text-align: center; padding: 34px 30px 26px;
	background: var(--surface, #1c1c1c); border: 1px solid var(--border, #2e2e2e);
	border-radius: var(--radius-lg, 12px); box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.nd-modal-icon { font-size: 2rem; margin-bottom: 10px; }
.nd-modal-title {
	font-family: var(--font-head, 'Montserrat', sans-serif); font-size: 1.25rem; font-weight: 800;
	color: var(--white, #fff); margin: 0 0 10px;
}
.nd-modal-body { font-size: 0.92rem; color: var(--text-2, #c8c8c8); line-height: 1.6; margin: 0 0 22px; }
.nd-modal-btn {
	padding: 11px 26px; border: none; border-radius: var(--radius, 6px);
	background: var(--noctis-blue, #2D3FFF); color: #fff;
	font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 700; font-size: 0.9rem; cursor: pointer;
	transition: filter 0.18s;
}
.nd-modal-btn:hover { filter: brightness(1.12); }

/* First-visit splash */
body.nd-splash-open { overflow: hidden; }
.nd-splash {
	position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center;
	padding: 24px; background: rgba(6,6,10,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nd-splash[hidden] { display: none; }
.nd-splash-card {
	width: 100%; max-width: 440px; text-align: center; padding: 40px 32px 28px;
	background: var(--surface, #1c1c1c); border: 1px solid var(--border, #2e2e2e);
	border-radius: var(--radius-lg, 12px); box-shadow: 0 24px 80px rgba(0,0,0,0.55);
	background-image: linear-gradient(180deg, rgba(var(--noctis-blue-rgb, 45,63,255),0.06), transparent 55%);
}
.nd-splash-logo { width: 132px; height: auto; margin: 0 auto 22px; display: block; object-fit: fill; }
.nd-splash-eyebrow {
	display: inline-block; padding: 4px 12px; margin-bottom: 14px; border-radius: var(--radius-full, 999px);
	background: rgba(var(--noctis-blue-rgb, 45,63,255), 0.1); border: 1px solid rgba(var(--noctis-blue-rgb, 45,63,255), 0.45);
	color: var(--noctis-blue, #2D3FFF); font-family: var(--font-head, 'Montserrat', sans-serif);
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.nd-splash-title {
	font-family: var(--font-head, 'Montserrat', sans-serif); font-size: 1.4rem; font-weight: 800;
	color: var(--white, #fff); line-height: 1.2; margin: 0 0 14px;
}
.nd-splash-body { font-size: 0.95rem; color: var(--text-2, #c8c8c8); line-height: 1.65; margin: 0 0 24px; }
.nd-splash-body strong { color: var(--noctis-blue, #2D3FFF); }
.nd-splash-btn {
	display: inline-block; width: 100%; padding: 14px 24px; border: none; border-radius: var(--radius, 6px);
	background: var(--noctis-blue, #2D3FFF); color: #fff; font-family: var(--font-head, 'Montserrat', sans-serif);
	font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: filter 0.18s;
}
.nd-splash-btn:hover { filter: brightness(1.12); }
.nd-splash-foot { margin: 18px 0 0; font-size: 0.82rem; color: var(--text-3, #999); }
.nd-splash-foot a { color: var(--noctis-blue, #2D3FFF); text-decoration: none; font-weight: 600; }
.nd-splash-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
	.nd-splash-card { padding: 32px 22px 22px; }
	.nd-splash-logo { width: 108px; }
	.nd-splash-title { font-size: 1.2rem; }
}