/* ============================================================================
   TCF Mentor — wp-login Password Reset Styling (Chapter 4 · 2026-05-30)

   Fully restyles the wp-login.php password-reset screens so they match the
   branded checkout / confirmation pages. Same design tokens, same Inter
   font, same #005C98 blue, same graphite primary button.

   Scoped to body.login (wp-login.php only); the custom .tcfm-reset-wrapper
   container is injected by pmpro-password-reset-customizations.php via the
   login_header / login_footer hooks.

   Targeted screens:
     ?action=lostpassword       — request form
     ?action=lostpassword&...   — "check your email" confirmation
     ?action=rp                 — choose new password
     ?action=resetpass          — password updated

   File path: wp-content/mu-plugins/assets/pmpro-password-reset.css
============================================================================ */

/* ----------------------------------------------------------------------------
   1. Design tokens — page-scoped to body.login
---------------------------------------------------------------------------- */

body.login {
    --tcfm-bg:             #ffffff;
    --tcfm-surface:        #ffffff;
    --tcfm-surface-soft:   rgba(226, 237, 244, 0.45);
    --tcfm-surface-blue:   #E2EDF4;
    --tcfm-surface-grey:   #fafafa;

    --tcfm-graphite:       rgba(0, 0, 0, 0.80);
    --tcfm-graphite-hover: rgba(0, 0, 0, 0.88);

    --tcfm-brand:          #005C98;
    --tcfm-brand-deep:     #003D65;

    --tcfm-text:           #111111;
    --tcfm-text-2:         #2a2a2a;
    --tcfm-text-3:         #6b6b6b;
    --tcfm-text-4:         #9a9a9a;

    --tcfm-border:         #eaeaea;
    --tcfm-border-2:       #e5e5e5;
    --tcfm-divider:        #f0f0f0;

    --tcfm-success:        #16a34a;
    --tcfm-success-bg:     #f0fdf4;
    --tcfm-error:          #d92020;
    --tcfm-error-bg:       #fef2f2;

    --tcfm-radius:         10px;
    --tcfm-radius-lg:      14px;
    --tcfm-radius-sm:      8px;
    --tcfm-radius-pill:    999px;

    --tcfm-font-text:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    background: var(--tcfm-bg) !important;
    color: var(--tcfm-text) !important;
    font-family: var(--tcfm-font-text) !important;
}

/* ----------------------------------------------------------------------------
   2. Hide wp-login's own chrome (logo, "Back to" link, language switcher)
   so our custom brand header + footer are the only ones visible.
---------------------------------------------------------------------------- */

body.login #login h1,
body.login #login h1 a {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

body.login #backtoblog,
body.login #nav,
body.login .language-switcher,
body.login .privacy-policy-page-link {
    display: none !important;
}

/* WP injects an emoji-detection style + script element; nothing visual,
   but make sure the body has no spurious top padding from WP defaults. */
body.login {
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}

/* The outer #login container — wp-login centers it with width:320px.
   We reset to allow our 680px wrapper to take over. */
body.login #login {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------------------
   3. Our injected wrapper — centered 680px column, same as confirmation.
---------------------------------------------------------------------------- */

body.login .tcfm-reset-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 16px 64px;
    font-family: var(--tcfm-font-text);
    color: var(--tcfm-text);
    font-size: 15px;
    font-weight: 420;
    line-height: 1.55;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   4. Brand header — logo + "TCF MENTOR" wordmark, centered.
   Matches .tcfm-confirm-brand from confirmation page.
---------------------------------------------------------------------------- */

body.login .tcfm-reset-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 32px;
    text-align: center;
}

body.login .tcfm-reset-brand__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
}

body.login .tcfm-reset-brand__name {
    font-size: 21px;
    font-weight: 720;
    color: var(--tcfm-brand-deep);
    letter-spacing: 0.4px;
}

/* ----------------------------------------------------------------------------
   5. Hero — title + subtitle, centered.
---------------------------------------------------------------------------- */

body.login .tcfm-reset-hero {
    text-align: center;
    margin: 0 auto 28px;
    max-width: 540px;
}

body.login .tcfm-reset-hero__title {
    font-size: 26px;
    font-weight: 720;
    color: var(--tcfm-text);
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}

body.login .tcfm-reset-hero__subtitle {
    font-size: 15px;
    font-weight: 460;
    color: var(--tcfm-text-3);
    line-height: 1.55;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   6. The card — white surface with thin border, holds the form.
   Mirrors .pmpro_card from checkout.
---------------------------------------------------------------------------- */

body.login .tcfm-reset-card {
    background: var(--tcfm-surface);
    border: 1px solid var(--tcfm-border);
    border-radius: var(--tcfm-radius-lg);
    padding: 32px 36px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* ----------------------------------------------------------------------------
   7. Form layout — wp-login uses <form id="lostpasswordform">,
   <form id="resetpasswordform">, <form id="loginform"> for the success.
---------------------------------------------------------------------------- */

body.login form,
body.login #lostpasswordform,
body.login #resetpasswordform,
body.login #loginform {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    font-weight: 460 !important;
}

body.login form p {
    margin: 0 0 16px !important;
    font-size: 14px !important;
    color: var(--tcfm-text-3) !important;
}

body.login form p.submit {
    margin: 22px 0 0 !important;
    text-align: left !important;
}

/* ----------------------------------------------------------------------------
   8. Labels.
---------------------------------------------------------------------------- */

body.login form label,
body.login form p label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 580 !important;
    color: var(--tcfm-text-2) !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.1px !important;
}

/* ----------------------------------------------------------------------------
   9. Inputs — text, email, password.
---------------------------------------------------------------------------- */

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login input.input,
body.login input#user_login,
body.login input#user_email,
body.login input#pass1,
body.login input#pass2 {
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--tcfm-surface) !important;
    border: 1px solid var(--tcfm-border-2) !important;
    border-radius: var(--tcfm-radius) !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    font-family: var(--tcfm-font-text) !important;
    font-weight: 460 !important;
    color: var(--tcfm-text) !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login input.input:focus {
    border-color: var(--tcfm-brand) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 92, 152, 0.12) !important;
}

body.login input[type="text"]::placeholder,
body.login input[type="email"]::placeholder,
body.login input[type="password"]::placeholder {
    color: var(--tcfm-text-4) !important;
    font-weight: 460 !important;
}

/* ----------------------------------------------------------------------------
   10. The password reset screen has a "Generate Password" button and a
   show/hide eye button next to the password input. Style them to match.
---------------------------------------------------------------------------- */

body.login .user-pass1-wrap,
body.login .user-pass2-wrap {
    margin: 0 0 16px !important;
}

body.login .wp-pwd {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}

body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] {
    flex: 1 !important;
}

body.login .wp-pwd button.wp-hide-pw,
body.login button.wp-generate-pw {
    background: var(--tcfm-surface) !important;
    border: 1px solid var(--tcfm-border-2) !important;
    border-radius: var(--tcfm-radius) !important;
    color: var(--tcfm-text-2) !important;
    font-family: var(--tcfm-font-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    box-shadow: none !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.login .wp-pwd button.wp-hide-pw:hover,
body.login button.wp-generate-pw:hover {
    background: var(--tcfm-surface-grey) !important;
    border-color: var(--tcfm-border) !important;
}

body.login .wp-pwd button.wp-hide-pw .dashicons,
body.login button.wp-generate-pw .dashicons {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

body.login button.wp-generate-pw {
    margin: 0 0 12px !important;
    padding: 10px 16px !important;
    min-height: 0 !important;
}

/* ----------------------------------------------------------------------------
   11. Password strength meter — restyle to match brand.
---------------------------------------------------------------------------- */

/* Strength meter base colors — apply regardless of whether it's
   inside .wp-pwd (sizing handled by section 17 inline-pill rules). */
body.login #pass-strength-result {
    background: var(--tcfm-surface-grey);
    border: 1px solid var(--tcfm-border);
    color: var(--tcfm-text-3);
}

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad {
    background: var(--tcfm-error-bg) !important;
    border-color: rgba(217, 32, 32, 0.25) !important;
    color: var(--tcfm-error) !important;
}

body.login #pass-strength-result.good {
    background: rgba(255, 200, 0, 0.08) !important;
    border-color: rgba(217, 168, 0, 0.25) !important;
    color: #8a6a00 !important;
}

body.login #pass-strength-result.strong {
    background: var(--tcfm-success-bg) !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
    color: var(--tcfm-success) !important;
}

/* ----------------------------------------------------------------------------
   12. The "weak password" confirmation checkbox row.
---------------------------------------------------------------------------- */

/* IMPORTANT: do NOT set `display` here. WordPress's user-profile.js sets
   an inline `display:none` on .pw-weak and only reveals it (by clearing
   that inline style) when the typed password is rated weak. If we force
   display:flex !important, the box shows on EVERY password, including
   strong ones. We style appearance only; WP controls visibility. */
body.login .pw-weak {
    margin: 12px 0 0 !important;
    padding: 12px 14px !important;
    background: var(--tcfm-surface-grey) !important;
    border-radius: var(--tcfm-radius-sm) !important;
    border: 1px solid var(--tcfm-border) !important;
    font-size: 13px !important;
    color: var(--tcfm-text-2) !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Reveal logic, robust to BOTH ways WP toggles the box:
   - hidden  -> inline style contains "display: none"  => keep hidden
   - shown   -> WP sets display:block OR clears the inline style
   So: force flex EXCEPT when the inline style still says display:none.
   :not([style*="display: none"]) keeps it hidden in the initial/strong
   state and shows it (as flex) only once WP clears/flips that style. */
body.login .pw-weak:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
}

body.login .pw-weak label {
    margin: 0 !important;
    font-weight: 460 !important;
    color: var(--tcfm-text-2) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* Checkbox: native control, correctly sized so the checkmark fits. Using
   appearance:auto keeps the browser's native tick (properly centered &
   scaled) instead of a custom box where the tick looked misplaced. */
body.login input[type="checkbox"].pw-checkbox {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--tcfm-brand) !important;
    vertical-align: middle !important;
}

/* ----------------------------------------------------------------------------
   13. Submit button — graphite, full-width, matches checkout Confirmer.
---------------------------------------------------------------------------- */

body.login input[type="submit"],
body.login button[type="submit"],
body.login .button-primary,
body.login #wp-submit {
    display: block !important;
    width: 100% !important;
    background: var(--tcfm-graphite) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--tcfm-radius) !important;
    padding: 14px 24px !important;
    font-family: var(--tcfm-font-text) !important;
    font-size: 15px !important;
    font-weight: 580 !important;
    letter-spacing: 0.1px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.05s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
}

body.login input[type="submit"]:hover,
body.login button[type="submit"]:hover,
body.login .button-primary:hover,
body.login #wp-submit:hover {
    background: var(--tcfm-graphite-hover) !important;
}

body.login input[type="submit"]:active,
body.login button[type="submit"]:active,
body.login #wp-submit:active {
    transform: translateY(1px) !important;
}

body.login input[type="submit"]:focus,
body.login button[type="submit"]:focus,
body.login #wp-submit:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 92, 152, 0.18) !important;
}

/* ----------------------------------------------------------------------------
   14. WP system messages (#login_error, .message, .notice)
   — restyle as branded alert boxes.
---------------------------------------------------------------------------- */

body.login #login_error,
body.login .message,
body.login .notice,
body.login p.message {
    border-radius: var(--tcfm-radius) !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    border-top: 1px solid !important;
    border-right: 1px solid !important;
    border-bottom: 1px solid !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-family: var(--tcfm-font-text) !important;
    font-weight: 460 !important;
    line-height: 1.5 !important;
    margin: 0 auto 20px !important;
    max-width: 680px !important;
    box-shadow: none !important;
    background: var(--tcfm-surface-soft) !important;
    border-color: var(--tcfm-surface-blue) !important;
    border-left-color: var(--tcfm-brand) !important;
    color: var(--tcfm-text-2) !important;
}

body.login #login_error {
    background: var(--tcfm-error-bg) !important;
    border-color: rgba(217, 32, 32, 0.25) !important;
    border-left-color: var(--tcfm-error) !important;
    color: var(--tcfm-error) !important;
}

body.login .message.reset-pass,
body.login p.message.reset-pass {
    background: var(--tcfm-success-bg) !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
    border-left-color: var(--tcfm-success) !important;
    color: var(--tcfm-success) !important;
}

body.login #login_error a,
body.login .message a {
    color: inherit !important;
    text-decoration: underline !important;
    font-weight: 580 !important;
}

/* ----------------------------------------------------------------------------
   15. Footer — "Retour à la connexion" link.
---------------------------------------------------------------------------- */

body.login .tcfm-reset-footer {
    text-align: center;
    margin: 24px 0 0;
    font-size: 14px;
}

body.login .tcfm-reset-footer__link {
    color: var(--tcfm-brand) !important;
    text-decoration: none !important;
    font-weight: 580 !important;
    transition: color 0.15s ease;
}

body.login .tcfm-reset-footer__link:hover {
    color: var(--tcfm-brand-deep) !important;
    text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------
   16. Hide the WP "Back to" / "Lost your password?" duplicate nav that
   appears below the form on the new-password screen (we have our own
   footer link).
---------------------------------------------------------------------------- */

body.login p#nav,
body.login p#backtoblog {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   17. Fixes for issues reported on first deploy:
       a) WP injects an explanatory <p> directly inside the form on the
          lostpassword screen — hide it.
       b) On the new-password (rp) screen, .wp-pwd inputs render tiny
          because WP sets inline width. Force full width + tall enough
          to type comfortably.
       c) Hide #pass-strength-result when it has no strength class
          (i.e. the user hasn't typed yet) — otherwise it shows an
          empty colored bar.
       d) .user-pass1-wrap / .user-pass2-wrap stack the show/hide button
          and input awkwardly on some WP versions. Force flex layout.
---------------------------------------------------------------------------- */

/* a) Hide ONLY the pure-text helper paragraph WP injects — never a <p>
   that contains a form field. On this site the email field lives inside
   an unclassed <p>, so the old blanket rule was hiding the input itself.
   :has() guards: hide a <p> only if it has NO label, input, or button. */
body.login #lostpasswordform > p:not(.submit):not(.user-pass-wrap):not(.user-pass1-wrap):not(.user-pass2-wrap):not(.indicator-hint):not(.pw-weak):not(:has(label)):not(:has(input)):not(:has(button)):not(:has(select)) {
    display: none !important;
}

/* Also hide any "message"-class <p> that WP renders above the form
   carrying the same helper copy (login_message path). */
body.login .tcfm-reset-card > p.message:not(.reset-pass):not(.error) {
    display: none !important;
}

/* b) Password row layout — three flex children in this order:
      [ #pass1 wide input ] [ #pass-strength-result narrow pill ] [ .wp-hide-pw eye ]

   Critical: min-width:0 on the input defeats flex's intrinsic-width
   default (otherwise an empty input collapses to ~30px because its
   "intrinsic content width" is the placeholder text width). */

body.login .wp-pwd {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
    flex-wrap: nowrap !important;
}

body.login #pass1,
body.login #pass1-text,
body.login input.password-input {
    flex: 1 1 auto !important;
    min-width: 220px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    min-height: 46px !important;
    height: auto !important;
    order: 1 !important;
}

/* Strength meter as a fixed-width pill INSIDE the row, between input
   and eye button. Override the !important rules from section 11. */
body.login .wp-pwd #pass-strength-result {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    min-height: 46px !important;
    height: auto !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: var(--tcfm-radius) !important;
    font-size: 12px !important;
    font-weight: 580 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    order: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Reveal the pill only when WP has classified the strength. Use
   display:flex (not block) so align-items centers the label vertically. */
body.login .wp-pwd #pass-strength-result.short,
body.login .wp-pwd #pass-strength-result.bad,
body.login .wp-pwd #pass-strength-result.good,
body.login .wp-pwd #pass-strength-result.strong {
    display: flex !important;
}

body.login .wp-pwd button.wp-hide-pw {
    position: static !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    min-height: 46px !important;
    align-self: stretch !important;
    order: 3 !important;
}

/* The confirm-password input (if present on this WP version) — single
   row, full width, no inline meter. */
body.login #pass2 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    min-height: 46px !important;
    height: auto !important;
}

/* Stack the new-password row with comfortable spacing. NOTE: do NOT
   include .user-pass2-wrap here — forcing display:block on it was making
   WP's hidden "Confirmer le nouveau mot de passe" field appear. WP ships
   that field with inline display:none; we keep it hidden (single-field
   flow, no confirm field — matches modern WP UX and the user's request). */
body.login .user-pass1-wrap,
body.login .user-pass-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    clear: both !important;
}

/* Explicitly remove the confirm-password field entirely. */
body.login .user-pass2-wrap,
body.login #pass2 {
    display: none !important;
}

body.login .user-pass1-wrap label,
body.login .user-pass-wrap label {
    margin-bottom: 8px !important;
}

/* c) Empty strength meter hide.
   WP gives #pass-strength-result class="short|bad|good|strong" only
   AFTER the user starts typing. While it has only the base class
   (or no extra class) it renders as an empty tinted bar. Hide it
   in the empty state. */
body.login #pass-strength-result {
    display: none !important;
}

/* Reveal the meter. When it lives INSIDE .wp-pwd it must stay a
   fixed-width flex pill (display:flex + 110px cap) so it does NOT
   eat the row and starve #pass1. The earlier block rule was the bug:
   it re-widened the meter to full width and collapsed the input. */
body.login .wp-pwd #pass-strength-result.short,
body.login .wp-pwd #pass-strength-result.bad,
body.login .wp-pwd #pass-strength-result.good,
body.login .wp-pwd #pass-strength-result.strong {
    display: flex !important;
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    order: 2 !important;
}

/* Fallback for WP versions that render the meter OUTSIDE .wp-pwd
   (its own row). There a block, full-width pill is fine. */
body.login #pass-strength-result.short,
body.login #pass-strength-result.bad,
body.login #pass-strength-result.good,
body.login #pass-strength-result.strong {
    display: block !important;
}

/* The "Generate Password" button row should sit comfortably above the
   password input, not crammed against it. */
body.login .wp-pwd + .pw-weak,
body.login .pw-weak {
    margin-top: 14px !important;
}

/* Force the indicator-hint paragraph (the "Hint: at least 12 chars..."
   helper text) to readable size and our muted color. */
body.login p.description.indicator-hint,
body.login .indicator-hint {
    font-size: 12.5px !important;
    color: var(--tcfm-text-4) !important;
    margin: 8px 0 0 !important;
    line-height: 1.5 !important;
    font-weight: 460 !important;
}

/* ----------------------------------------------------------------------------
   18. Mobile breakpoint — match confirmation page.
---------------------------------------------------------------------------- */

@media (max-width: 600px) {
    body.login .tcfm-reset-wrapper {
        padding: 32px 14px 48px;
    }

    body.login .tcfm-reset-brand {
        gap: 14px;
        margin-bottom: 24px;
    }

    body.login .tcfm-reset-brand__icon {
        width: 36px;
        height: 36px;
    }

    body.login .tcfm-reset-brand__name {
        font-size: 18px;
    }

    body.login .tcfm-reset-hero {
        margin-bottom: 22px;
    }

    body.login .tcfm-reset-hero__title {
        font-size: 22px;
    }

    body.login .tcfm-reset-hero__subtitle {
        font-size: 14px;
    }

    body.login .tcfm-reset-card {
        padding: 24px 20px;
        border-radius: var(--tcfm-radius);
    }

    body.login input[type="text"],
    body.login input[type="email"],
    body.login input[type="password"] {
        font-size: 16px !important; /* prevent iOS zoom on focus */
    }
}

/* ----------------------------------------------------------------------------
   19. Round-2 fixes (2026-05-31):
       a) Mobile/tablet overflow — the 3-item password row
          (input 220px + meter 110px + eye 50px + gaps) is wider than a
          phone viewport, so it overflows the card. Make the row wrap and
          reflow on small screens; let the input take the full first line
          and the meter + eye sit on a second line.
       b) Submit button text overflow — long French labels
          ("Enregistrer le nouveau mot de passe") overflow on narrow
          screens. Allow wrapping + smaller padding on mobile.
       c) Generate Password button — make it visually consistent with the
          other secondary controls and the row width.
       d) Weak-password checkbox row — clean, branded, full-width.
---------------------------------------------------------------------------- */

/* a) Hard guard against horizontal overflow of the whole card. */
body.login .tcfm-reset-card,
body.login .wp-pwd,
body.login form,
body.login #resetpasswordform {
    max-width: 100% !important;
    overflow-x: clip !important;
}

/* b) Submit button: never let the label overflow; wrap gracefully. */
body.login input[type="submit"],
body.login button[type="submit"],
body.login .button-primary,
body.login #wp-submit {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* c) Generate Password button — full-width, secondary look, sits above the
   password row consistently with the rest of the form. */
body.login button.wp-generate-pw {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
    padding: 12px 16px !important;
    min-height: 46px !important;
    background: var(--tcfm-surface-grey) !important;
    border: 1px solid var(--tcfm-border-2) !important;
    border-radius: var(--tcfm-radius) !important;
    color: var(--tcfm-text-2) !important;
    font-family: var(--tcfm-font-text) !important;
    font-size: 14px !important;
    font-weight: 580 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
}

body.login button.wp-generate-pw:hover {
    background: #f2f2f2 !important;
    border-color: var(--tcfm-border) !important;
}

/* d) Weak-password confirmation row — clean branded box, full width,
   label wraps instead of overflowing. */
body.login .pw-weak {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    line-height: 1.45 !important;
}

body.login .pw-weak label {
    flex: 1 1 auto !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

body.login input[type="checkbox"].pw-checkbox {
    flex: 0 0 16px !important;
    margin-top: 1px !important;
}

/* ----------------------------------------------------------------------------
   20. Small-screen breakpoint for the password row + buttons (<= 560px).
       The desktop 600px block above handles spacing; this block handles
       the flex reflow that prevents overflow on phones/tablets.
---------------------------------------------------------------------------- */

@media (max-width: 782px) {
    /* Keep the SAME single-row layout as desktop — never wrap:
         [ input (flex) ][ strength indicator ][ 👁 eye ]
       Eye pinned far right, strength indicator to its left, input fills
       the rest. Just shrink the meter + eye so all three fit a phone.
       Breakpoint is 782px (WP's mobile breakpoint) because many phones
       report a CSS viewport wider than 560px, which left the row using
       the desktop rule and wrapping into three lines. */
    body.login .wp-pwd {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    /* Defeat the desktop input min-width:220px that forces the row too
       wide and triggers the wrap. Let the input shrink freely. */
    body.login #pass1,
    body.login #pass1-text,
    body.login input.password-input {
        min-width: 0 !important;
    }

    /* Input flexes to fill the remaining space; min-width:0 lets it
       shrink below its intrinsic size so the row never overflows. */
    body.login #pass1,
    body.login #pass1-text,
    body.login input.password-input {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        order: 1 !important;
    }

    /* Strength indicator: middle of the row, narrower fixed pill so it
       fits. order:2 keeps it left of the eye. */
    body.login .wp-pwd #pass-strength-result.short,
    body.login .wp-pwd #pass-strength-result.bad,
    body.login .wp-pwd #pass-strength-result.good,
    body.login .wp-pwd #pass-strength-result.strong {
        flex: 0 0 72px !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        order: 2 !important;
        font-size: 11px !important;
        padding: 0 4px !important;
    }

    /* Eye: pinned far right, fixed touch-friendly slot. */
    body.login .wp-pwd button.wp-hide-pw {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        order: 3 !important;
    }

    /* Submit + generate buttons: tighter padding, allow wrap. */
    body.login input[type="submit"],
    body.login button[type="submit"],
    body.login #wp-submit,
    body.login button.wp-generate-pw {
        font-size: 14px !important;
        padding: 13px 12px !important;
        line-height: 1.3 !important;
    }
}

/* ----------------------------------------------------------------------------
   21. Success/confirmation screens — branded confirmation block.
       WP's own success pages only render a tiny message and may leave a
       form/link below it. We inject a .tcfm-reset-success block
       (checkmark + text + button) and hide WP's leftover minimal markup
       so the user sees a clear confirmation.
---------------------------------------------------------------------------- */

body.login .tcfm-reset-success {
    text-align: center;
    padding: 8px 0 4px;
}

body.login .tcfm-reset-success__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--tcfm-success-bg);
    color: var(--tcfm-success);
    font-size: 30px;
    line-height: 56px;
    font-weight: 700;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

body.login .tcfm-reset-success__text {
    font-size: 15px !important;
    color: var(--tcfm-text-2) !important;
    margin: 0 0 22px !important;
    line-height: 1.55 !important;
}

body.login .tcfm-reset-success__btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--tcfm-graphite) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: var(--tcfm-radius) !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 580 !important;
    text-align: center !important;
    transition: background 0.15s ease !important;
}

body.login .tcfm-reset-success__btn:hover {
    background: var(--tcfm-graphite-hover) !important;
}

/* Hide WP's leftover minimal markup on the success screen: the bare
   "reset-pass" message paragraph and the login form WP shows beneath it,
   since our injected block already gives the message + the button. The
   little empty field the user saw was WP's login form rendering here. */
body.login.login-action-resetpass #loginform,
body.login.login-action-resetpass p.message.reset-pass,
body.login.login-action-resetpass #login form,
body.login.login-action-resetpass #login .message,
body.login.tcfm-checkemail-confirm #lostpasswordform,
body.login.tcfm-checkemail-confirm #login .message {
    display: none !important;
}