/* Form pages: a centred white card on the grey page, used by login.aspx, contact.aspx and needLogin.aspx.
   Loaded by BasePage.UseFormStyles(). Everything is scoped to div.formPage so the older
   dcDesign.css heading and link styles don't leak in.
   Breakpoint: 600px (phone: less padding, smaller heading, fields stacked). */

.formPage
{
	--plum: #5B2E57;
	--teal: #0F7C80;
	--tealDark: #0B6266;
	--border: #D9CCE0;
	--line: #E3DCE8;
	--text: #3F3F46;
	--muted: #6B6B73;

	padding: 56px 0 32px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
}

.formPage *,
.formPage *::before,
.formPage *::after
{
	box-sizing: border-box;
}

.formPage a,
.formPage a:link,
.formPage a:visited
{
	color: var(--teal);
}

.formPage a:hover
{
	color: var(--tealDark);
}

.formCard
{
	max-width: 440px;
	margin: 0 auto;
	padding: 40px 40px 32px;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(91, 46, 87, .06);
}

.formCard .badge
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto;
	border-radius: 50%;
	background: #E7F4F4;
	color: var(--teal);
}

.formCard h1
{
	margin: 16px 0 0;
	font: bold 26px/1.25 verdana, helvetica, sans-serif;
	color: var(--plum);
	text-align: center;
}

.formCard .sub
{
	margin: 8px 0 0;
	color: #52525B;
	text-align: center;
}

/* wider card for longer forms (contact, need login) */
.formCard.wide
{
	max-width: 640px;
}

/* wrong email or password */
.formCard .errBox
{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 24px;
	padding: 12px 14px;
	background: #FEF3F2;
	border: 1px solid #F4C7C3;
	border-radius: 8px;
	color: #912018;
	font-size: 13px;
}

.formCard .errBox svg
{
	flex: 0 0 auto;
	margin-top: 2px;
}

/* calm note above a form */
.formCard .infoBox
{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 24px;
	padding: 12px 14px;
	background: #E7F4F4;
	border: 1px solid #B9DEDF;
	border-radius: 8px;
	color: #0B5F62;
	font-size: 13px;
}

.formCard .infoBox svg
{
	flex: 0 0 auto;
	margin-top: 2px;
}

.formFields
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 28px;
}

.formFields .lblRow
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
}

.formFields label
{
	font-size: 13px;
	font-weight: bold;
	color: var(--text);
}

/* two fields side by side; stacks on phones */
.formFields .fieldRow
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.formFields .opt
{
	font-weight: normal;
	color: var(--muted);
}

.formFields .lblRow a
{
	font-size: 13px;
}

.formFields .in
{
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid #BFB2C8;
	border-radius: 6px;
	background: #ffffff;
	font: 15px verdana, helvetica, sans-serif;
	color: var(--text);
}

.formFields textarea.in
{
	height: 120px;
	padding: 10px 12px;
	line-height: 1.5;
	resize: vertical;
}

.formFields .in:focus
{
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(15, 124, 128, .2);
}

/* validator messages under a box */
.formFields .err
{
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: bold;
	color: #B42318;
}

/* captcha widget: Turnstile draws its own box; flexible size fills the card width */
.formFields .captcha
{
	min-height: 65px;
}

.formFields .pw
{
	position: relative;
}

.formFields .pw .in
{
	padding-right: 72px;
}

.formFields .show
{
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 60px;
	height: 38px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	font: bold 12px verdana, helvetica, sans-serif;
	color: var(--teal);
	cursor: pointer;
}

.formFields .show:hover
{
	background: #F3FAFA;
}

.formFields .formBtn
{
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 4px;
	padding: 0 26px;
	border: 2px solid var(--teal);
	border-radius: 6px;
	background: var(--teal);
	box-shadow: 0 2px 6px rgba(15, 124, 128, .3);
	font: bold 15px verdana, helvetica, sans-serif;
	color: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.formFields .formBtn:hover
{
	background: var(--tealDark);
	border-color: var(--tealDark);
}

.formPage .formBtn:focus-visible,
.formPage .show:focus-visible,
.formPage a:focus-visible
{
	outline: 3px solid var(--plum);
	outline-offset: 2px;
}

.formCard .new
{
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: #52525B;
	text-align: center;
}

.formCard .new a
{
	font-weight: bold;
}

.formPage .below
{
	max-width: 440px;
	margin: 16px auto 0;
	font-size: 12px;
	color: var(--muted);
	text-align: center;
}

@media (max-width: 600px)
{
	.formPage { padding: 24px 0 8px; }
	.formCard { padding: 28px 20px 24px; border-radius: 10px; }
	.formCard h1 { font-size: 22px; }
	.formFields .fieldRow { grid-template-columns: minmax(0, 1fr); }
}