/**
 * OTP login panel — checkout step + My Account.
 * Matches checkout card chrome (summary / coupon): 1px border, 12px radius, no shadow.
 */

.wf-otp-step {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.wf-otp {
	--otp-border: var(--wf-border, #e8e8e8);
	--otp-text: var(--wf-text, #1a1a1a);
	--otp-muted: var(--wf-muted, #8c8c8c);
	--otp-radius: 12px;
	--otp-soft: #f7f7f7;

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-sizing: border-box;
	font-size: var(--wf-fs-md, 0.9375rem);
	line-height: var(--wf-lh, 1.55);
	color: var(--otp-text);
}

.wf-otp *,
.wf-otp *::before,
.wf-otp *::after {
	box-sizing: border-box;
}

.wf-otp__card {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 20px 18px 18px;
	border: 1px solid var(--otp-border);
	border-radius: var(--otp-radius);
	background: #fff;
	box-shadow: none;
}

.wf-otp__brand {
	display: flex;
	justify-content: center;
	margin: 0 0 14px;
}

.wf-otp__brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--otp-soft);
	color: var(--otp-text);
}

.wf-otp__head {
	margin: 0 0 12px;
	text-align: center;
}

.wf-otp__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: var(--wf-fs-lg, 1rem);
	font-weight: 800;
	line-height: var(--wf-lh-tight, 1.35);
	border: none;
	letter-spacing: -0.01em;
}

.wf-otp__hint {
	margin: 0;
	font-size: var(--wf-fs-sm, 0.875rem);
	color: var(--otp-muted);
	line-height: 1.55;
}

.wf-otp__field {
	position: relative;
	display: block;
	margin: 0 0 14px;
	text-align: start;
}

.wf-otp__label {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	z-index: 1;
	max-width: calc(100% - 24px);
	margin: 0;
	padding: 0 4px;
	border-radius: 4px;
	background: #fff;
	color: var(--otp-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	pointer-events: none;
	transform: translateY(-50%);
	transform-origin: right center;
	transition: top 0.16s ease, transform 0.16s ease, font-size 0.16s ease, color 0.16s ease, font-weight 0.16s ease;
}

.wf-otp[dir="ltr"] .wf-otp__label {
	transform-origin: left center;
}

.wf-otp__field:focus-within .wf-otp__label,
.wf-otp__field.is-filled .wf-otp__label,
.wf-otp__field:has(.wf-otp__input:not(:placeholder-shown)) .wf-otp__label {
	top: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--otp-text);
}

.wf-otp__field:focus-within .wf-otp__label {
	color: var(--wf-accent, #1a1a1a);
}

.wf-otp__input {
	width: 100%;
	min-height: 54px;
	padding: 18px 14px 8px;
	box-sizing: border-box;
}

.wf-otp__input::placeholder {
	color: transparent;
	opacity: 0;
}

body.wf-style-controls .wf-otp__input {
	width: 100%;
	min-height: 54px;
	padding: 18px 14px 8px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	font-size: 1rem;
	font-family: inherit;
	color: var(--otp-text);
	letter-spacing: 0.04em;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Beat theme (Woodmart) input chrome on OTP fields. */
html body.wf-style-controls .wf-otp input.wf-otp__input,
html body.wf-style-controls .wf-otp input.wf-otp__phone,
html body.wf-style-controls .wf-otp-step input.wf-otp__input,
html body.wf-style-controls form.checkout .wf-otp input.wf-otp__phone,
html body.wf-style-controls form.checkout .wf-otp input.wf-otp__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 54px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 18px 14px 8px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 8px !important;
	background: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--otp-text, #1a1a1a) !important;
	letter-spacing: 0.04em !important;
	text-align: start !important;
	box-sizing: border-box !important;
}

html body.wf-style-controls .wf-otp input.wf-otp__input::placeholder,
html body.wf-style-controls .wf-otp input.wf-otp__phone::placeholder,
body.wf-style-controls .wf-otp__input::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

html body.wf-style-controls .wf-otp input.wf-otp__input:focus,
html body.wf-style-controls .wf-otp input.wf-otp__phone:focus {
	border-color: var(--wf-accent, #1a1a1a) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent, #1a1a1a) 14%, transparent) !important;
	outline: none !important;
}

body.wf-style-controls .wf-otp__input:focus {
	outline: none;
	border-color: var(--wf-accent, #1a1a1a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent, #1a1a1a) 14%, transparent);
}

.wf-otp__code-wrap {
	margin: 0 0 14px;
}

html body.wf-style-controls .wf-otp button.wf-otp__verify.is-success,
html body.wf-style-controls .wf-otp .wf-otp__btn.wf-otp__verify.is-success {
	background: #1b8a4a !important;
	background-color: #1b8a4a !important;
	border-color: #1b8a4a !important;
	color: #fff !important;
	opacity: 1 !important;
}

.wf-otp__pins {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	direction: ltr;
}

html body .wf-otp input.wf-otp__pin,
html body.wf-style-controls .wf-otp input.wf-otp__pin,
html body.wf-style-controls form.checkout .wf-otp input.wf-otp__pin {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	flex: 1 1 0 !important;
	width: 48px !important;
	max-width: 56px !important;
	min-width: 0 !important;
	height: 54px !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 8px !important;
	background: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--otp-text, #1a1a1a) !important;
	font-family: inherit !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 54px !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

html body .wf-otp input.wf-otp__pin:focus,
html body.wf-style-controls .wf-otp input.wf-otp__pin:focus {
	border-color: var(--wf-accent, #1a1a1a) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent, #1a1a1a) 14%, transparent) !important;
	outline: none !important;
}

@media (max-width: 767px) {
	.wf-otp__pins {
		gap: 6px;
	}

	html body .wf-otp input.wf-otp__pin,
	html body.wf-style-controls .wf-otp input.wf-otp__pin {
		height: 48px !important;
		min-height: 48px !important;
		line-height: 48px !important;
		font-size: 1.1rem !important;
	}
}

html body.wf-style-controls .wf-otp button.wf-btn.wf-otp__btn,
html body.wf-style-controls .wf-otp .wf-otp__btn.wf-btn,
html body.wf-style-controls.wf-account-enabled .wf-account .wf-otp button.wf-otp__btn {
	display: flex !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	border-radius: var(--wf-radius-btn, 8px) !important;
	background: var(--wf-btn-bg, var(--wf-accent, #1a1a1a)) !important;
	background-color: var(--wf-btn-bg, var(--wf-accent, #1a1a1a)) !important;
	background-image: none !important;
	border: 1px solid var(--wf-btn-border, var(--wf-accent, #1a1a1a)) !important;
	color: var(--wf-btn-fg, #fff) !important;
	box-shadow: none !important;
}

html body.wf-style-controls .wf-otp button.wf-btn.wf-otp__btn:hover,
html body.wf-style-controls .wf-otp .wf-otp__btn.wf-btn:hover,
html body.wf-style-controls.wf-account-enabled .wf-account .wf-otp button.wf-otp__btn:hover {
	opacity: 0.92;
	color: var(--wf-btn-fg, #fff) !important;
	background: var(--wf-btn-bg, var(--wf-accent, #1a1a1a)) !important;
	background-color: var(--wf-btn-bg, var(--wf-accent, #1a1a1a)) !important;
}

.wf-otp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wf-otp__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: currentColor;
	border-radius: 50%;
	flex: 0 0 auto;
	animation: wf-otp-spin 0.7s linear infinite;
}

.wf-otp__btn.is-loading .wf-otp__spinner,
.wf-otp__btn[aria-busy="true"] .wf-otp__spinner {
	display: block;
}

.wf-otp__btn.is-loading,
.wf-otp__btn[aria-busy="true"] {
	opacity: 0.92;
	pointer-events: none;
	cursor: wait;
}

@keyframes wf-otp-spin {
	to {
		transform: rotate(360deg);
	}
}

.wf-otp__sent {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--wf-fs-sm, 0.875rem);
	color: var(--otp-muted);
	line-height: 1.7;
	text-align: center;
}

.wf-otp__sent-phone {
	font-weight: 700;
	color: var(--otp-text);
	unicode-bidi: isolate;
	direction: ltr;
}

html body .wf-otp button.wf-otp__change,
html body.wf-style-controls .wf-otp button.wf-otp__change,
html body .wf-otp button.wf-otp__link.wf-otp__change {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 0.15em !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--wf-accent, #1a1a1a) !important;
	font: inherit !important;
	font-size: inherit !important;
	font-weight: 700 !important;
	line-height: inherit !important;
	letter-spacing: normal !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	text-transform: none !important;
	cursor: pointer !important;
}

html body .wf-otp button.wf-otp__resend,
html body.wf-style-controls .wf-otp button.wf-otp__resend,
html body .wf-otp button.wf-otp__link.wf-otp__resend {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 12px auto 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--otp-muted, #8c8c8c) !important;
	font: inherit !important;
	font-size: var(--wf-fs-sm, 0.875rem) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: default !important;
}

html body .wf-otp button.wf-otp__resend:not(:disabled),
html body.wf-style-controls .wf-otp button.wf-otp__resend:not(:disabled) {
	color: var(--wf-accent, #1a1a1a) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	cursor: pointer !important;
}

.wf-otp__msg {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: var(--wf-fs-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.wf-otp__msg.is-error {
	background: #fff4f4;
	border: 1px solid #f0b4b0;
	color: #8a1f1b;
}

.wf-toast {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 24px;
	z-index: 100080;
	width: max-content;
	max-width: min(360px, calc(100vw - 32px));
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #1b8a4a;
	color: #fff;
	font-size: var(--wf-fs-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	box-shadow: 0 10px 28px rgba(27, 138, 74, 0.28);
	opacity: 0;
	transform: translate(-50%, 12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.wf-toast.is-success {
	background: #1b8a4a;
}

.wf-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.wf-toast[hidden] {
	display: none !important;
}

@media (max-width: 1024px) {
	.wf-toast {
		bottom: calc(var(--wf-toolbar-h, 0px) + var(--wf-mobile-bar-h, 64px) + 16px);
		z-index: 350;
	}
}

.wf-otp__guest {
	margin: 18px 0 0;
	padding-top: 4px;
	text-align: center;
}

.wf-otp__guest-sep {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: var(--wf-fs-xs, 0.8125rem);
	font-weight: 600;
	color: var(--otp-muted);
}

.wf-otp__guest-sep::before,
.wf-otp__guest-sep::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--otp-border);
}

html body.wf-style-controls .wf-otp button.wf-otp__guest-continue {
	appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--otp-border) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--otp-text) !important;
	font: inherit !important;
	font-size: var(--wf-fs-sm, 0.875rem) !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none !important;
}

html body.wf-style-controls .wf-otp button.wf-otp__guest-continue:hover {
	background: var(--otp-soft) !important;
	border-color: #d0d0d0 !important;
}

/* Guest email only when OTP login is off. */
body.wf-has-otp-step .wf-guest-email-slot,
body.wf-has-otp-step #billing_email_field {
	display: none !important;
}

.wf-otp.is-guest-continued {
	display: none;
}

.wf-otp-step .wf-otp.is-guest-continued {
	display: block;
}

.wf-account .wf-otp {
	max-width: none;
	margin: 0;
}

.wf-otp-alt-label {
	display: none;
}

@media (max-width: 1100px) {
	html body.wf-on-otp .wf-otp__send,
	html body.wf-on-otp .wf-otp__verify,
	html body.wf-on-otp .wf-otp__guest,
	html body.wf-on-otp .wf-otp button.wf-otp__send,
	html body.wf-on-otp .wf-otp button.wf-otp__verify,
	html body.wf-style-controls.wf-on-otp .wf-otp button.wf-btn.wf-otp__send,
	html body.wf-style-controls.wf-on-otp .wf-otp button.wf-btn.wf-otp__verify,
	html body.wf-style-controls.wf-on-otp .wf-otp button.wf-otp__guest-continue {
		display: none !important;
	}

	body.wf-on-otp .wf-otp__card {
		padding-bottom: 12px;
	}
}

@media (max-width: 767px) {
	.wf-otp__card {
		padding: 18px 14px 16px;
	}

	.wf-otp__brand-icon {
		width: 48px;
		height: 48px;
	}
}