/*
General
 */


/*
Page Header
 */
.PageHeader {
	/* 64px total below the header; 24px of that now comes from main's own
	   padding-top. */
	margin-top:                    40px;
	position:                      relative;
}

.PageHeaderInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
	position:                      relative;
	z-index:                       10;
}

.PageHeaderInnerContent {
	display:                       flex;
	flex-direction:                column;
	justify-content:               start;
	min-height:                    var(--Background-Height);
	padding:                       0 var(--Viewport-InlinePadding) 64px;
	text-align:                    center;
}

.PageHeaderInnerContent h1 {
	--Typeface-FontWght:           700;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     28px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	line-height:                   24px;
	margin-bottom:                 8px;
}

.PageHeaderInnerContent p {
	font-size:                     14px;
	line-height:                   21px;
	margin:                        0;
}

/*
Page Content
 */
.PageContentInner,
.PageFormInner {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
}

.PageContentInner h2 {
	--Typeface-FontWght:           600;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	line-height:                   22px;
	margin-bottom:                 16px;
}

/*
Challenge Details
 */
.DonateChallengeDetailsArea {
	background:                    var(--Colors-Brand-Secondary);
	border-radius:                 12px;
	margin-bottom:                 40px;
	padding:                       19px 24px 24px;
}

.DonateChallengeTitle {
	--Typeface-FontWght:           700;
	color:                         var(--Colors-Brand-Primary);
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	line-height:                   26px;
	margin-bottom:                 6px;
}

.DonateChallengeCreatedBy {
	font-size:                     14px;
	line-height:                   16px;
	margin-bottom:                 16px;
}

.DonateChallengeCreatedBy > .ChallengeCreator {
	font-weight:                   700;
}

.DonateOrganizationInformation {
	display:                       flex;
	gap:                           12px;
}

.DonateOrganizationInformation .OrganizationImageArea {
	flex:                          0 0 100px;
}

.DonateOrganizationInformation .OrganizationImage {
	aspect-ratio:                  100 / 68;
	display:                       block;
	width:                         100%;
}

.DonateOrganizationInformation .OrganizationContentArea {
	font-size:                     14px;
	line-height:                   18px;
	padding:                       7px 0 5px;
}

.DonateOrganizationInformation .OrganizationTitle {
	--Typeface-FontWght:           700;
	font-weight:                   var(--Typeface-FontWght);
}

/*
Amount Pledged Area
 */
.DonatePledgedArea {
	background:                    var(--Colors-Brand-Secondary);
	border-radius:                 12px;
	font-size:                     45px;
	font-weight:                   300;
	line-height:                   32px;
	margin-bottom:                 40px;
	padding:                       34px 24px;
	text-align:                    center;
	word-break:                    break-all;
}

/*
Form
 */
.FormRow {
	margin-bottom:                 24px;
}

.FormFieldGroupLabel {
	--Typeface-FontWght:           700;
	align-items:                   center;
	display:                       flex;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	gap:                           8px;
	line-height:                   22px;
	margin-bottom:                 16px;
	text-transform:                uppercase;
}

.FormFieldGroupLabel > .StepCounter {
	background-color:              var(--Colors-Brand-Primary);
	border-radius:                 13px;
	color:                         var(--Colors-Brand-Secondary);
	display:                       inline-block;
	font-size:                     22.58px;
	height:                        25px;
	line-height:                   1;
	min-width:                     25px;
	text-align:                    center;
}

/*
Form:                          Pick A Side
 */
.FormRowPickASide {
	margin-bottom:                 42px;
}

.FormRowPickASide .FormFieldRadioGroup {
	display:                       flex;
	gap:                           16px;
}

.FormRowPickASide .FormFieldRadio {
	flex:                          1 1 50%;
	position:                      relative;
}

.FormRowPickASide .FormFieldRadioInput {
	appearance:                    none;
	background-color:              var(--Colors-Brand-Secondary);
	border-radius:                 16px;
	display:                       block;
	height:                        120px;
	margin:                        0;
	position:                      relative;
	transition:                    0.25s;
	width:                         100%;
	z-index:                       1;
}

.FormRowPickASide .ThemeAccent01 .FormFieldRadioInput:checked {
	background-color:              var(--Colors-Secondary-Accent01);
}

.FormRowPickASide .ThemeAccent03 .FormFieldRadioInput:checked {
	background-color:              var(--Colors-Secondary-Accent03);
}

.FormRowPickASide .FormFieldLabel {
	--Typeface-FontWght:           700;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     18px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	left:                          0;
	line-height:                   20px;
	position:                      absolute;
	text-align:                    center;
	top:                           50%;
	transform:                     translateY(-50%);
	transition:                    0.25s;
	width:                         100%;
	z-index:                       10;
}

.FormRowPickASide .FormFieldRadio:has(.FormFieldRadioInput:checked) .FormFieldLabel {
	color:                         var(--Colors-Secondary-Accent02);
}

/*
Form:                          Organization Information
 */
.FormRowOrganizationInformation {
	margin-bottom:                 40px;
}

.FormOrganizationInformation {
	display:                       flex;
	gap:                           12px;
}

.FormOrganizationInformation .OrganizationImageArea {
	flex:                          0 0 100px;
}

.FormOrganizationInformation .OrganizationImage {
	aspect-ratio:                  100 / 68;
	display:                       block;
	width:                         100%;
}

.FormOrganizationInformation .OrganizationContentArea {
	font-size:                     14px;
	line-height:                   18px;
	padding:                       7px 0 5px;
}

.FormOrganizationInformation .OrganizationTitle {
	--Typeface-FontWght:           700;
	font-weight:                   var(--Typeface-FontWght);
}

/*
Form Billing Summary
 */
.DonateForm .FormBillingSummary {
	--Typeface-FontWght:           600;

	display:                       grid;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	grid-template-columns:         1fr 1fr;
	line-height:                   22px;
	margin-bottom:                 24px;
	margin-top:                    16px;
	text-transform:                uppercase;
}

.DonateForm .FormBillingSummaryValue {
	text-align:                    right;
}

/*
Form Error Messages
 */
.FormErrorMessages {
	margin-block:                  -8px -28px;
}

/*
Form Buttons
 */
.DonateForm .FormButtons {
	margin-block:                  40px 16px;
}

.DonateForm .FormSubmitButton {
	width:                         100%;
}

/*
Form Security
 */
.DonateForm .FormSecurity {
	align-items:                   center;
	color:                         #8097B6;
	display:                       flex;
	font-size:                     14px;
	gap:                           8px;
	justify-content:               center;
	line-height:                   1;
}
.DonateForm .FormSecurityText {
	padding-top:                   6px;
}