/*
 * The strength meter of the ONE password control (#76) — reset page and
 * checkout alike. Enqueued by PasswordField::enqueue(), never by a page.
 *
 * ⚠️ Every rule is scoped to `#pass-strength-result`, NEVER to a bare
 * `.strength-result`. WordPress's user-profile.js copies the meter's class list
 * onto the INPUT (measured on the reset page: the input reads
 * `input strength-result empty strong`), so a bare-class rule styles the
 * password field as well. Checkout had exactly that rule —
 * `.strength-result.empty { display:none }` — which would have hidden the
 * password box itself until the renter typed.
 *
 * Moved verbatim from login.css, including its two `!important`s, so the reset
 * page renders exactly as it did. One deliberate change: `.short`.
 */

.fleetform-password-strength-wrapper {
    text-align: center;
    margin-top: 5px;
}

#pass-strength-result {
  display: none !important; /* Force hidden by default */
  padding: 6px 16px;
  border-radius: 8px;
  margin-top: 5px;
  width: 100%;
  font-weight: bold;
  font-size: 15px;
  background-color: #999;
  color: var(--fleet-text-white, #ffffff);
  text-align: center;
  transition: background-color 0.3s ease;
}

/* When JS removes .empty, override to show */
#pass-strength-result:not(.empty) {
  display: inline-block !important;
}

/*
 * Strength level backgrounds.
 *
 * `.short` is NEW. WordPress labels the weakest passwords "Very weak" and gives
 * them `.short`, and login.css had no rule for it — so "Very weak" rendered in
 * the neutral grey while the stronger "Weak" rendered red (measured on the reset
 * page: rgb(153,153,153) vs rgb(179,0,0)). The worst reading looked the least
 * alarming. Both are now refused on submit, and both read red.
 */
#pass-strength-result.short { background-color: #b30000; }
#pass-strength-result.bad { background-color: #b30000; }
#pass-strength-result.weak { background-color: #e69500; }
#pass-strength-result.good { background-color: #cccc00; color: #000; }
#pass-strength-result.strong { background-color: #009900; }

/*
 * The show/hide toggle — EVERY state painted here, by the control (#76).
 *
 * Ethan, 2026-09-20, with the reset page's "Hide" button in Elementor pink:
 * "elementor theme pink still leaking though which is what that armor was
 * supposed to prevent but right now it's just preventing the eye wrongly and
 * not preventing the pink".
 *
 * Two holes in the core theme armour meet on this one button:
 *
 *   PINK  The armour deliberately skips anything carrying WP's `.button` class,
 *         leaving that family to the admin sheet. The admin sheet IS loaded on
 *         the login, reset and checkout pages — but 9 of its 12 `.button` hover
 *         rules are gated on `body.admin-theme-enabled`, and those pages' body
 *         does not carry it (measured: `fleetform-login-page fleetform-ui`). So
 *         on an injected public page NEITHER sheet owns `.button`, and the
 *         theme's `[type=button]:hover/:focus` (0-2-0, loaded after us, wins
 *         every tie) painted the toggle pink. Both pages' toggle rules were
 *         0-2-0 or lower and painted the resting state only.
 *   EYE   The armour's typography floor sets `font-family` on every `span`
 *         inside a FleetForm surface (0-3-0), and the icon IS a span, so
 *         dashicons' own `.dashicons { font-family: dashicons }` (0-1-0) lost
 *         and the eye drew as an empty box in the system font.
 *
 * Both belong fixed in core, for every button and icon — filed separately. This
 * block makes the control correct regardless: states at 0-5-0 beat the theme's
 * 0-2-0, and the icon at 0-4-0 beats the armour's 0-3-0. No `!important`.
 *
 * The foreground is a token so each page keeps its own resting colour (white on
 * the reset page, gold on checkout) — and that colour now HOLDS on hover and
 * focus instead of being replaced by the theme's.
 */
.user-pass1-wrap .wp-pwd .wp-hide-pw.wp-hide-pw,
.user-pass1-wrap .wp-pwd .wp-hide-pw.wp-hide-pw:hover,
.user-pass1-wrap .wp-pwd .wp-hide-pw.wp-hide-pw:focus,
.user-pass1-wrap .wp-pwd .wp-hide-pw.wp-hide-pw:focus-visible,
.user-pass1-wrap .wp-pwd .wp-hide-pw.wp-hide-pw:active {
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    color: var(--ff-pw-toggle-fg, var(--fleet-primary-color, #e0a241));
}

/* Keyboard users still need to see where focus is — just not in pink. */
.user-pass1-wrap .wp-pwd .wp-hide-pw.wp-hide-pw:focus-visible {
    outline: 2px solid var(--ff-pw-toggle-fg, var(--fleet-primary-color, #e0a241));
    outline-offset: 2px;
}

.user-pass1-wrap .wp-pwd .wp-hide-pw .dashicons {
    font-family: dashicons;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: middle;
}