/* Client-portal account page. Required explicitly from
   MyMemberProfilePageControllerExtension::onAfterInit(), because the framework's automatic
   css/pages/<ClassName>.css lookup produces nothing for a namespaced class name. */

.rd-acct {
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	color: var(--gm-ink, #16232b);
	background: var(--gm-bg, #fbfbfa);
}
.rd-acct-inner { max-width: 720px; margin: 0 auto; padding: 22px 24px 76px; }

.rd-acct-kicker {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--gm-muted, #5f6b72);
	margin-bottom: 10px;
}
.rd-acct-title {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: clamp(28px, 4vw, 40px); line-height: 1.14; font-weight: 700;
	margin: 0 0 14px;
}
.rd-acct-secttitle {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 20px; font-weight: 700; margin: 30px 0 12px;
}
.rd-acct-prose { font-size: 16.5px; line-height: 1.65; color: var(--gm-body, #3d4a52); }
.rd-acct-prose a, .rd-acct-signin a, .rd-acct-addmember a { color: var(--gm-navy, #003e69); font-weight: 600; }

.rd-acct-signin { font-size: 16px; color: var(--gm-body, #3d4a52); margin: 0 0 22px; }

/* The module's own alert. It was a bare .alertMessage.warning, styled nowhere in the redesign,
   so a failed registration printed unstyled black text above the form. */
.rd-acct-alert {
	margin: 0 0 20px;
	padding: 13px 16px;
	border: 1px solid #e6c98a;
	border-left: 4px solid #d9a441;
	border-radius: 8px;
	background: #fdf6e6;
	font-size: 15.5px;
	line-height: 1.55;
	color: #6b4f14;
}

/* ---------------------------------------------------------------- the form card

   The form itself is the module's, built in PHP, so its field markup is the framework's
   standard div.field > label + .middleColumn. It is styled here rather than rebuilt. */

.rd-acct-card {
	margin-top: 22px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 16px;
}

/* form.css sets `div.field > label { width:30%; float:left; text-align:right !important }`.
   That is a two-column form layout from the old theme; in a 720px column with labels like
   "Confirm Password" it leaves a ragged right edge against the inputs. Stacked and left
   aligned. !important is required to beat the original — specificity cannot. */
.rd-acct-card div.field > label {
	float: none !important;
	width: auto !important;
	text-align: left !important;
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	padding-top: 0;
	margin-bottom: 6px;
	color: var(--gm-ink, #16232b);
}
.rd-acct-card div.field { margin-bottom: 18px; }
/* .middleColumn is FLOATED RIGHT at ~50% by the old theme — that is the other half of the
   two-column form, and clearing the label's float alone is not enough: the label stacked
   correctly and the input stayed pinned to the right edge with a 300px gap between them.
   Float, width and margin all have to be undone together. */
.rd-acct-card .middleColumn {
	float: none !important;
	width: 100% !important;
	margin-left: 0 !important;
}

.rd-acct-card input[type=text],
.rd-acct-card input[type=email],
.rd-acct-card input[type=password],
.rd-acct-card select,
.rd-acct-card textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;              /* 16px exactly: iOS zooms the page on focus below it */
	padding: 12px 14px;
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 10px;
	background: #fff;
	color: var(--gm-ink, #16232b);
}
.rd-acct-card input:focus-visible,
.rd-acct-card select:focus-visible,
.rd-acct-card textarea:focus-visible { outline: 2px solid var(--gm-navy, #003e69); outline-offset: 1px; }

.rd-acct-card .description { font-size: 13.5px; color: var(--gm-muted, #5f6b72); margin-top: 6px; }
.rd-acct-card .required > label:after { content: ' *'; color: #b3261e; }
.rd-acct-card label.error, .rd-acct-card .message.bad { color: #b3261e; font-size: 14px; }

/* The submit control sits in `.btn-toolbar`, not the framework's usual `.Actions` — the
   memberprofiles module builds its own actions wrapper. Selecting on .Actions matched nothing
   at all, which is why the button kept the old theme's square dark rectangle while every other
   field restyled correctly. Matched on the control itself instead, so the wrapper's name stops
   mattering. */
.rd-acct-card .btn-toolbar, .rd-acct-card .Actions { margin-top: 22px; }
.rd-acct-card input[type=submit],
.rd-acct-card button[type=submit],
.rd-acct-card input.action {
	font-family: inherit; font-size: 16px; font-weight: 600;
	padding: 13px 26px;
	border: 0; border-radius: 10px;
	background: var(--gm-navy, #003e69); color: #fff; cursor: pointer;
	transition: background .15s ease;
}
.rd-acct-card input[type=submit]:hover,
.rd-acct-card button[type=submit]:hover,
.rd-acct-card input.action:hover { background: var(--gm-navy-hover, #00567f); }

/* The honeypot must stay unreachable, not merely invisible. */
.rd-acct-card .honeypot { position: absolute; left: -9999px; }

.rd-acct-rail { margin-top: 30px; font-size: 15px; }

@media (max-width: 620px) {
	.rd-acct-inner { padding: 18px 16px 56px; }
	.rd-acct-card { padding: 18px 14px; }
}