/* =========================================================================
 *  OV Bot — shared site chrome (header, corner controls, footer)
 *  Loaded on EVERY page so the header/nav is identical site-wide.
 *  Self-contained (defines its own tokens) so it works without store.css.
 * ========================================================================= */

:root {
	--ovc-teal: #03dac6;
	--ovc-purple: #bb86fc;
	--ovc-text: rgba(236, 242, 248, 0.92);
	--ovc-border-soft: rgba(255, 255, 255, 0.12);
	--ovc-discord: #5865f2;
}

/* Flex header so the corner controls stay aligned at every width */
.header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px;
	gap: 0.7em;
}
.header-left, .header-right {
	float: none !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 0.7em;
}

/* Uniform circular glass buttons (home / Discord / dashboard) */
.header .icon,
.header .dropdown {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(10, 12, 18, 0.5);
	border: 1px solid var(--ovc-border-soft);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	color: var(--ovc-teal);
	font-size: 1.15em;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.header .icon:hover,
.header .dropdown:hover {
	transform: translateY(-2px);
	color: #fff;
	border-color: var(--ovc-teal);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(3, 218, 198, 0.28);
}
.header .icon > i, .header .dropdown > i { pointer-events: none; }
.header .icon > .label, .header .dropdown > .label { display: none !important; }
/* The Discord logo is a wide glyph; shrink it so it sits inside the circle. */
.header .icon .fa-discord { font-size: 0.72em; }

/* Auth chip + pill buttons (Store / Login / Logout) */
.sp-user {
	display: flex; align-items: center; gap: 0.55em;
	padding: 0.3em 0.75em 0.3em 0.35em; border-radius: 999px;
	background: rgba(0, 0, 0, 0.25); border: 1px solid var(--ovc-border-soft);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 12em;
}
.sp-user-avatar { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; background: rgba(3, 218, 198, 0.15); border: 1px solid rgba(3, 218, 198, 0.35); }
.sp-user-avatar.hide { display: none; }
.sp-user-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--ovc-teal); font-size: 0.85em; }
.sp-user-name { font-weight: 500; font-size: 0.85em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-auth-btn {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.5em 1em; border-radius: 999px; font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em;
	border: 1px solid var(--ovc-border-soft) !important; color: var(--ovc-text) !important; background: rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid var(--ovc-border-soft) !important; text-decoration: none; cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sp-auth-btn:hover { border-color: var(--ovc-purple) !important; color: #fff !important; background: rgba(187, 134, 252, 0.15); }
.sp-auth-btn i { font-size: 1.05em; }

/* Store button — the primary conversion CTA, teal accent */
.sp-store-btn { border-color: rgba(3, 218, 198, 0.55) !important; color: #04201d !important; background: linear-gradient(135deg, var(--ovc-teal), #7ef4e6) !important; font-weight: 700; }
.sp-store-btn:hover { color: #04201d !important; background: linear-gradient(135deg, #16e6d2, #9bf7ec) !important; box-shadow: 0 0 18px rgba(3, 218, 198, 0.4); }

/* Login uses Discord blurple */
.sp-auth-btn.sp-auth-login { border-color: rgba(88, 101, 242, 0.6) !important; color: #fff !important; background: rgba(88, 101, 242, 0.22); }
.sp-auth-btn.sp-auth-login:hover { background: rgba(88, 101, 242, 0.4); box-shadow: 0 0 18px rgba(88, 101, 242, 0.35); }

/* Go-to-top button */
.top {
	width: 56px !important; height: 56px !important;
	display: flex !important; align-items: center; justify-content: center;
	border-radius: 50% !important;
	background: rgba(3, 218, 198, 0.12) !important;
	border: 1px solid rgba(3, 218, 198, 0.4);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.top:hover { background: rgba(3, 218, 198, 0.26) !important; box-shadow: 0 8px 26px rgba(3, 218, 198, 0.3); transform: translateY(-3px); }
.top .image.fit { width: 24px !important; height: auto !important; margin: 0 !important; }

/* Music card — cleaner glass trapezoid */
.player { border-bottom-color: rgba(22, 20, 38, 0.82) !important; }
#track-name { color: var(--ovc-teal) !important; }

/* Footer — full-bleed so it always covers the bottom edge-to-edge */
#footer.wrapper.alt {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.4), #0c0c0e);
	border-top: 1px solid var(--ovc-border-soft);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
#footer .menu li a { transition: color 0.18s ease; }
#footer .menu li a:hover { color: var(--ovc-teal); }

/* Mobile header — uniform compact circles, tight gaps */
@media screen and (max-width: 900px) {
	.sp-user-name { display: none; }
	.sp-auth-label { display: none; }
	.sp-auth-btn { padding: 0.5em 0.7em; }
	.sp-user { padding: 0.25em; max-width: none; }
}
@media screen and (max-width: 720px) {
	.header { padding: 12px 14px; }
	.header .icon, .header .dropdown { width: 42px; height: 42px; font-size: 1.05em; }
	.header-right { gap: 0.4em; }
	.sp-user { padding: 0.2em; border-radius: 50%; }
	.sp-auth-btn { width: 42px; height: 42px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
	.sp-store-btn { width: auto !important; border-radius: 999px !important; padding: 0.5em 0.8em !important; }
}

/* =========================================================================
 *  Homepage helpers (harmless elsewhere)
 * ========================================================================= */

/* Filled teal primary CTA (hero) */
.button.sp-cta {
	background-color: var(--ovc-teal) !important;
	border-color: var(--ovc-teal) !important;
	color: #04201d !important;
}
.button.sp-cta:hover { background-color: #16e6d2 !important; box-shadow: 0 0 24px rgba(3, 218, 198, 0.4); }
.button.sp-cta:after { background: #04201d !important; }

/* Subscription "/mo" suffix on the donation teaser price */
.price-tag .per { font-size: 0.5em; color: rgba(236, 242, 248, 0.5); margin-left: 0.15em; letter-spacing: 0.02em; }

/* On-theme spotlight icon tiles (replace the clip-art) */
.spotlights > section > .image.spotlight-icon {
	display: flex !important; align-items: center; justify-content: center;
	width: 13em; height: 13em; margin: 5em; align-self: center;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(3, 218, 198, 0.09), rgba(0, 0, 0, 0.28));
	border: 1px solid rgba(3, 218, 198, 0.28);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), inset 0 0 46px rgba(3, 218, 198, 0.06);
}
.spotlight-icon i { font-size: 5em; color: var(--ovc-teal); }
.spotlights > section > .image.spotlight-icon:before { display: none !important; }

/* =========================================================================
 *  Load-in buffer spinner — rides on the white #transition overlay and fades
 *  out in lockstep with it. main.js removes .white ~1s after window load and
 *  #transition carries a 0.5s transition, so the ring's opacity fades over the
 *  same 0.5s as the white background. Pure CSS pseudo-element, no page markup.
 * ========================================================================= */
#transition::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border: 4px solid rgba(3, 218, 198, 0.22);
	border-top-color: var(--ovc-teal);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.5s ease;
	animation: ov-load-spin 0.72s linear infinite;
	animation-play-state: paused;
}
#transition.white::after {
	opacity: 1;
	animation-play-state: running;
}
@keyframes ov-load-spin { to { transform: rotate(360deg); } }