/* Wrapper that matches input width */
.password-strength-meter-wrappers {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
}

.password-strength-meter-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	width: 25%;
	box-sizing: border-box;
	max-width: 100%;
}

/* Strength bar container */
.password-with-strength-field--indicator {
	flex-grow: 1;
	height: 14px;
	background: #d6d6d6;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
}

/* Inner bar with dynamic color + width */
.password-with-strength-field--indicator-inner {
	height: 100%;
	transition: width 0.3s ease, background 0.3s ease;
	border-radius: 4px;
}

/* Color codes by strength */
.password-with-strength-field--indicator-inner[data-strength="0"] {
	width: 20%;
	background: #ff0000;
}

.password-with-strength-field--indicator-inner[data-strength="1"] {
	width: 40%;
	background: #ff8800;
}

.password-with-strength-field--indicator-inner[data-strength="2"] {
	width: 60%;
	background: #ffff00;
}

.password-with-strength-field--indicator-inner[data-strength="3"] {
	width: 80%;
	background: #aaff00;
}

.password-with-strength-field--indicator-inner[data-strength="4"] {
	width: 100%;
	background: #00ff00;
}

/* Label beside the bar */
.password-with-strength-field--indicator-text__js {
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Reason / Suggestions */
.password-with-strength-field--reason {
	font-size: 12px;
	color: #555;
	margin-top: 6px;
}

.password-with-strength-field--reason__hidden {
	display: none;
}

.password-with-strength-field--warning-inner {
	color: #ff8800;
	font-weight: bold;
}

.password-with-strength-field--warning-inner:before {
	content: "\f071";
	font-family: FontAwesome;
	display: inline;
	padding-right: 4px;
}