/*
 * Login page baseline — intlTelInput layout fix + password-strength meter.
 * Brand-neutral defaults; children re-skin via the --rel-login-* hooks below.
 */

:root {
	--rel-login-pw-bar-bg: #eee;
	--rel-login-pw-weak: #d0021b;
	--rel-login-pw-fair: #f5a623;
	--rel-login-pw-good: #7ed321;
	--rel-login-pw-strong: #2ea44f;
}

/* intlTelInput — keep the picker visible inside the floating-label
   form-group without overlapping the bar. */
.login-block .iti {
	display: block;
	width: 100%;
}
.login-block .iti__tel-input {
	padding-left: 96px !important;
}

/* When intlTelInput is mounted, push the floating label right by the
   country-picker width so "Your Phone Number" doesn't sit behind the
   flag. Same offset as the input padding-left above. */
.login-block .iti ~ .float-label {
	left: 96px;
}

/* NOTE: the wrapped-input label LIFT (top/font-size when .fill) is now handled
   globally by the wrapper-safe :has() rules at the end of css/style.css
   (backlog #11, aligned 2026-07-15). The rule that used to live here — a
   login-only .form-group:has(.form-control.fill) .float-label band-aid — was
   removed as redundant. The `left: 96px` above stays: it is a login-specific
   intl-tel-input positional offset (push the label past the country flag),
   not part of the lift system. */

/* Password strength meter — inserted by login.js below the new-password input. */
.login-block .pw-strength {
	margin-top: 6px;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.login-block .pw-strength-bar {
	flex: 1;
	height: 4px;
	background: var(--rel-login-pw-bar-bg);
	border-radius: 2px;
	overflow: hidden;
}
.login-block .pw-strength-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--rel-login-pw-weak);
	transition: width 0.2s ease, background 0.2s ease;
}
.login-block .pw-strength[data-score="1"] .pw-strength-fill { width: 25%;  background: var(--rel-login-pw-weak); }
.login-block .pw-strength[data-score="2"] .pw-strength-fill { width: 50%;  background: var(--rel-login-pw-fair); }
.login-block .pw-strength[data-score="3"] .pw-strength-fill { width: 75%;  background: var(--rel-login-pw-good); }
.login-block .pw-strength[data-score="4"] .pw-strength-fill { width: 100%; background: var(--rel-login-pw-strong); }