/*------------------------------------------------------------------------------*/
/* Inputs
/*------------------------------------------------------------------------------*/

input,
select, 
textarea {
	--background-color: var(--input-background-color);
	--color-text: var(--input-text-color);
	background-color: var(--background-color);
	border: 1px solid var(--input-border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	color: var(--color-text);
	min-height: var(--input-height);
	padding: .5rem 1rem;
}

label + input,
label + select,
label + textarea {
	display: flex;
}

[type="radio"],
[type="checkbox"] {
	all: revert;
	border-radius: 0;
	border-width: 0;
	box-shadow: none;
	display: inline-flex;
	flex-shrink: 0;
	height: auto;
	margin: 0 .5rem 0 0;
	width: auto;
}

[type="checkbox"] + [type="checkbox"] {
	margin-left: 1.5rem;
}

[type="file"] {
	min-height: auto;
}

textarea {
	height: auto;
	max-width: 100%;
	resize: vertical;
}

select {
	appearance: none;
	background-image: url('../../images/Theme-Light/angle-down-solid.svg');
	background-position: top 50% right 1rem;
	background-repeat: no-repeat;
	background-size: auto var(--font-size-regular);
	cursor: pointer;
	height: var(--input-height);
	padding-right: 3rem;
}

input:-webkit-autofill {
	animation-name: onAutoFill;
}

@media screen and (max-width: 550px) {
	input, textarea {
		font-size: 16px;
		width: 100%;
	}
}

/*------------------------------------------------------------------------------*/
/* Label
/*------------------------------------------------------------------------------*/

label, 
.label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-weight: bold;
	margin-bottom: .5rem;
}

.InlineCheck label {
	align-items: center;
	display: inline-flex;
}

/*------------------------------------------------------------------------------*/
/* Form
/*------------------------------------------------------------------------------*/

form,
fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--margin);
}

.FormHelp {
	font-size: var(--font-size-small);
	margin: .5rem 0 0;
}

.FormAltAction {
	display: inline-block;
	margin-left: .5rem;
}

.HeaderItem h2 {
	font-size: var(--font-size-xxlarge);
	font-weight: bold;
	line-height: var(--line-height-heading);
}

/*------------------------------------------------------------------------------*/
/* Form Item Group
/*------------------------------------------------------------------------------*/

.GroupLabel {
	border-bottom: 1px solid var(--border-color);
	flex-basis: 100%;
	font-size: var(--font-size-xlarge);
	font-weight: bold;
	padding-bottom: 1rem;
}

.GroupItem {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.GroupItem > div {
	flex: 1;
}

.GroupItem > div input {
	width: 100%;
}

@media screen and (max-width: 550px) {
	.GroupItem {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

/*------------------------------------------------------------------------------*/
/* Form Item
/*------------------------------------------------------------------------------*/

.FormItem :last-child {
	margin-bottom: 0;
}

.FormItem p {
	max-width: 70ch;
}

.FormItem .InlineCheck {
	margin: 1rem 0 0 0;
}

.FormItem.required > label:not(.InlineCheck)::after {
	content: ' *';
	color: var(--color-accent);
	margin-left: .5rem;
}

.GroupItem.required label::after,
.GroupItem.required .label::after {
	content: ' *';
	color: var(--color-accent);
	margin-left: .5rem;
}

/*------------------------------------------------------------------------------*/
/* Checks
/*------------------------------------------------------------------------------*/

.Checks label {
	display: inline;
	font-weight: normal;
	margin: 0;
}

.RadioItem .Checks,
.CheckboxItem .Checks {
	background-color: var(--background-color-shade-1);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.RadioItem .Checks label,
.CheckboxItem .Checks label {
	padding: .75rem 1.5rem;
}

.RadioItem .Checks label:not(:first-child),
.CheckboxItem .Checks label:not(:first-child) {
	border-top: 1px solid var(--border-color);
}

.Checks label + .FormHelp {
	margin: 0;
}

/*------------------------------------------------------------------------------*/
/* Form Errors
/*------------------------------------------------------------------------------*/

.FormError {
	position: relative;
}

.FormErrorMessage {
	background-color: var(--color-notification-error-bg);
	border-radius: var(--border-radius);
	bottom: 100%;
	color: var(--color-notification-error);
	font-size: var(--font-size-small);
	line-height: 1.3;
	margin: 0 0 .5rem;
	opacity: 0;
	padding: .5rem;
	pointer-events: none;
	position: absolute;
	transition-duration: var(--transition-fast);
	width: max-content;
}

.FormErrorMessage::before {
	border: 6px solid transparent;
	border-top-color: transparent;
	border-top-style: solid;
	border-top-width: 6px;
	border-top: 6px solid var(--color-notification-error-bg);
	top: 100%;
	content: '';
	height: 0;
	left: 0;
	margin-left: 20px;
	position: absolute;
	pointer-events: none;
	width: 0;
	z-index: 1;
}

.FormError:focus-within .FormErrorMessage {
	opacity: 1;
}

.FormError .FormErrorMessage + label {
	color: var(--color-notification-error);
}

.FormError .FormErrorMessage + label:after {
	color: var(--color-notification-error) !important;
}

.GroupErrorMessage {
	display: none;
	flex: 1 0 100%;
}

@media screen and (max-width: 550px) {
	.FormErrorMessage {
		width: auto;
	}
}

/*------------------------------------------------------------------------------*/
/* Edit Contact Form
/*------------------------------------------------------------------------------*/

@media screen and (min-width: 551px) {
	#EditContactInfoForm .FormItem input:not([type="checkbox"]),
	#EditContactInfoForm .FormItem select {
		width: 100%;
	}

	#EditContactInfoForm .GroupItem input[type="text"] {
		width: 100%;
	}

	#EditContactInfoForm [for="street_address"] + div {
		flex: 1.5;
	}

	#EditContactInfoForm [for="street_address"] + div + div {
		flex: .5;
	}
}

@media screen and (min-width: 801px) {
	#EditContactInfoForm {
		background-color: var(--background-color-shade-1);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		margin-inline: auto;
		max-width: 680px;
		padding: 2rem;
	}
}

/*------------------------------------------------------------------------------*/
/* Availability Notification Form
/*------------------------------------------------------------------------------*/

.AvailabilityNotificationForm {
	background-color: var(--background-color-shade-1);
	border-radius: var(--border-radius-medium);
	border: 1px solid var(--border-color);
	padding: 1.5rem;
}

.AvailabilityNotificationForm input[type="text"],
.AvailabilityNotificationForm select {
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* Cart Share Form
/*------------------------------------------------------------------------------*/

.CartShareForm {
	max-width: 460px;
}

.CartShareForm form {
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* Campaign Code Form In Modal
/*------------------------------------------------------------------------------*/

.CampaignCodeForm-InModal form:last-child {
	margin: 0;
}

.CampaignCodeForm-InModal form > .FormItem {
	display: flex;
	flex-direction: column;
}

.CampaignCodeForm-InModal form:last-child button {
	margin-top: var(--margin-small);
}

/*------------------------------------------------------------------------------*/
/* Checkout Campaign Code Form
/*------------------------------------------------------------------------------*/

.CampaignCode-Checkout {
	margin-bottom: var(--margin-small);
}

.CampaignCode-Checkout form:last-child {
	margin: 0;
}

.CampaignCode-Checkout form > .FormItem {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.CampaignCode-Checkout form > .FormItem > label {
	flex: 1 0 100%;
	display: none;
}

.CampaignCode-Checkout form > .FormItem > .label {
	flex: 1;
}

.CampaignCode-Checkout .label strong {
	margin-inline: 1rem;
}

.CampaignCode-Checkout input[type="text"] {
	flex: 1;
}

.CampaignCode-Checkout #CampaignCode {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	margin-right: -1px;
}

.CampaignCode-Checkout #CampaignCode:focus {
	position: relative;
}

.CampaignCode-Checkout #CampaignCode + button {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

/*------------------------------------------------------------------------------*/
/* Account Login Form
/*------------------------------------------------------------------------------*/

.ModalContainer #AccountLoginForm {
	margin: 0;
}

.ModalContainer #AccountLoginForm .HeaderItem {
	display: none;
}

/*------------------------------------------------------------------------------*/
/* Checkout Form
/*------------------------------------------------------------------------------*/

#CheckoutForm input,
#CheckoutForm select,
#CheckoutForm textarea {
	box-shadow: none;
}

#CheckoutForm .FormItem label {
	font-weight: normal;
}

#CheckoutForm .FormItem label:not(.InlineCheck),
#CheckoutForm .FormItem .label:not(.InlineCheck) {
	color: var(--color-text-subtle);
}

#CheckoutForm .FormItem:not(.CheckWrap) label:not(.InlineCheck) {
	font-size: var(--font-size-small);
}

#CheckoutForm .FormItem label.GroupLabel {
	font-size: var(--font-size-large) !important;
	font-weight: bold;
}

#CheckoutForm label.GroupLabel:not([for="company"]) {
	display: none;
}

#CheckoutForm .FormItem select,
#CheckoutForm .FormItem textarea {
	width: 100%;
}

#CheckoutForm .FormItem label + input,
#CheckoutForm .FormItem label + select {
	font-weight: bold;
}

#CheckoutForm .SubmitButton {
	font-size: var(--font-size-large);
	margin-inline: auto;
	min-height: calc(var(--button-height) * 1.23);
	min-width: 500px;
	display: flex;
	margin-top: 3rem;
}

#CheckoutForm .SubContentSection {
	border-top: 1px solid var(--border-color);
	margin-top: 2rem;
	padding-block: 2rem;
}

#CheckoutShippingAddressWrap {
	margin-top: 1rem;
}

#CheckoutForm .PrivacyPolicy {
	--color-link: var(--color-text);
	font-size: var(--font-size-small);
	margin-inline: auto;
	max-width: 60ch;
	text-align: center;
}

#CheckoutAcceptTerms > .CheckWrap > .Checks {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media screen and (max-width: 801px) {
	#CheckoutForm .SubmitButton {
		max-width: 500px;
		min-width: 0;
		width: 100%;
	}
}

@media screen and (min-width: 551px) {
	#CheckoutForm .FormItem input:not([type="checkbox"]):not([type="radio"]),
	#CheckoutForm select {
		width: 100%;
	}

	#CheckoutForm .GroupItem input[type="text"] {
		width: 100%;
	}

	#CheckoutForm [for="street_address"] + div,
	#CheckoutForm [for="shipping_street_address"] + div {
		flex: 1.5;
	}

	#CheckoutForm [for="street_address"] + div + div,
	#CheckoutForm [for="shipping_street_address"] + div + div {
		flex: .5;
	}

	#CheckoutForm [for="company"] + div {
		flex: 2;
	}

	#CheckoutForm [for="firstname"] + div,
	#CheckoutForm [for="shipping_firstname"] + div {
		flex: 0 0 calc(50% - 1rem);
	}
}

@media screen and (min-width: 801px) {
	#CheckoutForm .ContentSection {
		background-color: var(--background-color);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		padding: 2rem;
	}
}

/*------------------------------------------------------------------------------*/
/* Checkout Required Label & Form Error
/*------------------------------------------------------------------------------*/

#CheckoutForm .GroupItem.required label::after, 
#CheckoutForm .GroupItem.required .label::after,
#CheckoutForm .FormItem.required label::after,
#CheckoutForm .FormItem.required .label::after {
	content: '';
}

#CheckoutForm .FormItem:not(.required) > label:not(.InlineCheck)::after,
#CheckoutForm .GroupItem:not(.required) label::after {
	content: '(' var(--error-message-optional) ')';
	font-weight: normal;
	margin-left: .5rem;
	text-transform: lowercase;
}

#CheckoutForm .FormError > label:not(.InlineCheck)::after {
	content: '(' var(--error-message-required) ')';
}