/* reset base on top of existing themes without messing up colors */
*, *::before, *::after
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* outer page */
body.shopper_form
{
	min-height: 100vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0 1rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* card */
#container.container
{
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 16px;
	border: 1px solid #d6dde3;
	overflow: hidden;
	margin-top: 1rem;
}

/* empty header fix */
header:empty
{
	display: none;
}

/* logo section */
.clientLogo
{
	border-bottom: 1px solid #0000000f;
	padding: 0.5rem 2rem;
	display: flex;
	justify-content: left;
	align-items: center;
	border-radius: 10px 10px 0 0;
	min-height: 100px;
}

.clientLogo img
{
	max-width: 100px;
	max-height: 60px;
	width: auto;
	height: auto;
}

.hiddenClientLogo
{
	display: none;
}

/* main content area */
#main
{
	padding: 0;
}

/* form container */
.loginContainer
{
	padding: 1.5rem;
}

/* form heading */
.loginContainer h3
{
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 1.75rem;
}

/* field container */
.single-login-item-container
{
	margin-bottom: 1.25rem;
}

/* label */
.single-login-item-container label,
.field-header label
{
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 6px;
}

/* field header — label + show/hide row */
.field-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.field-header label
{
	margin-bottom: 0;
}

.field-hint
{
	font-size: 12px;
	color: #999;
}

/* inputs */
.input-wrap
{
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 14px;
	gap: 10px;
	background: #fff;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.input-wrap:focus-within
{
	border-color: #2e6f8f;
	box-shadow: 0 0 0 3px #2e6f8f1f;
}

/* icon */
.input-icon
{
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #bbb;
	transition: color 0.18s ease;
}

.input-wrap:focus-within .input-icon
{
	color: #2e6f8f;
}

/* input field */
.input-wrap input[type="email"],
.input-wrap input[type="password"],
.input-wrap input[type="text"]
{
	flex: 1;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none;
	font-size: 15px;
	font-family: inherit;
	color: #1a1a1a;
	background: transparent;
	/* suppress browser autofill blue highlight */
	-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
	-webkit-text-fill-color: #1a1a1a !important;
}

.input-wrap input::placeholder
{
	color: #bbb;
	font-size: 14px;
}

/* toggle switch */
.toggle-pw
{
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	box-shadow: none !important;
	text-shadow: none !important;
	min-width: 0;
	border-radius: 11px !important;
}

.toggle-track
{
	display: block;
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 11px;
	background: #ccc;
	transition: background 0.22s ease;
	pointer-events: none;
}

.toggle-thumb
{
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px #00000033;
	transition: left 0.22s ease;
	pointer-events: none;
}

.toggle-pw.is-active .toggle-track
{
	background: #2e6f8f;
}

.toggle-pw.is-active .toggle-thumb
{
	left: 19px;
}

/* form actions */
.form-actions
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 1.5rem;
}

/* primary button */
.sassie-button--primary
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	color: #fff !important;
	border: none !important;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.18s ease;
}

.sassie-button--primary:hover
{
	background: #1e5570 !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* forgot password link */
.link-forgot
{
	display: block;
	text-align: center;
	font-size: 13px;
	color: #555 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	margin-top: 0.875rem;
	cursor: pointer;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0 !important;
}

.link-forgot:hover
{
	color: #2e6f8f !important;
	text-decoration: underline !important;
}

/* announcements */
.announcements-wrap
{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 1.5rem 1.5rem;
	padding: 14px 16px;
	background: #ebf4f8;
	border-radius: 8px;
	border: 1px solid #c5dce8;
}

.announcements-icon
{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #2e6f8f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}

.clientAnnouncements.shopperAnnouncements
{
	flex: 1;
	font-size: 13px;
	color: #2e6f8f;
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: break-word;
	min-width: 0;
}

.clientAnnouncements.shopperAnnouncements strong,
.clientAnnouncements.shopperAnnouncements b
{
	color: #1a4f66;
	font-weight: 700;
}

/* alert */
.alert
{
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 1.25rem;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.alert--error
{
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #991b1b26;
}

.alert--error::before
{
	content: '!';
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #991b1b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

/* utools debug */
body.shopper_form:has(.utools_debug-output) #container.container
{
	margin-top: 3rem;
}

.utools_debug-icon a
{
	z-index: 9999 !important;
}

/* mobile < 480px */
@media (max-width: 480px)
{
	body.shopper_form
	{
		/* padding: 0; for legacy */
	}

	#container.container
	{
		max-width: 100%;
		margin-top: 1rem;
		min-height: 100vh;
	}

	.clientLogo
	{
		min-height: 80px;
		padding: 0.75rem 1.25rem;
	}

	.loginContainer
	{
		padding: 1.25rem;
	}

	.loginContainer h3
	{
		font-size: 15px;
		margin-bottom: 1.25rem;
	}

	.announcements-wrap
	{
		margin: 0 1.25rem 1.25rem;
	}
}

/* desktop — 769px+ */
@media (min-width: 769px)
{

	#container.container
	{
		max-width: 640px;
	}

	.loginContainer
	{
		padding: 2rem 2.5rem 2.5rem;
	}

	.announcements-wrap
	{
		margin: 0 2.5rem 2rem;
	}
}