/* ─── AUTH & ACCOUNT STYLES ─────────────────────────────────────────────────
   Login, Register, Account, nav user avatar/dropdown, and bookmark button.
   Inherits theme tokens: --bg, --bg-2, --text, --text-2, --text-3,
   --border, --sans, --mono, --phillies, --eagles, --r-sm
 ──────────────────────────────────────────────────────────────────────────── */

/* ── Nav: Sign In link ────────────────────────────────────────────────────── */

.nav-signin {
	display: inline-flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-2);
	text-decoration: none;
	padding: 0.4rem 1rem;
	border: 2px solid var(--border);
	border-radius: 0;
	white-space: nowrap;
	/* Slide-fill - same pattern as every other button */
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 220ms ease, border-color 220ms ease;
}

.nav-signin::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--text);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.nav-signin:hover              { color: var(--bg); border-color: var(--text); }
.nav-signin:hover::before      { transform: scaleX(1); }
.nav-signin:active::before     { transform: scaleX(1); opacity: 0.85; }

/* ── Nav: Membership badge ────────────────────────────────────────────────── */

.nav-membership-badge {
	font-family: var(--sans);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.55rem;
	border-radius: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}
.nav-membership-badge.bleachers {
	background: color-mix(in srgb, var(--ink-3) 15%, transparent);
	color: var(--ink-3);
	border: 1px solid color-mix(in srgb, var(--ink-3) 35%, transparent);
}
.nav-membership-badge.club-seats {
	background: color-mix(in srgb, var(--union) 15%, transparent);
	color: var(--union);
	border: 1px solid color-mix(in srgb, var(--union) 50%, transparent);
}


/* ── Nav: User avatar + dropdown ─────────────────────────────────────────── */

.nav-user {
	position: relative;
}

.nav-user-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--phillies);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: opacity 180ms;
}

.nav-user-btn:hover {
	opacity: 0.85;
}

.nav-user-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 160px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	padding: 0.4rem 0;
	z-index: 500;
	/* Hidden state - JS adds .open */
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.nav-user-dropdown.open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.nav-user-dropdown a {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	font-family: var(--sans);
	font-size: 0.82rem;
	color: var(--text);
	text-decoration: none;
	transition: background 150ms;
}

.nav-user-dropdown a:hover {
	background: var(--bg-2);
}

.nav-user-dropdown a + a {
	border-top: 1px solid var(--border);
}

/* Mobile user links (inside drawer) */
.mobile-user-section {
	border-top: 1px solid var(--border);
	padding-top: 1rem;
	margin-top: 0.5rem;
}

/* ── Auth page layout ─────────────────────────────────────────────────────── */

.auth-page {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.auth-wrap {
	width: 100%;
	max-width: 420px;
}

.auth-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: 0;
	padding: 2.5rem 2rem;
}

.auth-eyebrow {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--phillies);
	margin-bottom: 0.5rem;
}

.auth-heading {
	font-size: clamp(1.5rem, 5vw, 1.9rem);
	margin: 0 0 0.25rem;
}

.auth-subhead {
	font-size: 0.88rem;
	color: var(--text-2);
	margin: 0 0 1.5rem;
	line-height: 1.5;
}

/* ── Flash alerts ─────────────────────────────────────────────────────────── */

.auth-alert {
	padding: 0.75rem 1rem;
	border-radius: 0;
	font-size: 0.87rem;
	margin-bottom: 1.25rem;
	border-left: 3px solid;
}

.auth-alert--error {
	background: color-mix(in srgb, #c0392b 10%, transparent);
	border-color: #c0392b;
	color: #c0392b;
}

.auth-alert--success {
	background: color-mix(in srgb, #27ae60 10%, transparent);
	border-color: #27ae60;
	color: #27ae60;
}

/* ── Auth form ────────────────────────────────────────────────────────────── */

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0 1.25rem;
}

.auth-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.auth-field label {
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-2);
}

.auth-field input {
	padding: 0.65rem 0.9rem;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text);
	font-family: var(--sans);
	font-size: 0.9rem;
	transition: border-color 180ms;
}

.auth-field input:focus {
	outline: none;
	border-color: var(--phillies);
}

.auth-hint {
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--text-3);
}

.auth-remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--text-2);
	cursor: pointer;
}

.auth-remember input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--phillies);
}

.auth-submit {
	width: 100%;
	justify-content: center;
	padding: 0.75rem;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

.auth-alt {
	text-align: center;
	font-size: 0.85rem;
	color: var(--text-3);
	margin: 0.5rem 0 0;
}

.auth-alt a {
	color: var(--phillies);
	font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── ACCOUNT PAGE                                                           ── */
/* ═══════════════════════════════════════════════════════════════════════════ */

.account-page {
	min-height: 70vh;
	padding: 3rem 0;
}

.account-container {
	max-width: 900px;
}

/* ── Account header ───────────────────────────────────────────────────────── */

.account-header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: 2rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--border);
}

.account-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--phillies);
	color: #fff;
	font-family: var(--sans);
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.account-name {
	font-size: clamp(1.1rem, 3vw, 1.4rem);
	margin: 0 0 0.15rem;
}

.account-email {
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--text-3);
	margin: 0;
}

.account-logout {
	margin-left: auto;
	flex-shrink: 0;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.account-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--border);
	margin-bottom: 2rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.account-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 1.25rem;
	font-family: var(--sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-3);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 180ms, border-color 180ms;
	white-space: nowrap;
}

.account-tab:hover {
	color: var(--text);
}

.account-tab.active {
	color: var(--phillies);
	border-bottom-color: var(--phillies);
}

.tab-count {
	display: none;
}

/* ── Section content ──────────────────────────────────────────────────────── */

.account-section {
	padding-bottom: 4rem;
}

/* ── Bookmarks grid ───────────────────────────────────────────────────────── */

.bookmarks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.account-empty {
	text-align: center;
	padding: 4rem 0;
	color: var(--text-3);
}

.account-empty i {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	opacity: 0.35;
}

.account-empty p {
	font-family: var(--mono);
	font-size: 0.85rem;
	margin-bottom: 1.25rem;
}

/* ── Crossword history table ──────────────────────────────────────────────── */

.crossword-history-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.crossword-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.crossword-history-table th {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-3);
	text-align: left;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--border);
}

.crossword-history-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	vertical-align: middle;
}

.crossword-history-table td a {
	color: var(--text);
	font-weight: 600;
}

.crossword-history-table td a:hover {
	color: var(--phillies);
}

.crossword-history-table tr:last-child td {
	border-bottom: none;
}

.crossword-history-table tr:hover td {
	background: var(--bg-2);
}

.crossword-solved-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--eagles, #004c54);
}

/* ── Profile form ─────────────────────────────────────────────────────────── */

.profile-form {
	max-width: 480px;
}

.profile-form input,
.profile-form select,
.profile-form textarea {
	border-radius: 0;
}

.profile-section-heading {
	font-size: 1rem;
	font-family: var(--sans);
	font-weight: 700;
	margin: 0 0 1rem;
	color: var(--text);
}

/* ── Avatar color picker ──────────────────────────────────────────────────── */

.avatar-color-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.75rem;
}

.avatar-swatch-label {
	cursor: pointer;
	display: inline-block;
	position: relative;
}

/* Hide the native radio */
.avatar-swatch-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.avatar-swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid transparent;
	transition: border-color 150ms, transform 150ms;
	box-sizing: border-box;
}

.avatar-swatch-initial {
	font-family: var(--sans);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* Selected state */
.avatar-swatch-label input[type="radio"]:checked + .avatar-swatch {
	border-color: var(--text);
	transform: scale(1.15);
}

.avatar-swatch-label:hover .avatar-swatch {
	transform: scale(1.1);
}

/* ── Nav user button: SVG image variant ─────────────────────────────────── */

.nav-user-btn--svg {
	padding: 0;
	overflow: hidden;
}

.nav-user-btn-svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Account header: SVG avatar ─────────────────────────────────────────── */

.account-avatar--svg {
	padding: 0;
	overflow: hidden;
}

.account-avatar-svg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

/* ── SVG icon picker (profile form) ─────────────────────────────────────── */

.avatar-svg-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}

.avatar-svg-label {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	position: relative;
}

/* Hide native radio */
.avatar-svg-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.avatar-svg-swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid transparent;
	overflow: hidden;
	transition: border-color 150ms, transform 150ms, box-shadow 150ms;
	font-family: var(--sans);
	font-size: 1.25rem;
	font-weight: 700;
}

.avatar-svg-swatch--none {
	/* color set inline to match the active color swatch */
}

.avatar-svg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Selected */
.avatar-svg-label input[type="radio"]:checked + .avatar-svg-swatch {
	border-color: var(--text);
	transform: scale(1.12);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 20%, transparent);
}

.avatar-svg-label:hover .avatar-svg-swatch {
	transform: scale(1.07);
}

.avatar-svg-name {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── BOOKMARK BUTTON                                                        ── */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Bookmark - borderless icon-only button */
.bookmark-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.4rem;
	font-size: 1.1rem;
	color: var(--text-3);
	cursor: pointer;
	transition: color 150ms ease, transform 120ms ease;
	flex-shrink: 0;
	position: relative;
}

/* Solid overlay for fill-from-left animation */
.bookmark-btn::before {
	content: '\f02e';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--phillies);
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bookmark-btn:hover::before {
	clip-path: inset(0 0 0 0);
}

.bookmark-btn:hover {
	color: var(--text-3);
}

.bookmark-btn[data-bookmarked="true"] {
	color: var(--phillies);
}
.bookmark-btn[data-bookmarked="true"]::before {
	display: none;
}

.bookmark-btn:active {
	transform: scale(0.88);
}

.bookmark-btn.saving {
	color: var(--phillies);
	opacity: 0.7;
	pointer-events: none;
}

.bookmark-btn.loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Bookmark button in post card footer */
.post-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
}

/* Bookmark in secondary stories */
.secondary-story-footer {
	position: relative;
	z-index: 2;
	margin-top: 0.25rem;
}

/* Bookmark in video meta */
.video-meta .bookmark-btn {
	position: relative;
	z-index: 2;
	font-size: 0.9rem;
	padding: 0.2rem;
	margin-left: auto;
}

/* ── Share row (single post) ──────────────────────────────────────────────── */

.gtl-share-section {
	width: 100%;
}

.gtl-share-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

.gtl-share-left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gtl-share-right {
	margin-left: auto;
}

/* copy-link-btn uses btn-outline btn-sm classes for base styling.
   Only the copied state is unique. */
.copy-link-btn {
	cursor: pointer;
	background: transparent;
}

.copy-link-btn.copied {
	color: #2a9d2a;
	border-color: #2a9d2a;
}

/* ── Toast notification ───────────────────────────────────────────────────── */

.gtl-toast {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%) translateY(2rem);
	background: var(--text);
	color: var(--bg);
	padding: 0.65rem 1.25rem;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 0.85rem;
	z-index: 9000;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 250ms, transform 250ms;
	pointer-events: none;
}

.gtl-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.gtl-toast a {
	color: var(--phillies);
	font-weight: 700;
	margin-left: 0.5rem;
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* Account header: let logout button wrap to its own line */
	.account-header {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.account-logout {
		margin-left: 0;        /* remove auto-push to right */
		width: 100%;           /* full row */
		display: flex;
		justify-content: flex-start;
	}

	/* Auth card - less padding on small screens */
	.auth-card {
		padding: 1.75rem 1.25rem;
	}

	/* Share row - stack tighter on small screens */
	.gtl-share-row {
		gap: 0.4rem;
	}
}

@media (max-width: 480px) {
	/* Auth page - reduce vertical padding */
	.auth-page {
		padding: 2rem 1rem;
	}

	/* Account page - tighter vertical rhythm */
	.account-page {
		padding: 1.5rem 0;
	}

	.account-section {
		padding-bottom: 2rem;
	}

	/* Account header - compact avatar + text */
	.account-avatar {
		width: 42px;
		height: 42px;
		font-size: 1rem;
	}

	.account-tabs .account-tab {
		padding: 0.6rem 0.9rem;
		font-size: 0.78rem;
	}

	/* Profile form fills full width on phones */
	.profile-form {
		max-width: 100%;
	}
}


/* ── Achievement cards ────────────────────────────────────────────────────── */

.achievement-summary {
	font-family: var(--mono);
	font-size: 0.8rem;
	color: var(--text-3);
	margin-bottom: 2rem;
}

.achievement-summary-stat {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
}

.achievement-category {
	margin-bottom: 2.5rem;
}

.achievement-category-heading {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.achievement-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
}

/* Sports card base */
.achievement-card {
	position: relative;
	border: 1px solid var(--border);
	background: var(--bg-2);
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 180ms ease, border-color 180ms ease;
}

.achievement-card.earned:hover {
	transform: translateY(-2px);
}

/* Card header stripe - tier color */
.achievement-card-header {
	height: 6px;
	background: var(--border);
}

.achievement-card--bronze .achievement-card-header {
	background: #b87333;
}

.achievement-card--silver .achievement-card-header {
	background: #9ea2a2;
}

.achievement-card--gold .achievement-card-header {
	background: var(--union, #c9a84c);
}

/* Tier border accent */
.achievement-card--bronze.earned { border-color: #b87333; }
.achievement-card--silver.earned { border-color: #9ea2a2; }
.achievement-card--gold.earned   { border-color: var(--union, #c9a84c); }

/* Tier badge */
.achievement-tier-badge {
	display: block;
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--text-3);
	padding: 0.4rem 0.75rem 0.15rem;
}

.achievement-card--bronze.earned .achievement-tier-badge { color: #b87333; }
.achievement-card--silver.earned .achievement-tier-badge { color: #9ea2a2; }
.achievement-card--gold.earned   .achievement-tier-badge { color: var(--union, #c9a84c); }

/* Card body - icon left, info right */
.achievement-card-body {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem 0.75rem;
}

/* Icon */
.achievement-icon {
	font-size: 2rem;
	text-align: center;
	line-height: 1;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.achievement-icon-svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Locked state fades the icon */
.achievement-card.locked .achievement-icon {
	filter: grayscale(1);
	opacity: 0.35;
}

/* Info block */
.achievement-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.achievement-name {
	font-family: var(--serif);
	font-size: 0.88rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	color: var(--text);
	line-height: 1.25;
}

.achievement-card.locked .achievement-name {
	color: var(--text-3);
}

.achievement-desc {
	font-family: var(--sans);
	font-size: 0.72rem;
	color: var(--text-3);
	margin: 0 0 0.5rem;
	line-height: 1.4;
	flex: 1;
}

.achievement-date {
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--text-3);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.achievement-card.earned .achievement-date { color: var(--eagles, #004c54); }
.achievement-date--locked { opacity: 0.5; }

/* ── Account: Membership badge (in account header) ───────────────────────── */

.account-membership-badge {
	display: inline-flex;
	align-items: center;
	margin-top: 0.4rem;
	padding: 0.2rem 0.65rem;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.account-membership-badge--club {
	background: var(--union);
	color: #fff;
}

.account-membership-badge--bleachers {
	background: var(--ink-3, #555);
	color: var(--paper, #fff);
}

.account-membership-badge--none {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--phillies);
	transition: background 180ms, color 180ms;
}

.account-membership-badge--none:hover {
	background: var(--phillies);
	color: #fff;
	border-color: var(--phillies);
}


/* ── Account: Membership tab section ─────────────────────────────────────── */

.account-membership-card {
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: 0;
	padding: 1.75rem;
}

.account-membership-card--club {
	border-color: var(--union);
}

.account-membership-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.account-membership-tier-label {
	display: block;
	font-family: var(--sans);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--text);
	margin-bottom: 0.25rem;
}

.account-membership-tier-desc {
	font-size: 0.85rem;
	color: var(--text-3);
	margin: 0;
}

.account-membership-status-pill {
	flex-shrink: 0;
	padding: 0.2rem 0.65rem;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.account-membership-status-pill--active {
	background: color-mix(in srgb, var(--eagles, #004c54) 15%, transparent);
	color: var(--eagles, #004c54);
}

.account-membership-perks {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.account-membership-perks li {
	font-size: 0.88rem;
	color: var(--text-2);
	padding-left: 1.4rem;
	position: relative;
}

.account-membership-perks li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--eagles, #004c54);
	font-weight: 700;
}

.account-membership-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.account-membership-cancel-link {
	font-size: 0.8rem;
	color: var(--text-3);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.account-membership-cancel-link:hover {
	color: var(--text);
}

.account-membership-upgrade {
	margin-top: 0.5rem;
}

.account-membership-upgrade-pitch {
	font-size: 0.88rem;
	color: var(--text-2);
	margin: 0 0 1rem;
	line-height: 1.6;
}

.account-membership-upgrade-pitch strong {
	color: var(--text);
}

/* ── Membership grid (card + feed side-by-side) ─────────────────────────── */
.account-membership-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: start;
}
@media (max-width: 768px) {
	.account-membership-grid {
		grid-template-columns: 1fr;
	}
}
.account-membership-grid .account-membership-card {
	max-width: none;
}

/* ── Feed card ──────────────────────────────────────────────────────────── */
.account-feed-card {
	border-color: var(--border);
}
.account-feed-icon {
	flex-shrink: 0;
	color: var(--text-3);
}
.account-feed-url-wrap {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.account-feed-url-input {
	flex: 1;
	min-width: 0;
	padding: 0.45rem 0.65rem;
	font-family: var(--mono, monospace);
	font-size: 0.72rem;
	color: var(--text-2);
	background: var(--bg-2, var(--bg));
	border: 1px solid var(--border);
	border-radius: 0;
	cursor: text;
}
.account-feed-url-input:focus {
	outline: 2px solid var(--phillies);
	outline-offset: -2px;
}
.account-feed-copy {
	flex-shrink: 0;
	white-space: nowrap;
}
.account-feed-note {
	font-size: 0.78rem;
	color: var(--text-3);
	margin: 0 0 0.75rem;
	line-height: 1.5;
}
.account-feed-actions {
	display: flex;
	gap: 0.75rem;
}
.account-feed-regen {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
}

/* ── PMPro checkout / billing / cancel - theme override ──────────────────────
   Re-skins PMPro variation_1 to feel native to the GTL theme.
   Overrides PMPro's CSS variables + key layout rules.
 ──────────────────────────────────────────────────────────────────────────── */

/* 1. Map PMPro's CSS vars to our theme tokens */
.pmpro-checkout,
.pmpro-billing,
.pmpro-cancellation,
.pmpro-confirmation,
.pmpro-levels {
	--pmpro--color--base:             var(--bg);
	--pmpro--color--contrast:         var(--text);
	--pmpro--color--accent:           var(--phillies);
	--pmpro--color--accent--variation: color-mix(in srgb, var(--phillies) 85%, #000);
	--pmpro--color--border--variation: var(--border);
}

/* 2. Wrap PMPro content in a constrained, centered column */
#pmpro_form,
.pmpro_content_message,
.entry-content .pmpro_checkout,
.pmpro-section {
	max-width: 560px;
	margin: 0 auto;
}

/* 3. Page title spacing */
.pmpro-checkout .entry-header,
.pmpro-checkout .page-header {
	padding-top: 2.5rem;
}

/* 4. Section headings */
.pmpro_checkout h3,
.pmpro_checkout h2,
.pmpro_content_message h3 {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* 5. Form rows / labels */
.pmpro_checkout .pmpro_checkout-field label,
#pmpro_form label {
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-2);
}

/* 6. Inputs */
.pmpro_checkout input[type="text"],
.pmpro_checkout input[type="email"],
.pmpro_checkout input[type="password"],
.pmpro_checkout input[type="tel"],
.pmpro_checkout select,
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form select {
	font-family: var(--sans);
	font-size: 0.9rem;
	color: var(--text);
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-radius: 0;
	padding: 0.6rem 0.85rem;
	width: 100%;
	transition: border-color 180ms;
}
.pmpro_checkout input:focus,
#pmpro_form input:focus,
#pmpro_form select:focus {
	outline: none;
	border-color: var(--text);
}

/* 7. Submit button
   PMPro renders <input type="submit"> - void elements can't use ::before/::after.
   Use a gradient slide-fill instead: it works on every element type. */
#pmpro_btn-submit,
#pmpro_btn-submit-checkout,
.pmpro_submit input[type="submit"],
.pmpro_submit button[type="submit"] {
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 2px solid var(--phillies);
	background: linear-gradient(to right, var(--phillies) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right center;
	color: var(--phillies);
	padding: 0.65rem 1.75rem;
	border-radius: 0;
	cursor: pointer;
	transition: background-position 260ms ease, color 260ms ease;
}
#pmpro_btn-submit:hover,
#pmpro_btn-submit-checkout:hover,
.pmpro_submit input[type="submit"]:hover,
.pmpro_submit button[type="submit"]:hover {
	background-position: left center;
	color: #fff;
}

/* 8. Membership info box */
.pmpro_checkout_level_name,
.pmpro_checkout-fields--level-name {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
}

/* 9. Pricing / total display */
.pmpro_checkout_level_cost,
.pmpro_checkout-total {
	font-family: var(--mono);
	font-size: 0.85rem;
	color: var(--text-3);
}

/* 10. Alert messages */
.pmpro_message,
.pmpro_error {
	font-family: var(--sans);
	font-size: 0.88rem;
	padding: 0.75rem 1rem;
	border-radius: 0;
	border-left: 3px solid var(--phillies);
	background: var(--bg-2);
	color: var(--text);
	margin-bottom: 1rem;
}

/* 11. Login link on checkout ("Already have an account?") */
.pmpro_checkout #pmpro_login_link,
.pmpro_checkout .pmpro_login_link {
	font-size: 0.85rem;
	color: var(--text-3);
}
.pmpro_checkout #pmpro_login_link a,
.pmpro_checkout .pmpro_login_link a {
	color: var(--phillies);
	font-weight: 600;
}

/* 12. Kill PMPro default rounded corners, shadows, and background colors */
[class*="pmpro"] {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.pmpro_card,
.pmpro_card_actions,
.pmpro_card_content,
.pmpro-section,
.pmpro-section .pmpro-section-content,
#pmpro_login_link,
.pmpro_login_link,
.pmpro_checkout #pmpro_account_loggedin,
.pmpro_checkout .pmpro_login_wrap {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Center the submit button */
.pmpro_form_submit,
.pmpro_submit,
#pmpro_submit_span {
	display: block !important;
	text-align: center;
}

.pmpro_form_submit .pmpro_btn-submit-checkout,
#pmpro_btn-submit {
	margin: 0 auto;
}


/* 13. Club Seats billing toggle on checkout */
.gtl-checkout-toggle {
	display: flex;
	border: 1px solid var(--border);
	width: fit-content;
	margin: 0 auto 1.5rem;
	max-width: 560px;
}

.gtl-checkout-toggle-btn,
.gtl-checkout-toggle-btn:hover,
.gtl-checkout-toggle-btn:focus,
.gtl-checkout-toggle-btn:visited {
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 0.5rem 1.25rem;
	color: var(--text-3);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	transition: background 180ms, color 180ms;
}

.gtl-checkout-toggle-btn:hover {
	color: var(--text);
}

.gtl-checkout-toggle-btn.active {
	background: var(--text);
	color: var(--bg);
}

.gtl-checkout-toggle-save {
	font-family: var(--mono);
	font-size: 0.6rem;
	background: var(--union);
	color: var(--paper);
	padding: 0.1rem 0.35rem;
	letter-spacing: 0.05em;
}

/* ── Register / tier-selection page ─────────────────────────────────────────── */

/* 14. Widen the auth-wrap for side-by-side tier cards */
.register-page .register-wrap {
	max-width: 720px;
}

.register-page .auth-heading {
	text-align: center;
}

.register-page .auth-eyebrow {
	text-align: center;
}

.register-page .auth-subhead {
	text-align: center;
	margin-bottom: 2rem;
}

.register-page .auth-alt {
	text-align: center;
}

/* ── Lost password page ────────────────────────────────────────────────────── */

.lost-password-wrap {
	max-width: 460px;
	margin: 0 auto;
}

.lost-password-wrap .auth-card {
	text-align: center;
}

.lost-password-wrap .auth-field {
	text-align: left;
}

.lost-password-wrap .auth-field input {
	width: 100%;
}

.lost-password-wrap .auth-submit {
	width: 100%;
}

/* ── Register page: side-by-side tier cards ────────────────────────────────── */

.register-page .gtl-membership-tiers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

@media (max-width: 640px) {
	.register-page .gtl-membership-tiers {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── PMPRO ACCOUNT PAGE (/membership-account/) — Theme Overrides           ── */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Base text + background — force PMPro to use theme tokens */
#pmpro_account,
.pmpro_account,
div.pmpro,
.pmpro_member_profile_edit,
.entry-content .pmpro {
	color: var(--text);
}

#pmpro_account h2,
#pmpro_account h3,
.pmpro_account h2,
.pmpro_account h3,
div.pmpro h2,
div.pmpro h3 {
	font-family: var(--serif);
	color: var(--text);
}

/* Section titles outside cards — match site heading style */
div.pmpro .pmpro_section_title,
#pmpro_account .pmpro_section_title {
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.75rem;
}

/* 2. Section headings — mono-style eyebrow treatment like the rest of the site */
#pmpro_account .pmpro_card_title,
.pmpro_account .pmpro_card_title,
div.pmpro .pmpro_card_title {
	font-family: var(--mono);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* 3. Card containers — transparent background, theme borders */
#pmpro_account .pmpro_card,
.pmpro_account .pmpro_card,
div.pmpro .pmpro_card {
	background: transparent !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/* 4. Card content text */
#pmpro_account .pmpro_card_content,
div.pmpro .pmpro_card_content {
	background: transparent !important;
	color: var(--text);
}

#pmpro_account .pmpro_card_content p,
div.pmpro .pmpro_card_content p {
	color: var(--text-2);
	font-size: 1rem;
}

#pmpro_account .pmpro_card_content strong,
div.pmpro .pmpro_card_content strong {
	color: var(--text);
}

/* 5. Links */
#pmpro_account a,
div.pmpro a {
	color: var(--phillies);
	text-decoration: none;
}

#pmpro_account a:hover,
div.pmpro a:hover {
	color: var(--text);
}

/* 6. Card actions / buttons */
#pmpro_account .pmpro_card_actions,
div.pmpro .pmpro_card_actions {
	background: transparent !important;
	border-top: none !important;
	padding-top: 0.5rem;
	margin-top: 0.5rem;
}

#pmpro_account .pmpro_card_actions a,
div.pmpro .pmpro_card_actions a {
	font-family: var(--sans);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--phillies);
	text-decoration: none;
	border: 1.5px solid var(--phillies);
	padding: 0.5rem 1.25rem;
	display: inline-block;
	transition: background 180ms, color 180ms;
}

#pmpro_account .pmpro_card_actions a:hover,
div.pmpro .pmpro_card_actions a:hover {
	background: var(--phillies);
	color: #fff;
}

/* 7. Membership level name */
#pmpro_account .pmpro_card--membership .pmpro_card_content .pmpro_member_display_name,
div.pmpro .pmpro_member_display_name {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
}

/* ── Order History Table ─────────────────────────────────────────────────── */

#pmpro_account .pmpro_card--orders table,
div.pmpro .pmpro_table,
#pmpro_orders_table,
table.pmpro_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	background: transparent;
}

#pmpro_account .pmpro_card--orders table thead,
div.pmpro .pmpro_table thead,
#pmpro_orders_table thead,
table.pmpro_table thead {
	background: transparent;
}

#pmpro_account .pmpro_card--orders table th,
div.pmpro .pmpro_table th,
#pmpro_orders_table th,
table.pmpro_table th {
	font-family: var(--mono);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-3);
	text-align: left;
	padding: 0.6rem 1rem;
	background: transparent;
}

#pmpro_account .pmpro_card--orders table td,
div.pmpro .pmpro_table td,
#pmpro_orders_table td,
table.pmpro_table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	vertical-align: middle;
	background: transparent;
}

#pmpro_account .pmpro_card--orders table tr:last-child td,
div.pmpro .pmpro_table tr:last-child td,
#pmpro_orders_table tr:last-child td,
table.pmpro_table tr:last-child td {
	border-bottom: none;
}

#pmpro_account .pmpro_card--orders table tr:hover td,
div.pmpro .pmpro_table tr:hover td,
#pmpro_orders_table tr:hover td,
table.pmpro_table tr:hover td {
	background: var(--bg-2);
}

/* Order status badges — override PMPro default green Bootstrap badges */
#pmpro_account .pmpro_card--orders .pmpro_order-status,
div.pmpro .pmpro_order-status,
span.pmpro_order-status,
.pmpro_order-status-badge,
div.pmpro .pmpro_tag,
.pmpro_tag {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.pmpro_order-status-success,
.pmpro_order-paid,
div.pmpro .pmpro_tag-success,
.pmpro_tag-success {
	background: color-mix(in srgb, var(--eagles, #004c54) 12%, transparent) !important;
	color: var(--eagles, #004c54) !important;
	border: 1px solid color-mix(in srgb, var(--eagles, #004c54) 30%, transparent);
	padding: 0.25rem 0.75rem;
}

/* ── PMPro dark mode — catch-all for any remaining elements ──────────────── */

[data-theme="dark"] #pmpro_account,
[data-theme="dark"] .pmpro_account,
[data-theme="dark"] div.pmpro {
	color: var(--text);
}

[data-theme="dark"] #pmpro_account .pmpro_card,
[data-theme="dark"] div.pmpro .pmpro_card {
	background: var(--bg-2) !important;
	border-color: var(--border) !important;
}

[data-theme="dark"] #pmpro_account .pmpro_card_content,
[data-theme="dark"] div.pmpro .pmpro_card_content {
	background: transparent !important;
	color: var(--text);
}

[data-theme="dark"] #pmpro_account h2,
[data-theme="dark"] #pmpro_account h3,
[data-theme="dark"] div.pmpro h2,
[data-theme="dark"] div.pmpro h3,
[data-theme="dark"] #pmpro_account .pmpro_card_title,
[data-theme="dark"] div.pmpro .pmpro_card_title {
	color: var(--text-3);
	border-bottom-color: var(--border);
}

[data-theme="dark"] #pmpro_account p,
[data-theme="dark"] div.pmpro p,
[data-theme="dark"] #pmpro_account span,
[data-theme="dark"] div.pmpro span,
[data-theme="dark"] #pmpro_account li,
[data-theme="dark"] div.pmpro li {
	color: var(--text-2);
}

[data-theme="dark"] #pmpro_account strong,
[data-theme="dark"] div.pmpro strong {
	color: var(--text);
}

[data-theme="dark"] #pmpro_account a,
[data-theme="dark"] div.pmpro a {
	color: var(--phillies);
}

/* Dark mode: Order History table */
[data-theme="dark"] #pmpro_account table,
[data-theme="dark"] div.pmpro table,
[data-theme="dark"] #pmpro_orders_table,
[data-theme="dark"] table.pmpro_table {
	background: transparent;
}

[data-theme="dark"] #pmpro_account table th,
[data-theme="dark"] div.pmpro table th,
[data-theme="dark"] #pmpro_orders_table th,
[data-theme="dark"] table.pmpro_table th {
	color: var(--text-3);
	border-bottom-color: var(--border);
	background: transparent;
}

[data-theme="dark"] #pmpro_account table td,
[data-theme="dark"] div.pmpro table td,
[data-theme="dark"] #pmpro_orders_table td,
[data-theme="dark"] table.pmpro_table td {
	color: var(--text);
	border-bottom-color: var(--border);
	background: transparent;
}

[data-theme="dark"] #pmpro_account table tr:hover td,
[data-theme="dark"] div.pmpro table tr:hover td {
	background: var(--bg-2);
}

/* Dark mode: card action buttons */
[data-theme="dark"] #pmpro_account .pmpro_card_actions,
[data-theme="dark"] div.pmpro .pmpro_card_actions {
	background: transparent !important;
	border-top-color: var(--border);
}

/* Dark mode: status badges */
[data-theme="dark"] div.pmpro .pmpro_tag-success,
[data-theme="dark"] .pmpro_tag-success {
	background: color-mix(in srgb, var(--eagles) 18%, transparent) !important;
	color: var(--eagles) !important;
	border-color: color-mix(in srgb, var(--eagles) 35%, transparent);
}

/* ── PMPro page layout — constrain width to match our account page ───────── */

.pmpro-account .entry-content,
.page-template-default .entry-content div.pmpro {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* ── PMPro spacing — tighten the massive default section gaps ───────────── */

div.pmpro .pmpro_section {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

div.pmpro .pmpro_section:first-child {
	margin-top: 0;
}

/* Remove padding from empty membership detail list */
div.pmpro .pmpro_card_content .pmpro_list:empty,
div.pmpro .pmpro_card_content .pmpro_list-plain:empty {
	display: none;
}

div.pmpro .pmpro_card_content {
	padding: 0.75rem 1.5rem 1rem;
}

/* Tighten card action padding */
div.pmpro .pmpro_card_actions {
	padding: 0.75rem 1.5rem;
}

/* Feed card styles live in auth.css for the /account/ page's membership tab.
   No feed card is injected on /membership-account/ — see private-feed.php. */
/* Action button separators — hidden, replaced with margin */
#pmpro_account .pmpro_card_actions .pmpro_actionlinks-sep,
div.pmpro .pmpro_card_actions .pmpro_actionlinks-sep {
	display: none;
}

#pmpro_account .pmpro_card_actions a,
div.pmpro .pmpro_card_actions a {
	margin: 0.35rem 0.5rem 0.35rem 0;
	display: inline-block;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

#pmpro_account .pmpro_card_actions a::before,
div.pmpro .pmpro_card_actions a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--phillies);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

#pmpro_account .pmpro_card_actions a:hover,
div.pmpro .pmpro_card_actions a:hover {
	color: #fff;
	border-color: var(--phillies);
}

#pmpro_account .pmpro_card_actions a:hover::before,
div.pmpro .pmpro_card_actions a:hover::before {
	transform: scaleX(1);
}

/* Feed card grid — side by side on /account/ */
.account-feed-card {
	background: transparent;
	border: 1px solid var(--border);
	padding: 1.5rem;
	margin-top: 0;
}

.account-feed-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: start;
	margin-top: 1.25rem;
}

@media (max-width: 768px) {
	.account-feed-grid {
		grid-template-columns: 1fr;
	}
}

div.pmpro ~ .account-feed-card,
.entry-content > .account-feed-card {
	margin-top: 1.5rem;
}