/* =====================================================================
   MemberPress account area (/account/) — dark design-system restyle.
   Consumes the --lp-* tokens from tokens.css; everything is scoped under
   body.nxtbets-account (added via body_class), so no other page and no
   MemberPress admin surface is touched. CSS-only: templates stay
   MemberPress's own, so plugin updates don't fight us.
   ===================================================================== */

body.nxtbets-account {
	background: var(--lp-page-bg);
}
body.nxtbets-account .nm-page-full {
	background: var(--lp-page-bg);
}

/* ---------- Shell: nav + content ---------- */
body.nxtbets-account .mepr-account-container {
	display: flex;
	flex-direction: column; /* nav row on top, content below */
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px 72px;
	gap: 0;
	font-family: var(--lp-font);
	color: var(--lp-ink);
}

/* MemberPress styles the nav with ID selectors (#mepr-account-nav …) and a
   solid blue background — every override below is ID-anchored to outrank
   them. */
body.nxtbets-account #mepr-account-nav {
	background: transparent;
	display: flex;
}
body.nxtbets-account #mepr-account-nav ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
/* Desktop: a horizontal tab row. */
@media (min-width: 900px) {
	body.nxtbets-account #mepr-account-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	body.nxtbets-account #mepr-account-nav .mepr-nav-item.mepr-logout {
		margin-left: auto;
	}
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item a {
	display: block;
	padding: 10px 18px;
	background: var(--lp-surface);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-pill);
	color: var(--lp-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		border-color 120ms ease,
		color 120ms ease;
}
/* Drop MP's icomoon tab icons — our custom tabs have none, so mixed
   icon/no-icon tabs read worse than none. */
body.nxtbets-account #mepr-account-nav .mepr-nav-item a::before {
	display: none;
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item a:hover {
	border-color: var(--lp-accent);
	color: var(--lp-accent);
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a {
	background: var(--lp-accent);
	border-color: var(--lp-accent);
	color: var(--lp-accent-ink);
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item.mepr-logout a {
	color: var(--lp-ink-muted);
	background: transparent;
	border-color: transparent;
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item.mepr-logout a:hover {
	color: var(--lp-pro);
}

body.nxtbets-account #mepr-account-content {
	background: var(--lp-surface);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-lg);
	box-shadow: var(--lp-shadow-soft);
	padding: 28px 32px 36px;
}

body.nxtbets-account .mepr_page_header {
	font-family: var(--lp-font);
	font-size: 26px;
	font-weight: 700;
	color: var(--lp-ink);
	margin: 0 0 18px;
}

/* ---------- Welcome message ---------- */
/* MP paints the welcome variant its own light green — double the class to
   outrank it. */
body.nxtbets-account .mepr-account-message,
body.nxtbets-account .mepr-account-message.mepr-account-welcome-message,
body.nxtbets-account .mepr-account-message.mepr-account-user-message {
	background: var(--lp-surface-2);
	background-color: var(--lp-surface-2);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	padding: 16px 20px;
	color: var(--lp-ink-soft);
	margin-bottom: 24px;
	width: auto;
}
body.nxtbets-account .mepr-account-message h4 {
	color: var(--lp-ink);
	margin-top: 0;
}

/* ---------- Profile details (dt/dd + edit buttons) ---------- */
/* ID-anchored: MP's #mepr-profile-details rules outrank plain classes. */
body.nxtbets-account #mepr-profile-details dt {
	color: var(--lp-ink-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
body.nxtbets-account #mepr-profile-details dd,
body.nxtbets-account .mepr-profile-details__content {
	color: var(--lp-ink);
	font-size: 1rem;
	margin: 0 0 14px;
}
body.nxtbets-account .mepr-profile-details__button {
	color: var(--lp-link);
}
body.nxtbets-account .mepr-profile-details__icon path {
	fill: var(--lp-ink-muted);
}
body.nxtbets-account .mepr-profile-details__button:hover .mepr-profile-details__icon path {
	fill: var(--lp-accent);
}

/* ---------- Forms ---------- */
body.nxtbets-account .mp-form-label label {
	color: var(--lp-ink-soft);
	font-weight: 600;
}
body.nxtbets-account .mepr-form input[type="text"],
body.nxtbets-account .mepr-form input[type="email"],
body.nxtbets-account .mepr-form input[type="tel"],
body.nxtbets-account .mepr-form input[type="password"],
body.nxtbets-account .mepr-form input[type="url"],
body.nxtbets-account .mepr-form select,
body.nxtbets-account .mepr-form textarea {
	background: var(--lp-surface-2);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-sm);
	color: var(--lp-ink);
	padding: 10px 12px;
}
body.nxtbets-account .mepr-form input:focus,
body.nxtbets-account .mepr-form select:focus,
body.nxtbets-account .mepr-form textarea:focus {
	border-color: var(--lp-accent);
	outline: none;
}
body.nxtbets-account .mepr-form input[type="checkbox"] {
	accent-color: var(--lp-accent);
}

body.nxtbets-account .mepr-button,
body.nxtbets-account button.mepr-button {
	background: var(--lp-btn-bg);
	border: 1px solid var(--lp-btn-border);
	border-radius: var(--lp-r-sm);
	color: var(--lp-btn-text);
	font-family: var(--lp-font);
	font-weight: 600;
	padding: 10px 24px;
	cursor: pointer;
	transition: background 120ms ease;
}
body.nxtbets-account .mepr-button:hover {
	background: var(--lp-btn-bg-hover);
}
body.nxtbets-account .btn-outline,
body.nxtbets-account .btn-link {
	background: transparent;
	color: var(--lp-link);
}

/* ---------- Modals (profile field edit) ---------- */
body.nxtbets-account .mepr_modal__content_wrapper,
body.nxtbets-account .mepr_modal__content {
	background: var(--lp-surface);
	color: var(--lp-ink);
	border-radius: var(--lp-r-md);
}

/* ---------- Custom-field checkbox lists → grid ---------- */
body.nxtbets-account .mepr-checkboxes-field.mepr-form-input {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px 16px;
}
@media (max-width: 900px) {
	body.nxtbets-account .mepr-checkboxes-field.mepr-form-input {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	body.nxtbets-account .mepr-checkboxes-field.mepr-form-input {
		grid-template-columns: 1fr;
	}
}
body.nxtbets-account .mepr-checkboxes-field-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--lp-ink-soft);
}

/* ---------- Payments / subscriptions tables ---------- */
body.nxtbets-account #mepr-account-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
body.nxtbets-account #mepr-account-content table th {
	color: var(--lp-ink-muted);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--lp-rule);
}
body.nxtbets-account #mepr-account-content table td {
	color: var(--lp-ink);
	padding: 10px 12px;
	border-bottom: 1px solid var(--lp-rule);
}
body.nxtbets-account #mepr-account-content table tr:hover td {
	background: var(--lp-surface-2);
}

/* =====================================================================
   Legacy Customizer overrides.
   The Customizer's "Additional CSS" (wp-custom-css) carries an older
   hand-styling of this page — white #mepr-profile-details card, #fff5f0
   welcome box, orange-gradient active tab, centered white-text nav,
   100vh content stretch — all with !important, and it prints after
   plugin styles. These counters need !important + higher specificity to
   win. Delete that block's account rules from the Customizer and this
   whole section can go.
   ===================================================================== */

body.nxtbets-account #mepr-profile-details {
	background: var(--lp-surface-2) !important;
	box-shadow: none !important;
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	padding: 20px 24px;
}
body.nxtbets-account .mepr-account-message.mepr-account-welcome-message {
	background: var(--lp-surface-2) !important;
	border-color: var(--lp-border-soft) !important;
	color: var(--lp-ink-soft);
}
body.nxtbets-account .mepr-account-message.mepr-account-welcome-message h4,
body.nxtbets-account .mepr-account-message.mepr-account-welcome-message h4 strong {
	color: #fff;
}
/* Links in the welcome copy carry inline color spans (#ff631a) — force the
   PRO-badge orange over them. */
body.nxtbets-account .mepr-account-message a,
body.nxtbets-account .mepr-account-message a span {
	color: var(--lp-pro) !important;
}
body.nxtbets-account .mepr-account-container .mepr-button.btn-outline {
	background: transparent !important;
	color: var(--lp-link) !important;
	border-color: var(--lp-border) !important;
}
body.nxtbets-account .mepr-account-table thead th {
	background-color: var(--lp-surface-2) !important;
}
body.nxtbets-account #mepr-account-nav {
	background: transparent !important;
	display: flex !important;
	justify-content: flex-start;
	gap: 0;
	padding: 0;
	margin: 0 0 20px;
	border-radius: 0;
}
body.nxtbets-account #mepr-account-nav > ul {
	width: 100%;
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item a {
	color: var(--lp-ink) !important;
	padding: 10px 18px !important;
	border-radius: var(--lp-r-pill) !important;
	letter-spacing: normal;
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item a:hover {
	color: var(--lp-accent) !important;
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item.--active a,
body.nxtbets-account #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a {
	background: var(--lp-accent) !important;
	color: var(--lp-accent-ink) !important;
}
body.nxtbets-account #mepr-account-nav .mepr-nav-item.mepr-logout a {
	color: var(--lp-ink-muted) !important;
	background: transparent !important;
}
body.nxtbets-account #mepr-account-content,
body.nxtbets-account #mepr-account-content > .mp_wrapper {
	min-height: 0;
}
@media (max-width: 600px) {
	body.nxtbets-account #mepr-account-nav {
		margin: 0 0 20px;
	}
}

/* ---------- My Sports tab ---------- */
body.nxtbets-account .nxtbets-sports__saved {
	background: rgba(13, 181, 255, 0.12);
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-r-md);
	color: var(--lp-ink);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-weight: 600;
}
body.nxtbets-account .nxtbets-sports__intro {
	color: var(--lp-ink-soft);
	max-width: 640px;
	margin: 0 0 20px;
}
body.nxtbets-account .nxtbets-sports__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}
@media (max-width: 1000px) {
	body.nxtbets-account .nxtbets-sports__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	body.nxtbets-account .nxtbets-sports__grid {
		grid-template-columns: 1fr;
	}
}
body.nxtbets-account .nxtbets-sports__pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--lp-surface-2);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	cursor: pointer;
	transition:
		border-color 120ms ease,
		background 120ms ease;
}
body.nxtbets-account .nxtbets-sports__pill:hover {
	border-color: var(--lp-accent);
}
body.nxtbets-account .nxtbets-sports__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
body.nxtbets-account .nxtbets-sports__logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex: none;
}
body.nxtbets-account .nxtbets-sports__name {
	color: var(--lp-ink);
	font-size: 0.9rem;
	font-weight: 600;
	flex: 1;
}
body.nxtbets-account .nxtbets-sports__check {
	color: var(--lp-accent-ink);
	background: var(--lp-border-soft);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.7rem;
	flex: none;
	opacity: 0.35;
}
body.nxtbets-account .nxtbets-sports__pill:has(input:checked) {
	border-color: var(--lp-accent);
	background: rgba(13, 181, 255, 0.1);
}
body.nxtbets-account .nxtbets-sports__pill:has(input:checked) .nxtbets-sports__check {
	background: var(--lp-accent);
	opacity: 1;
}