/* RI Membership — the login card.
   Tokens mirror dashboard.css so the popup reads as part of the member area
   rather than as a plugin's idea of a form. Every colour is declared here and
   nowhere else; there are no literals below :root. */

:root {
	--ri-lm-ink: #23282d;
	--ri-lm-body: #50575e;
	--ri-lm-line: #dcdcde;
	--ri-lm-card: #ffffff;
	--ri-lm-veil: rgba(20, 26, 24, .55);
	--ri-lm-green: #1e7b4d;
	--ri-lm-green-dark: #17643e;
	--ri-lm-danger: #b32d2e;
	--ri-lm-danger-bg: #fcf0f1;
	--ri-lm-focus: #2271b1;
}

.ri-modal[hidden] { display: none; }

.ri-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ri-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ri-lm-veil);
}

.ri-modal__card {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--ri-lm-card);
	border-radius: 12px;
	padding: 32px 28px 24px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	font-family: inherit;
}

.ri-modal__x.ri-modal__x {
	/* The theme styles bare <button> with a pill background and a border;
	   reset those here or the close control renders as a white oval. */
	appearance: none;
	box-shadow: none;
	border: 0;
	padding: 0;
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: none;
	color: var(--ri-lm-body);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.ri-modal__x:hover { background: var(--ri-lm-danger-bg); color: var(--ri-lm-danger); }

.ri-modal__title.ri-modal__title {
	margin: 0 0 18px;
	padding: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: normal;
	/* Doubled class (0,2,0) so this beats the Elementor Global Kit's
	   ".elementor-kit-NNNN h2" (0,1,1), which otherwise paints the title
	   in the site's link blue. Same trick as dashboard.css — not !important,
	   so the team can still restyle it from a stylesheet of their own. */
	color: var(--ri-lm-ink);
}

.ri-modal__error {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid var(--ri-lm-danger);
	background: var(--ri-lm-danger-bg);
	color: var(--ri-lm-danger);
	font-size: 14px;
}
.ri-modal__error[hidden] { display: none; }

.ri-modal__form { display: flex; flex-direction: column; }

.ri-modal__label {
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ri-lm-ink);
}

.ri-modal__input.ri-modal__input {
	/* Doubled for the same reason as the title: theme form styles are more
	   specific than a single class. */
	width: 100%;
	margin-bottom: 14px;
	padding: 11px 12px;
	border: 1px solid var(--ri-lm-line);
	border-radius: 7px;
	background: var(--ri-lm-card);
	color: var(--ri-lm-ink);
	/* 16px so iOS Safari does not zoom the page when the field takes focus. */
	font-size: 16px;
	font-family: inherit;
}
.ri-modal__input:focus {
	outline: 2px solid var(--ri-lm-focus);
	outline-offset: 1px;
	border-color: var(--ri-lm-focus);
}

.ri-modal__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 14px;
	color: var(--ri-lm-body);
}

.ri-modal__submit.ri-modal__submit {
	appearance: none;
	box-shadow: none;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	border-radius: 7px;
	background: var(--ri-lm-green);
	color: var(--ri-lm-card);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}
.ri-modal__submit.ri-modal__submit:hover { background: var(--ri-lm-green-dark); }
.ri-modal__submit:focus-visible { outline: 2px solid var(--ri-lm-focus); outline-offset: 2px; }
.ri-modal__submit[aria-busy="true"] { opacity: .7; cursor: progress; }

.ri-modal__links {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--ri-lm-body);
}
.ri-modal__links a { color: var(--ri-lm-green); text-decoration: underline; }

/* The page behind the card must not scroll while it is open. */
body.ri-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.ri-modal__card { animation: ri-modal-in .16s ease-out both; }
	@keyframes ri-modal-in {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}
}