/* UX2 F10: "Email me a sign-in link". Authored in px (html{font-size:10px}); every text node sets its own
   family because legacy `p`/`button` rules outrank inheritance. Revert: delete with inc/ux2/f10-magic-link.php. */

.sb-ux2-ml,
.sb-ux2-ml *,
.sb-ux2-ml-sent,
.sb-ux2-ml-sent *,
.sb-ux2-ml-confirm,
.sb-ux2-ml-confirm * {
	box-sizing: border-box;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
	letter-spacing: normal;
}

.sb-ux2-ml[hidden] { display: none !important; }

/* Redesign 29 Oct: one secondary (outline) button that matches "Log in with Salesforce" in each form,
   placed with it below the password sign-in, plus one muted helper line. No box, no second primary. */
.sb-ux2-ml { margin: 12px 0 0; }

.sb-ux2-ml button.sb-ux2-ml__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 41px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid #ea6e40 !important;
	border-radius: 3px !important;
	background: #fff !important;
	color: #c24b14 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.sb-ux2-ml button.sb-ux2-ml__btn svg { flex: none; }
.sb-ux2-ml button.sb-ux2-ml__btn:hover { background: #fdf3ee !important; }
.sb-ux2-ml button.sb-ux2-ml__btn:focus-visible { outline: 2px solid #000080 !important; outline-offset: 2px; }
.sb-ux2-ml button.sb-ux2-ml__btn[disabled] { opacity: .7; cursor: default; }

.sb-ux2-ml p.sb-ux2-ml__note {
	margin: 6px 0 0;
	padding: 0;
	text-align: center;
	font-size: 13px !important;
	line-height: 18px !important;
	font-weight: 400 !important;
	color: #58677e;
}

.sb-ux2-ml p.sb-ux2-ml__err,
.sb-ux2-ml-sent p.sb-ux2-ml-sent__err {
	margin: 6px 0 0;
	text-align: center;
	font-size: 13px !important;
	line-height: 18px !important;
	font-weight: 500 !important;
	color: #b42318;
}
.sb-ux2-ml p.sb-ux2-ml__err[hidden],
.sb-ux2-ml-sent p.sb-ux2-ml-sent__err[hidden] { display: none; }

/* Polish 29 Oct: the error takes the helper line's place instead of stacking a second small centred line
   under it; typing clears the error and the helper returns. Short lines wrap evenly (no lone "minutes."). */
.sb-ux2-ml:has(p.sb-ux2-ml__err:not([hidden])) p.sb-ux2-ml__note { display: none; }
.sb-ux2-ml p.sb-ux2-ml__note,
.sb-ux2-ml p.sb-ux2-ml__err,
.sb-ux2-ml-sent p.sb-ux2-ml-sent__text,
.sb-ux2-ml-sent p.sb-ux2-ml-sent__hint,
.sb-ux2-ml-sent p.sb-ux2-ml-sent__err { text-wrap: balance; }

/* Dialog: same geometry as its Salesforce button (35px, 8px radius, 14px/600 ink). */
.sb-ux2-ml.sb-ux2-ml--dialog { margin: 10px 0 0; }
.sb-ux2-ml.sb-ux2-ml--dialog button.sb-ux2-ml__btn {
	min-height: 35px;
	padding: 6px 14px;
	border-color: #c24b14 !important;
	border-radius: 8px !important;
	color: #1a1a40 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: 600 !important;
}
.sb-ux2-ml.sb-ux2-ml--dialog button.sb-ux2-ml__btn svg { color: #c24b14; }

.sb-ux2-ml-confirm button.sb-ux2-ml__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 0 !important;
	border-radius: 6px !important;
	background: #c24b14 !important;
	color: #fff !important;
	font-size: 15px !important;
	line-height: 20px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.sb-ux2-ml-confirm button.sb-ux2-ml__btn:hover { background: #a33e10 !important; }
.sb-ux2-ml-confirm button.sb-ux2-ml__btn:focus-visible { outline: 2px solid #000080 !important; outline-offset: 2px; }

/* "Check your inbox" */
.sb-ux2-ml-sent {
	margin: 0 0 16px;
	padding: 24px;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	background: #fff;
	text-align: center;
	color: #1a1a40;
}
/* No side padding in the dialog: its Resend button was inset 8px from every other full-width button there. */
.sb-ux2-ml-sent.sb-ux2-ml-sent--dialog { padding: 20px 0 4px; border: 0; }
.sb-ux2-ml-sent .sb-ux2-ml-sent__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #ecebf7;
	color: #000080;
}
.sb-ux2-ml-sent p.sb-ux2-ml-sent__title {
	margin: 10px 0 6px;
	padding: 0;
	font-size: 18px !important;
	line-height: 26px !important;
	font-weight: 600 !important;
	color: #1a1a40;
	outline: none;
}
.sb-ux2-ml-sent p.sb-ux2-ml-sent__text {
	margin: 0 0 10px;
	font-size: 15px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	color: #1a1a40;
	overflow-wrap: anywhere;
}
.sb-ux2-ml-sent p.sb-ux2-ml-sent__text strong { font-weight: 600 !important; }
.sb-ux2-ml-sent p.sb-ux2-ml-sent__hint {
	margin: 0 0 16px;
	font-size: 13px !important;
	line-height: 18px !important;
	font-weight: 400 !important;
	color: #58677e;
}
.sb-ux2-ml-sent button.sb-ux2-ml-sent__resend {
	display: block;
	width: 100%;
	min-height: 40px;
	margin: 0 0 12px;
	padding: 8px 16px;
	border: 1px solid #c24b14 !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: #1a1a40 !important;
	font-size: 15px !important;
	line-height: 20px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.sb-ux2-ml-sent button.sb-ux2-ml-sent__resend[disabled] { opacity: .6; cursor: default; }
.sb-ux2-ml-sent button.sb-ux2-ml-sent__resend:not([disabled]):hover { background: #fdf3ee !important; }

/* Polish 29 Oct: Resend is the same secondary button as "Email me a sign-in link" in each place, rather
   than a third style (6px radius, 15px/600). My Account: 3px, 16px/400 orange. Dialog: 8px, 14px/600 ink. */
.sb-ux2-ml-sent:not(.sb-ux2-ml-sent--dialog) button.sb-ux2-ml-sent__resend {
	min-height: 41px;
	border-color: #ea6e40 !important;
	border-radius: 3px !important;
	color: #c24b14 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
}
.sb-ux2-ml-sent.sb-ux2-ml-sent--dialog button.sb-ux2-ml-sent__resend {
	min-height: 35px;
	padding: 6px 14px;
	border-radius: 8px !important;
	font-size: 14px !important;
	line-height: 20px !important;
}
.sb-ux2-ml-sent button.sb-ux2-ml-sent__back {
	display: inline-block;
	margin: 0;
	padding: 4px 2px;
	border: 0 !important;
	background: transparent !important;
	color: #000080 !important;
	font-size: 15px !important;
	line-height: 20px !important;
	font-weight: 600 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.sb-ux2-ml-sent button:focus-visible { outline: 2px solid #000080 !important; outline-offset: 2px; }

/* My Account's legacy `.woocommerce-page.woocommerce-account #fl-main-content button {… !important}` (1,2,1)
   paints every button #ea6e40 with a border; these (1,3,1) rules take the buttons back. */
.woocommerce-account #fl-main-content .sb-ux2-ml button.sb-ux2-ml__btn {
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid #ea6e40 !important;
	color: #c24b14 !important;
}
.woocommerce-account #fl-main-content .sb-ux2-ml button.sb-ux2-ml__btn:hover {
	background: #fdf3ee !important;
	background-color: #fdf3ee !important;
}
.woocommerce-account #fl-main-content .sb-ux2-ml-confirm button.sb-ux2-ml__btn {
	background: #c24b14 !important;
	background-color: #c24b14 !important;
	border: 0 !important;
	color: #fff !important;
}
.woocommerce-account #fl-main-content .sb-ux2-ml-confirm button.sb-ux2-ml__btn:hover {
	background: #a33e10 !important;
	background-color: #a33e10 !important;
}
.woocommerce-account #fl-main-content .sb-ux2-ml-sent button.sb-ux2-ml-sent__resend,
.woocommerce-account #fl-main-content .sb-ux2-ml-sent button.sb-ux2-ml-sent__resend:hover {
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid #ea6e40 !important;
	color: #c24b14 !important;
}
.woocommerce-account #fl-main-content .sb-ux2-ml-sent button.sb-ux2-ml-sent__resend:not([disabled]):hover {
	background: #fdf3ee !important;
	background-color: #fdf3ee !important;
}
.woocommerce-account #fl-main-content .sb-ux2-ml-sent button.sb-ux2-ml-sent__back,
.woocommerce-account #fl-main-content .sb-ux2-ml-sent button.sb-ux2-ml-sent__back:hover {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	color: #000080 !important;
}

/* Link-landing card on /my-account/?sb_ml=... */
.sb-ux2-ml-confirm {
	max-width: 560px;
	margin: 0 auto 24px;
	padding: 20px 24px;
	border: 1px solid #c24b14;
	border-radius: 8px;
	background: #fff;
	color: #1a1a40;
}
.sb-ux2-ml-confirm p.sb-ux2-ml-confirm__title {
	margin: 0 0 4px;
	font-size: 18px !important;
	line-height: 26px !important;
	font-weight: 600 !important;
	color: #1a1a40;
}
.sb-ux2-ml-confirm p.sb-ux2-ml-confirm__text {
	margin: 0 0 14px;
	font-size: 15px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	color: #1a1a40;
}
.sb-ux2-ml-confirm form { margin: 0; }
.sb-ux2-ml-confirm button.sb-ux2-ml__btn { width: auto; min-width: 160px; }