/* Madden School Login Modal - field-lines dark theme */

:root {
	--ms-bg:        #0e0e0e;
	--ms-surface:   #171717;
	--ms-border:    #2c2c2c;
	--ms-text:      #e8e8e8;
	--ms-muted:     #888;
	--ms-accent:    #3d7bff;
	--ms-accent-hi: #2f6ae8;
	--ms-gold:      #f5b51e;
	--ms-gold-hi:   #ffc63f;
	--ms-line:      #1c1c1c;
}

/* Desktop header pills. Scoped above Kadence's mobile breakpoint so they
   never paint backgrounds onto the mobile hamburger/off-canvas area. */
@media (min-width: 769px) {
	.mslogin-trigger,
	a.mslogin-trigger {
		display: inline-flex !important;
		align-items: center;
		background: var(--ms-accent) !important;
		color: #fff !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 8px !important;
		padding: 9px 20px !important;
		font-family: "Oswald", sans-serif !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		line-height: 1 !important;
		cursor: pointer;
		transition: background 0.12s;
	}
	.mslogin-trigger:hover,
	a.mslogin-trigger:hover {
		background: var(--ms-accent-hi) !important;
		color: #fff !important;
	}

	.mslogin-cta-unlimited,
	a.mslogin-cta-unlimited {
		display: inline-flex !important;
		align-items: center;
		background: var(--ms-gold) !important;
		background-image: none !important;
		color: #1a1a1a !important;
		border: none !important;
		box-shadow: none !important;
		text-shadow: none !important;
		border-radius: 8px !important;
		padding: 9px 20px !important;
		font-family: "Oswald", sans-serif !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		line-height: 1 !important;
		cursor: pointer;
		transition: background 0.12s;
	}
	.mslogin-cta-unlimited:hover,
	a.mslogin-cta-unlimited:hover {
		background: var(--ms-gold-hi) !important;
		color: #1a1a1a !important;
	}

	/* Spacing between the pills and the nav. The gap between two menu items is
	   controlled by the <li>, not the <a> inside it, so margins go here.
	   Multiple selector forms cover however Kadence places the item class. */
	li.mslogin-menu-item,
	li.menu-item.mslogin-menu-item,
	.header-navigation li.mslogin-menu-item,
	nav li.mslogin-menu-item {
		margin-left: 16px !important;
	}
	li.mslogin-unlimited-item,
	li.menu-item.mslogin-unlimited-item,
	.header-navigation li.mslogin-unlimited-item,
	nav li.mslogin-unlimited-item {
		margin-left: 12px !important;
	}
}

/* Mobile drawer: render the same colored pills as full-width rows.
   The desktop pill rules live in the min-width:769px block, so below 769px
   these classes only exist inside the off-canvas drawer — styling them
   directly here is safe and doesn't depend on Kadence's wrapper class name.
   The hamburger trigger is a separate element and never carries these classes. */
@media (max-width: 768px) {
	a.mslogin-trigger,
	a.mslogin-cta-unlimited {
		display: block !important;
		width: auto !important;
		margin: 6px 16px !important;
		padding: 10px 18px !important;
		border-radius: 8px !important;
		font-family: "Oswald", sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		text-align: center !important;
		text-decoration: none !important;
		border: none !important;
		box-shadow: none !important;
	}
	a.mslogin-trigger {
		background: var(--ms-accent) !important;
		color: #fff !important;
	}
	a.mslogin-cta-unlimited {
		background: var(--ms-gold) !important;
		background-image: none !important;
		color: #1a1a1a !important;
		text-shadow: none !important;
	}
}

.mslogin-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
}
.mslogin-overlay.is-open { display: flex; }

.mslogin-modal {
	position: relative;
	width: 320px;
	max-width: 100%;
	background: var(--ms-bg);
	border: 0.5px solid #242424;
	border-radius: 14px;
	overflow: hidden;
	color: var(--ms-text);
	font-family: inherit;
	box-sizing: border-box;
}

/* Yard-line banner header */
.mslogin-head {
	height: 70px;
	background: #111;
	border-bottom: 2px solid var(--ms-accent);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 31px,
		var(--ms-line) 31px,
		var(--ms-line) 32px
	);
}
.mslogin-head span {
	position: relative;
	font-family: "Oswald", sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mslogin-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.35) !important;
	border: 0.5px solid #333 !important;
	box-shadow: none !important;
	color: #bbb !important;
	font-size: 0;
	line-height: 1;
	width: 28px;
	height: 28px;
	min-width: 0;
	padding: 0 !important;
	border-radius: 6px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.mslogin-close:hover {
	color: #fff !important;
	background: rgba(0, 0, 0, 0.6) !important;
	border-color: #555 !important;
}
.mslogin-close svg { display: block; }

.mslogin-body { padding: 22px 22px 24px; }

.mslogin-error {
	display: none;
	background: #2a1414;
	border: 0.5px solid #5a2020;
	color: #f0999a;
	font-size: 13px;
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 14px;
}
.mslogin-error.is-visible { display: block; }

.mslogin-form label {
	display: block;
	font-size: 11px;
	color: var(--ms-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 5px;
}
.mslogin-form input[type="text"],
.mslogin-form input[type="password"] {
	width: 100%;
	background: var(--ms-surface) !important;
	border: 0.5px solid var(--ms-border) !important;
	border-radius: 8px !important;
	padding: 9px 12px !important;
	font-size: 14px;
	color: var(--ms-text) !important;
	-webkit-text-fill-color: var(--ms-text) !important;
	margin-bottom: 14px;
	box-sizing: border-box;
	font-family: inherit;
	box-shadow: none !important;
}
.mslogin-form input::placeholder { color: var(--ms-muted) !important; opacity: 1; }
.mslogin-form input:focus {
	outline: none;
	border-color: var(--ms-accent) !important;
	background: var(--ms-surface) !important;
	color: var(--ms-text) !important;
}
.mslogin-form input:-webkit-autofill,
.mslogin-form input:-webkit-autofill:hover,
.mslogin-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ms-text) !important;
	caret-color: var(--ms-text);
	transition: background-color 9999s ease-out 0s;
	box-shadow: 0 0 0 1000px var(--ms-surface) inset !important;
}

.mslogin-pass-wrap { position: relative; }
.mslogin-pass-toggle {
	position: absolute;
	right: 8px;
	top: 7px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #666 !important;
	cursor: pointer;
	width: 28px;
	height: 28px;
	min-width: 0;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mslogin-pass-toggle:hover { color: #aaa !important; }
.mslogin-pass-toggle svg { display: block; }

.mslogin-remember {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ms-muted);
	margin-bottom: 18px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}
.mslogin-remember input { margin: 0; }

.mslogin-submit {
	width: 100%;
	background: var(--ms-accent) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 8px !important;
	padding: 11px !important;
	font-family: "Oswald", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background 0.12s;
}
.mslogin-submit:hover { background: var(--ms-accent-hi) !important; color: #fff !important; }
.mslogin-submit:disabled { opacity: 0.6; cursor: default; }
.mslogin-submit span { margin-left: 4px; }

.mslogin-lost {
	display: block;
	text-align: center;
	font-size: 12px;
	color: #777;
	margin-top: 14px;
	text-decoration: none;
}
.mslogin-lost:hover { color: #aaa; }

/* Checkout login bar - prominent "Already a member?" prompt */
.mslogin-checkout-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #0d1424;
	border: 0.5px solid #244273;
	border-radius: 10px;
	padding: 11px 14px;
	margin: 0 0 18px;
	max-width: 640px;
}
.mslogin-checkout-bar__text {
	font-size: 14px;
	color: #cdddf2;
}
a.mslogin-checkout-bar__btn,
.mslogin-checkout-bar__btn {
	display: inline-flex !important;
	align-items: center;
	background: #3d7bff !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 7px !important;
	padding: 7px 16px !important;
	font-family: "Oswald", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.12s;
}
a.mslogin-checkout-bar__btn:hover,
.mslogin-checkout-bar__btn:hover {
	background: #2f6ae8 !important;
	color: #fff !important;
}