/**
 * Front-end SSO + layout (enqueue globally so Elementor does not strip shortcode <style>).
 */

/* Login button stack ([ig_sso_buttons] and adjacent [ig_sso_button] links) */
.ig-sso-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px !important;
	margin: 20px 0;
}

.ig-sso-button-link {
	display: block;
	text-decoration: none;
}

.ig-sso-button-link + .ig-sso-button-link {
	margin-top: 12px;
}

.ig-sso-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: opacity 0.2s;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
}

.ig-sso-button:hover {
	opacity: 0.9;
}

.ig-sso-button.ig-sso-discord {
	background-color: #5865f2;
	color: #ffffff;
}

.ig-sso-button.ig-sso-patreon {
	background-color: #ff424d;
	color: #ffffff;
}

.ig-sso-provider-status {
	padding: 12px 24px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.ig-sso-provider-linked {
	background-color: #f0f0f1;
	border: 1px solid #c3c4c7;
	color: #50575e;
}

.ig-sso-status-text {
	display: inline-flex;
	align-items: center;
	font-weight: 500;
}

/* Primary CTA — same look as Verify Steam (popup / downloads modal) */
a.ig-downloads-portal-btn {
	display: inline-block;
	padding: 12px 24px;
	background: #ff00ed;
	color: #ffffff !important;
	text-decoration: none !important;
	border-radius: 4px;
	font-weight: bold;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.3;
	transition: opacity 0.3s;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
}

a.ig-downloads-portal-btn:hover,
a.ig-downloads-portal-btn:focus {
	opacity: 0.85;
	color: #ffffff !important;
}

/* XStore: thin light strip under admin bar / empty top header (staging fix) */
html,
body {
	margin: 0 !important;
	padding: 0 !important;
	background-color: #0a0a0a !important;
}

.header-top {
	display: none !important;
}

.sticky-on .header-top,
.mobile-header-wrapper .header-top,
.mobile-header-wrapper .header-bottom {
	background-color: #191919 !important;
	background: #191919 !important;
}
