/*
 * 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;
}

/* iti wraps the input in a <div class="iti">, breaking the sibling
   combinator in the global `.form-control.fill ~ .float-label` lift
   rule (in styles.min.css). Use :has() to lift the label when any
   descendant input has the .fill class, regardless of wrapper depth.
   TODO: align with the global float-label system — see backlog. */
.login-block .form-group:has(.form-control.fill) .float-label {
	top: -14px;
	font-size: 11px;
}

/* 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); }