/**
 * Shared auth card UI — login, register, password reset.
 */

html.onduty-theme-light body.page-id-115,
html.onduty-theme-light body.page-id-130,
html.onduty-theme-light body.page-id-500,
html.onduty-theme-light .onduty-auth-card {
	--od-hp-bg: #eef1f6;
	--od-hp-bg-alt: #f2f2f2;
	--od-hp-surface: #ffffff;
	--od-hp-text: #0f0f0f;
	--od-hp-heading: #012641;
	--od-hp-muted: #5c6370;
	--od-hp-border: #e3e8ef;
	--od-hp-primary: #007aff;
	--od-hp-primary-soft: #e8f3ff;
	--od-hp-shadow: 0 20px 60px rgba(1, 38, 65, 0.12);
	--od-auth-input-bg: #f8fafc;
	--od-auth-input-border: #d4dce6;
	--od-auth-input-text: #0f172a;
	--od-auth-input-placeholder: #94a3b8;
}

html.onduty-theme-dark body.page-id-115,
html.onduty-theme-dark body.page-id-130,
html.onduty-theme-dark body.page-id-500,
html.onduty-theme-dark .onduty-auth-card {
	--od-hp-bg: #1d1f27;
	--od-hp-bg-alt: #272a33;
	--od-hp-surface: #272a33;
	--od-hp-text: #fafbfc;
	--od-hp-heading: #fafbfc;
	--od-hp-muted: #c9c9c9;
	--od-hp-border: rgba(255, 255, 255, 0.12);
	--od-hp-primary: #007aff;
	--od-hp-primary-soft: rgba(0, 122, 255, 0.16);
	--od-hp-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	--od-auth-input-bg: #222630;
	--od-auth-input-border: rgba(255, 255, 255, 0.14);
	--od-auth-input-text: #f8fafc;
	--od-auth-input-placeholder: #94a3b8;
}

body.page-id-115 .onduty-login-standalone.onduty-app-shell,
body.page-id-130 .onduty-register-standalone.onduty-app-shell,
body.page-id-500 .onduty-password-reset-standalone.onduty-app-shell {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: calc(100vh - var(--od-header-height, 88px) - 32px);
	padding: 32px 16px 56px;
	background-color: var(--od-hp-bg) !important;
	background-image: none !important;
}

body.page-id-115 .onduty-login-standalone .onduty-fleet-float,
body.page-id-115 .onduty-login-standalone .onduty-fleet-pin,
body.page-id-115 .onduty-login-standalone .onduty-courier-scene,
body.page-id-130 .onduty-register-standalone .onduty-fleet-float,
body.page-id-130 .onduty-register-standalone .onduty-fleet-pin,
body.page-id-130 .onduty-register-standalone .onduty-courier-scene,
body.page-id-500 .onduty-password-reset-standalone .onduty-fleet-float,
body.page-id-500 .onduty-password-reset-standalone .onduty-fleet-pin,
body.page-id-500 .onduty-password-reset-standalone .onduty-courier-scene {
	display: none !important;
}

body.page-id-115 .login-register-wrapper.onduty-login-page,
body.page-id-130 .login-register-wrapper.onduty-register-page,
body.page-id-500 .password-reset-wrapper {
	width: 100%;
	max-width: min(820px, 100%);
	margin: 0 auto;
	padding: 0;
	background: transparent !important;
}

.onduty-auth-card {
	width: 100%;
	opacity: 1;
	transform: none;
	animation: none !important;
}

.onduty-auth-card__panel {
	position: relative;
	width: 100%;
	background: var(--od-hp-surface);
	border: 1px solid var(--od-hp-border);
	border-radius: 24px;
	box-shadow: var(--od-hp-shadow);
	overflow: hidden;
}

.onduty-auth-card__accent {
	height: 4px;
	background: linear-gradient(90deg, #007aff 0%, #00a3ff 50%, #007aff 100%);
}

.onduty-auth-card__inner {
	padding: 28px 32px 32px;
}

.onduty-auth-card__progress {
	margin-bottom: 24px;
}

.onduty-auth-card__progress-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--od-hp-muted);
	margin-bottom: 10px;
}

.onduty-auth-card__progress-track {
	height: 6px;
	background: var(--od-hp-bg-alt);
	border-radius: 99px;
	overflow: hidden;
}

.onduty-auth-card__progress-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--od-hp-primary);
	border-radius: 99px;
}

.onduty-auth-card__intro {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--od-hp-border);
}

.onduty-auth-card__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 122, 255, 0.28);
}

.onduty-auth-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.onduty-auth-card__intro-copy {
	min-width: 0;
	flex: 1;
}

.onduty-auth-card__qtag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--od-hp-primary);
	background: var(--od-hp-primary-soft);
	padding: 5px 12px;
	border-radius: 99px;
	margin: 0 0 10px;
}

.onduty-auth-card .od-required-mark,
.onduty-auth-card .wpforms-required-label {
	color: #ff3b30 !important;
	font-weight: 700;
	margin-left: 2px;
}

.onduty-auth-card .register-wrapper,
.onduty-auth-card .login-wrapper,
.onduty-auth-card .onduty-auth-card__body {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	max-width: none;
}

.onduty-auth-card h2.wizard-auth-title,
.onduty-auth-card h2.wizard-register-title,
.onduty-auth-card h2.od-app-welcome-heading {
	text-align: left !important;
	margin: 0 0 8px !important;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: var(--od-hp-heading) !important;
}

.onduty-auth-card .wizard-auth-subtitle,
.onduty-auth-card .wizard-register-subtitle {
	text-align: left !important;
	margin: 0 !important;
	max-width: none !important;
	font-size: 15px;
	line-height: 1.6;
	color: var(--od-hp-muted) !important;
}

.onduty-auth-card .register-from-wrapper,
.onduty-auth-card .login-from-wrapper {
	width: 100%;
	max-width: none;
	margin: 0;
}

.onduty-auth-card .from-field-wrapper {
	width: auto !important;
	margin-bottom: 20px !important;
	position: relative;
}

.onduty-auth-card .from-field-wrapper label,
.onduty-auth-card .wpforms-field-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--od-hp-muted) !important;
}

.onduty-auth-card .from-field-wrapper:not(.from-field-wrapper--phone) input:not([type="hidden"]),
.onduty-auth-card input[type="text"],
.onduty-auth-card input[type="email"],
.onduty-auth-card input[type="password"],
.onduty-auth-card input[type="tel"],
.onduty-auth-card .onduty-otp-input {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--od-auth-input-text) !important;
	background: var(--od-auth-input-bg) !important;
	border: 1px solid var(--od-auth-input-border) !important;
	border-radius: 12px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

html.onduty-theme-dark .onduty-auth-card .from-field-wrapper:not(.from-field-wrapper--phone) input:not([type="hidden"]),
html.onduty-theme-dark .onduty-auth-card input[type="text"],
html.onduty-theme-dark .onduty-auth-card input[type="email"],
html.onduty-theme-dark .onduty-auth-card input[type="password"],
html.onduty-theme-dark .onduty-auth-card input[type="tel"] {
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.onduty-auth-card input::placeholder {
	color: var(--od-auth-input-placeholder);
	opacity: 1;
}

.onduty-auth-card .from-field-wrapper:not(.from-field-wrapper--phone) input:hover:not(:focus):not(:focus-visible),
.onduty-auth-card input[type="text"]:hover:not(:focus),
.onduty-auth-card input[type="email"]:hover:not(:focus),
.onduty-auth-card input[type="password"]:hover:not(:focus) {
	border-color: color-mix(in srgb, var(--od-hp-primary) 35%, var(--od-auth-input-border)) !important;
}

.onduty-auth-card .from-field-wrapper input:focus,
.onduty-auth-card .from-field-wrapper input:focus-visible,
.onduty-auth-card input[type="text"]:focus,
.onduty-auth-card input[type="email"]:focus,
.onduty-auth-card input[type="password"]:focus {
	outline: none;
	border-color: var(--od-hp-primary) !important;
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18) !important;
}

.onduty-auth-card--register .register-from-wrapper form,
.onduty-auth-card--register #on-duty-register-form {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	align-items: start;
	max-width: none !important;
	margin: 0 !important;
	width: 100%;
}

.onduty-auth-card--register .from-field-wrapper {
	align-self: start;
	margin-bottom: 0 !important;
}

.onduty-auth-card--register .field-btn-wrapper.wizard-btn-wrapper {
	margin-top: 8px;
}

.onduty-auth-card--register .field-btn-wrapper.wizard-btn-wrapper,
.onduty-auth-card--register p.account-wrapper {
	grid-column: 1 / -1;
	width: 100% !important;
}

.onduty-auth-card span.toggle-password {
	position: absolute;
	top: 38px;
	right: 14px;
	bottom: auto;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
	z-index: 2;
}

.onduty-auth-card .from-field-wrapper:has(.toggle-password) input {
	padding-right: 46px;
}

/* Phone field */
.onduty-auth-card .from-field-wrapper--phone .iti.iti--allow-dropdown,
.onduty-auth-card .register-from-wrapper .iti.iti--allow-dropdown.iti--show-flags {
	display: block;
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--od-auth-input-border) !important;
	border-radius: 12px !important;
	background: var(--od-auth-input-bg) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.onduty-auth-card .from-field-wrapper--phone .iti.iti--allow-dropdown:focus-within {
	border-color: var(--od-hp-primary) !important;
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18) !important;
}

.onduty-auth-card .register-from-wrapper .iti input,
.onduty-auth-card .register-from-wrapper .iti input.iti__tel-input,
.onduty-auth-card .register-from-wrapper .iti input[type="tel"] {
	width: 100% !important;
	min-height: 46px !important;
	height: 48px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-right: 16px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--od-auth-input-text) !important;
	font-size: 15px !important;
}

.onduty-auth-card .from-field-wrapper--phone .iti__selected-dial-code {
	margin-left: 2px;
	margin-right: 6px;
	padding-right: 10px;
	border-right: 1px solid var(--od-auth-input-border);
	color: var(--od-auth-input-text) !important;
	font-size: 15px;
	font-weight: 600;
}

.onduty-auth-card .register-from-wrapper .iti__selected-country,
body .onduty-auth-card .iti--allow-dropdown .iti__country-container .iti__selected-country {
	background: transparent !important;
	border: none !important;
}

/* Login mode tabs — active must stay visible in light + dark (surface === track in dark) */
.onduty-auth-card .onduty-login-mode-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	padding: 4px;
	border-radius: 12px;
	background: var(--od-hp-bg-alt);
	border: 1px solid var(--od-hp-border);
}

.onduty-auth-card .onduty-login-mode {
	flex: 1;
	min-height: 40px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--od-hp-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.onduty-auth-card .onduty-login-mode .od-i18n {
	color: inherit;
	font-weight: inherit;
}

.onduty-auth-card .onduty-login-mode:not(.is-active) {
	border-color: var(--od-hp-border);
}

.onduty-auth-card .onduty-login-mode.is-active {
	background: var(--od-hp-primary) !important;
	border-color: var(--od-hp-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
}

.onduty-auth-card .onduty-login-mode:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28);
}

.onduty-auth-card .forgot-password-field {
	margin-top: -8px;
	margin-bottom: 16px !important;
	text-align: right;
}

.onduty-auth-card .forgot-password-btn {
	color: var(--od-hp-primary);
	font-size: 13px;
	text-decoration: none;
}

.onduty-auth-card .onduty-send-login-otp-btn {
	width: 100%;
	min-height: 44px;
	border-radius: 12px;
	border: 1px solid var(--od-auth-input-border);
	background: var(--od-hp-primary-soft);
	color: var(--od-hp-primary);
	font-weight: 600;
	cursor: pointer;
}

.onduty-auth-card .register-btn.next-btn,
.onduty-auth-card .login-btn.next-btn,
.onduty-auth-card .wpforms-submit {
	width: 100%;
	max-width: 320px;
	min-height: 50px;
	margin: 8px auto 0;
	display: block;
	font-size: 16px;
	font-weight: 600;
	border-radius: 35px !important;
	box-shadow: none;
}

.onduty-auth-card .register-btn.next-btn:hover:not(:disabled),
.onduty-auth-card .login-btn.next-btn:hover:not(:disabled),
.onduty-auth-card .wpforms-submit:hover {
	box-shadow: none;
}

.onduty-auth-card p.account-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	margin-top: 20px;
	font-size: 15px;
	color: var(--od-hp-muted) !important;
}

.onduty-auth-card p.account-wrapper .wizard-auth-hint,
.onduty-auth-card p.account-wrapper .login-form-btn,
.onduty-auth-card p.account-wrapper .register-form-btn,
.onduty-auth-card p.account-wrapper .login-now-link,
.onduty-auth-card p.account-wrapper .register-now-link {
	display: inline;
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.onduty-auth-card p.account-wrapper a.login-form-btn,
.onduty-auth-card p.account-wrapper a.register-form-btn,
.onduty-auth-card p.account-wrapper a.login-now-link,
.onduty-auth-card p.account-wrapper a.register-now-link {
	color: var(--od-hp-primary) !important;
	font-weight: 600;
	text-decoration: underline;
}

/* Auth card i18n — one language at a time (do not force display on all .od-i18n) */
.onduty-auth-card .od-i18n[hidden] {
	display: none !important;
}

html[data-onduty-lang="en"] .onduty-auth-card .od-i18n[data-lang="de"],
html:not([data-onduty-lang="en"]) .onduty-auth-card .od-i18n[data-lang="en"] {
	display: none !important;
}

html[data-onduty-lang="en"] .onduty-auth-card .od-i18n[data-lang="en"],
html:not([data-onduty-lang="en"]) .onduty-auth-card .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .onduty-auth-card .od-i18n[data-lang="de"] {
	visibility: visible !important;
}

html[data-onduty-lang="en"] .onduty-auth-card p.account-wrapper a .od-i18n[data-lang="en"],
html:not([data-onduty-lang="en"]) .onduty-auth-card p.account-wrapper a .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .onduty-auth-card p.account-wrapper a .od-i18n[data-lang="de"],
html[data-onduty-lang="en"] .onduty-auth-card .login-btn .od-i18n[data-lang="en"],
html:not([data-onduty-lang="en"]) .onduty-auth-card .login-btn .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .onduty-auth-card .login-btn .od-i18n[data-lang="de"],
html[data-onduty-lang="en"] .onduty-auth-card .register-btn .od-i18n[data-lang="en"],
html:not([data-onduty-lang="en"]) .onduty-auth-card .register-btn .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .onduty-auth-card .register-btn .od-i18n[data-lang="de"],
html[data-onduty-lang="en"] .onduty-auth-card .password-reset-back a .od-i18n[data-lang="en"],
html:not([data-onduty-lang="en"]) .onduty-auth-card .password-reset-back a .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .onduty-auth-card .password-reset-back a .od-i18n[data-lang="de"] {
	display: inline !important;
	background: transparent !important;
}

.onduty-auth-card .password-strength {
	margin-top: 8px;
	min-height: 24px;
}

.onduty-auth-card #password_strength_text {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 999px;
	border: 1px solid transparent;
}

.onduty-auth-card #password_strength_text.password-weak {
	color: #b45309 !important;
	background: rgba(245, 158, 11, 0.14) !important;
	border-color: rgba(245, 158, 11, 0.35) !important;
}

.onduty-auth-card #password_strength_text.password-medium {
	color: #d97706 !important;
	background: rgba(245, 158, 11, 0.18) !important;
	border-color: rgba(245, 158, 11, 0.4) !important;
}

html.onduty-theme-dark .onduty-auth-card #password_strength_text.password-weak,
html.onduty-theme-dark .onduty-auth-card #password_strength_text.password-medium {
	color: #fcd34d !important;
	background: rgba(245, 158, 11, 0.16) !important;
	border-color: rgba(251, 191, 36, 0.42) !important;
}

.onduty-auth-card #password_strength_text.password-strong {
	color: #059669 !important;
	background: rgba(16, 185, 129, 0.14) !important;
	border-color: rgba(16, 185, 129, 0.35) !important;
}

html.onduty-theme-dark .onduty-auth-card #password_strength_text.password-strong {
	color: #6ee7b7 !important;
	background: rgba(52, 211, 153, 0.14) !important;
	border-color: rgba(52, 211, 153, 0.38) !important;
}

/* Unify every auth input — overrides legacy register/login CSS + browser autofill */
html.onduty-theme-dark .onduty-auth-card .register-from-wrapper input,
html.onduty-theme-light .onduty-auth-card .register-from-wrapper input,
html.onduty-theme-dark .onduty-auth-card .login-from-wrapper input,
html.onduty-theme-light .onduty-auth-card .login-from-wrapper input,
html.onduty-theme-dark .onduty-auth-card #on-duty-register-form input,
html.onduty-theme-light .onduty-auth-card #on-duty-register-form input,
html.onduty-theme-dark .onduty-auth-card #on-duty-login-form input,
html.onduty-theme-light .onduty-auth-card #on-duty-login-form input {
	color: var(--od-auth-input-text) !important;
	background-color: var(--od-auth-input-bg) !important;
	border: 1px solid var(--od-auth-input-border) !important;
	-webkit-text-fill-color: var(--od-auth-input-text) !important;
	caret-color: var(--od-auth-input-text);
}

.onduty-auth-card input:-webkit-autofill,
.onduty-auth-card input:-webkit-autofill:hover,
.onduty-auth-card input:-webkit-autofill:focus,
.onduty-auth-card input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--od-auth-input-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--od-auth-input-bg) inset !important;
	-webkit-text-fill-color: var(--od-auth-input-text) !important;
	caret-color: var(--od-auth-input-text);
	transition: background-color 99999s ease-in-out 0s;
}

/* WPForms password reset inside card */
.onduty-auth-card .wpforms-container {
	margin: 0;
	padding: 0;
	width: 100%;
}

.onduty-auth-card div#wpforms-496,
.onduty-auth-card form#wpforms-form-496 {
	width: 100%;
	max-width: none;
	margin: 0;
}

.onduty-auth-card .wpforms-field {
	margin-bottom: 20px;
	padding: 0;
}

.onduty-auth-card .wpforms-submit-container {
	margin-top: 8px;
	padding: 0;
	text-align: center;
}

.onduty-auth-card *,
.onduty-auth-card *::before,
.onduty-auth-card *::after {
	animation: none !important;
}

@media (max-width: 991px) {
	body.page-id-115 .onduty-login-standalone.onduty-app-shell,
	body.page-id-130 .onduty-register-standalone.onduty-app-shell,
	body.page-id-500 .onduty-password-reset-standalone.onduty-app-shell {
		padding: 20px 12px 40px;
	}

	.onduty-auth-card__inner {
		padding: 22px 20px 24px;
	}

	.onduty-auth-card__intro {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
		margin-bottom: 22px;
		padding-bottom: 20px;
	}

	.onduty-auth-card__intro-copy {
		text-align: center;
	}

	.onduty-auth-card h2.wizard-auth-title,
	.onduty-auth-card h2.wizard-register-title,
	.onduty-auth-card h2.od-app-welcome-heading,
	.onduty-auth-card .wizard-auth-subtitle,
	.onduty-auth-card .wizard-register-subtitle {
		text-align: center !important;
	}

	.onduty-auth-card h2.wizard-auth-title .od-i18n,
	.onduty-auth-card h2.wizard-register-title .od-i18n,
	.onduty-auth-card h2.od-app-welcome-heading .od-i18n {
		display: block;
		text-align: center;
	}

	.onduty-auth-card--register .register-from-wrapper form,
	.onduty-auth-card--register #on-duty-register-form {
		grid-template-columns: 1fr !important;
	}

	.onduty-auth-card .register-btn.next-btn,
	.onduty-auth-card .login-btn.next-btn,
	.onduty-auth-card .wpforms-submit {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.onduty-auth-card__panel {
		border-radius: 18px;
	}

	.onduty-auth-card__icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}
}