/* Membership account nav — self-contained, no Flip Pay dependency.
   Visibility is decided server-side: signed-in = realoem_session cookie, adFree = entitlement. */
.ro-acct-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin: 32px 0 8px;
	font-family: Arial, Helvetica, sans-serif;
}
.ro-acct-links {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Light pill style for the account links; inline-block/inline-flex so they never stack. */
.ro-acct-link {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	color: #0066cc;
	text-decoration: none;
	background: #f4f6f8;
	border: 1px solid #d6dbe0;
	border-radius: 6px;
	padding: 5px 12px;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
}
.ro-acct-link:hover {
	background: #e9edf1;
	border-color: #c2c9d0;
	color: #0052a3;
	text-decoration: none;
}
.ro-acct-signin {
	font-weight: 600;
	color: #fff;
	background: #0066cc;
	border-color: #0066cc;
}
.ro-acct-signin:hover {
	background: #0052a3;
	border-color: #0052a3;
	color: #fff;
}
.ro-acct-form {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.ro-acct-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}
.ro-btn {
	display: inline-block;
	padding: 10px 24px;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ro-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
	color: #fff;
}
.ro-btn-donate { background: #38a169; }
.ro-btn-donate:hover { background: #2f855a; }
.ro-btn-adfree { background: #5a67d8; }
.ro-btn-adfree:hover { background: #4c51bf; }

/* ---- v2 override -------------------------------------------------------------------------
   On the redesigned pages (body.v2-page / .bmw-select-page / .home-page) the nav speaks the v2
   pill language instead of the generic style above: #0c4a6e, 999px radius, uppercase microcopy
   -- the same spec as .searchResults-button in style-v2.css. The classic UI never has these
   body classes, so it keeps the rules above untouched.
   var(--brand-dark, #0c4a6e): the homepage defines --brand-dark (home.css :root) so its pills
   match that page's own CTAs; every other v2 page has no token and falls back to the style-v2
   constant. Account/Sign Out stay quiet (outline), the revenue CTAs stay filled. */
.v2-page .ro-acct-link,
.bmw-select-page .ro-acct-link,
.home-page .ro-acct-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 8px 18px;
	border: 1px solid var(--brand-dark, #0c4a6e);
	border-radius: 999px;
	background: #ffffff;
	color: var(--brand-dark, #0c4a6e);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}
.v2-page .ro-acct-link:hover,
.bmw-select-page .ro-acct-link:hover,
.home-page .ro-acct-link:hover {
	background: rgba(12, 74, 110, 0.08);
	color: var(--brand-dark, #0c4a6e);
}
.v2-page .ro-acct-signin,
.bmw-select-page .ro-acct-signin,
.home-page .ro-acct-signin {
	background: var(--brand-dark, #0c4a6e);
	color: #ffffff;
}
.v2-page .ro-acct-signin:hover,
.bmw-select-page .ro-acct-signin:hover,
.home-page .ro-acct-signin:hover {
	background: #0a3a57;
	color: #ffffff;
}
.v2-page .ro-btn,
.bmw-select-page .ro-btn,
.home-page .ro-btn {
	min-height: 32px;
	padding: 10px 24px;
	border-radius: 999px;
	background: var(--brand-dark, #0c4a6e);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 1px 0 rgba(12, 24, 74, 0.12);
	transition: none;
}
.v2-page .ro-btn:hover,
.bmw-select-page .ro-btn:hover,
.home-page .ro-btn:hover {
	transform: none;
	filter: brightness(1.12);
	background: var(--brand-dark, #0c4a6e);
}
/* Outline treatment keeps the two CTAs distinguishable without the washed-out look (and the
   sub-AA contrast) that white-on-#7aa5b8 had. Padding drops 1px each way to absorb the border,
   so both CTAs stay the same height. */
.v2-page .ro-btn-adfree,
.bmw-select-page .ro-btn-adfree,
.home-page .ro-btn-adfree {
	padding: 9px 23px;
	border: 1px solid var(--brand-dark, #0c4a6e);
	background: #ffffff;
	color: var(--brand-dark, #0c4a6e);
}
.v2-page .ro-btn-adfree:hover,
.bmw-select-page .ro-btn-adfree:hover,
.home-page .ro-btn-adfree:hover {
	background: rgba(12, 74, 110, 0.08);
	color: var(--brand-dark, #0c4a6e);
	filter: none;
}
.v2-page .ro-acct-link:focus-visible,
.bmw-select-page .ro-acct-link:focus-visible,
.home-page .ro-acct-link:focus-visible,
.v2-page .ro-btn:focus-visible,
.bmw-select-page .ro-btn:focus-visible,
.home-page .ro-btn:focus-visible {
	outline: 2px solid rgba(12, 74, 110, 0.5);
	outline-offset: 2px;
}

/* Donate page */
.donate-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.donate-custom { display: flex; align-items: flex-end; gap: 10px; margin: 8px 0 16px; }
.donate-custom label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.donate-custom input { width: 120px; padding: 8px 10px; font-size: 15px; border: 1px solid #bbb; border-radius: 6px; }