/**
 * Styling for [formulary_login_form] — a dark full-bleed hero matching
 * the same visual language as the product detail elements, with its own
 * --fsl-* variable prefix so it never collides with theirs.
 *
 * Every color/background/border-color property below carries !important.
 * This is not precautionary — it's the same fix that turned out to be
 * required for the badge icons, the product image, the title font-size,
 * and the Previous/Next nav elsewhere in this plugin: Salient (or
 * whatever theme rule) has broad, equally-or-more-specific declarations
 * on plain elements like p/a/input/button, and those win over a single
 * un-flagged class selector regardless of what CSS variable it resolves
 * to. This stylesheet never had that fight fought for it since it's new
 * — this pass does that up front instead of one property at a time.
 */

.fsl-login {
	background: var(--fsl-hero-bg, #0f1e1c) !important;
	min-height: var(--fsl-hero-min-height, 100vh);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.fsl-login * {
	box-sizing: border-box;
}

.fsl-inner {
	width: 100%;
	max-width: var(--fsl-form-max-width, 420px);
}

/* Positioned against .fsl-login itself (top-left of the whole screen),
   not inline above the title inside the centered form column — the
   point of this link is to give visitors a way off the page when the
   theme's header/footer are hidden here, so it needs to read as
   page-level navigation, not part of the form. */
.fsl-back {
	position: absolute;
	top: 40px;
	left: 40px;
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--fsl-label-color, #8a9a95) !important;
	text-decoration: none;
	opacity: 0.8;
}

.fsl-back:hover {
	opacity: 1;
}

.fsl-back svg {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	flex: none !important;
	color: currentColor;
}

.fsl-title {
	font-size: var(--fsl-title-size, 36px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--fsl-title-color, #ffffff) !important;
	margin: 0 0 12px;
}

.fsl-subheading {
	font-size: var(--fsl-subheading-size, 16px);
	line-height: 1.5;
	color: var(--fsl-subheading-color, #8a9a95) !important;
	margin: 0 0 32px;
}

.fsl-error {
	font-size: 14px;
	line-height: 1.5;
	color: var(--fsl-error-color, #ff6b6b) !important;
	background: color-mix(in srgb, var(--fsl-error-color, #ff6b6b) 12%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--fsl-error-color, #ff6b6b) 40%, transparent) !important;
	border-radius: var(--fsl-field-radius, 8px);
	padding: 12px 16px;
	margin: 0 0 24px;
}

.fsl-form {
	display: flex;
	flex-direction: column;
	gap: var(--fsl-field-gap, 20px);
}

.fsl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fsl-label {
	font-size: var(--fsl-label-size, 13px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fsl-label-color, #8a9a95) !important;
}

.fsl-input {
	height: var(--fsl-input-height, 48px);
	padding: 0 16px;
	border-radius: var(--fsl-field-radius, 8px);
	border: 1px solid var(--fsl-input-border, #FEFDFD29) !important;
	background: var(--fsl-input-bg, #FEFDFD0D) !important;
	color: var(--fsl-input-text, #ffffff) !important;
	font-size: var(--fsl-input-size, 16px);
	font-family: inherit;
	width: 100%;
}

.fsl-input::placeholder {
	color: var(--fsl-label-color, #8a9a95) !important;
	opacity: 0.7;
}

.fsl-input:focus {
	outline: none;
	border-color: var(--fsl-input-focus-border, #ffffff) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.fsl-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fsl-label-size, 13px);
	color: var(--fsl-label-color, #8a9a95) !important;
	cursor: pointer;
	margin-top: -8px;
}

.fsl-remember input {
	width: 16px;
	height: 16px;
	flex: none;
	accent-color: var(--fsl-button-bg, #ffffff) !important;
}

.fsl-submit {
	height: var(--fsl-input-height, 48px);
	border-radius: var(--fsl-field-radius, 8px);
	border: none !important;
	background: var(--fsl-button-bg, #ffffff) !important;
	color: var(--fsl-button-text, #0f1e1c) !important;
	font-size: var(--fsl-button-size, 16px);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin-top: 4px;
}

.fsl-submit.fsl-submit:hover {
	background: var(--fsl-button-hover-bg, #e5e5e5) !important;
}

.fsl-lost-password {
	display: block;
	text-align: center;
	font-size: var(--fsl-label-size, 13px);
	color: var(--fsl-link-color, #ffffff) !important;
	text-decoration: none;
	opacity: 0.75;
	margin-top: 4px;
}

.fsl-lost-password:hover {
	opacity: 1;
	text-decoration: underline;
}