/* ==========================================
   KRUMPLD — SIGN IN
   Restyles WooCommerce's native login form.
   No template override — targets WC's own
   stable form-login.php markup/classes.
   Requires native WooCommerce registration to
   be OFF (Settings > Accounts & Privacy), so
   only the single login column renders — no
   second "Register" column to hide.
   Caution: verify these class names against
   the live rendered markup before relying on
   them; Kadence may wrap the form differently.
   ========================================== */

body.woocommerce-account {
    background: var(--kr-canvas); /* KRUMPLD MOD: was #f4f1ea -- this file had its own slightly
        different value competing with myaccount.css's #F0EDE8 for the same selector.
        Unified to the one canonical site-wide canvas token. */
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none;
}

/*
 * KRUMPLD MOD: confirmed via live browser inspector that the border/padding
 * was on the <form class="woocommerce-form-login"> element itself, not on
 * #customer_login (which this file was previously, incorrectly, targeting)
 * -- Kadence's own generic form styling (border: 1px solid rgb(183,205,225),
 * padding: 20px, font-family: -apple-system, color: rgb(95,95,92)) applies
 * directly to any <form> tag. Chained through #main -- a real, confirmed
 * ancestor ID visible in the live DOM -- since Kadence's own rule likely
 * uses an ID for its specificity, and a same-specificity class-only
 * !important rule wasn't enough to beat it.
 */
#main body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account #main .woocommerce-form-login {
    border: none !important;
    box-shadow: none !important;
    padding: 0 20px !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--kr-ink) !important;
    font-size: 15px !important;
}

/*
 * KRUMPLD MOD: #customer_login never actually renders on this site -- it
 * only wraps this content when native WooCommerce registration is
 * enabled (it isn't, confirmed repeatedly throughout this project), so
 * every previous width-fix attempt targeting it did nothing, because the
 * element simply wasn't in the DOM. Confirmed directly from the live
 * rendered markup. The real structure is two sibling elements with no
 * shared wrapper -- .kr-signin-header and .woocommerce-form-login sit
 * directly inside .woocommerce -- so both are constrained individually
 * here instead.
 */
#main body.woocommerce-account .kr-signin-header,
body.woocommerce-account #main .kr-signin-header,
#main body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account #main .woocommerce-form-login {
    max-width: 420px !important; /* KRUMPLD MOD: was 600px -- at that width on wide
        viewports, the underlines stretched noticeably past the button below them. */
    margin-left: auto !important;
    margin-right: auto !important;
}

body.woocommerce-account #customer_login h2 {
    font-size: 28px;
    font-weight: 500;
    color: var(--kr-ink);
    margin-bottom: 32px;
}

/*
 * KRUMPLD MOD: new header block, replacing the plain "Login" h2 above.
 * Kept the old #customer_login h2 rule in place (harmless, unused --
 * still matches the Register column's own h2 if that ever becomes
 * reachable again).
 */
body.woocommerce-account .kr-signin-header {
    text-align: center;
    margin-bottom: 40px;
}

body.woocommerce-account .kr-signin-header__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kr-label); /* KRUMPLD MOD: was #999 -- ~2.8:1 against the #F0EDE8 canvas, failing WCAG AA for small text. */
    margin-bottom: 12px;
}

body.woocommerce-account .kr-signin-header__title {
    font-family: var(--kr-font-display);
    font-size: 36px;
    font-weight: 600;
    color: var(--kr-ink); /* KRUMPLD MOD: was #111 -- warm near-black, holds the same weight against ivory without the harder pure-black edge. */
    margin: 0 0 8px;
}

body.woocommerce-account .kr-signin-header__subtitle {
    font-size: 14px;
    color: var(--kr-secondary); /* KRUMPLD MOD: was #777 -- same low-contrast issue as the eyebrow label. */
    margin: 0;
}

/*
 * KRUMPLD MOD: icon for the invalid/expired password-reset-link states
 * only (see form-lost-password.php's $link_status branching) -- the
 * default "Forgot Your Password?" state never renders this element at
 * all. Styled as a simple outline icon in the page's own dark text
 * color, not the mockup's dark-circle-background treatment -- this page
 * has an established light background with no card, and introducing a
 * dark card for just two sub-states of an otherwise light page would be
 * visually inconsistent with the rest of it.
 */
body.woocommerce-account .kr-signin-header__icon {
    display: flex;
    justify-content: center;
    color: var(--kr-ink);
    margin-bottom: 16px;
}

body.woocommerce-account .woocommerce-form-login .form-row {
    margin-bottom: 28px; /* KRUMPLD MOD: was 20px -- consistent field-to-field rhythm. */
}

body.woocommerce-account .woocommerce-form-login label {
    display: block;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-label);
    margin-bottom: 8px;
}

body.woocommerce-account .woocommerce-form-login label .required {
    display: none;
}

/*
 * KRUMPLD MOD: underline style, not a bordered box -- matches the Profile
 * page (form-edit-account.php) and the direction of the account UI
 * generally. -webkit-appearance/appearance reset defensively, since some
 * browsers apply their own inset shadow to text/password inputs that would
 * otherwise show faintly even with border set to none.
 */
body.woocommerce-account .woocommerce-form-login .woocommerce-Input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 2px;
    font-size: 15px;
    border: none;
    border-bottom: 1px solid var(--kr-rule);
    border-radius: 0;
    background: transparent;
    color: var(--kr-ink);
    -webkit-appearance: none;
    appearance: none;
}

body.woocommerce-account .woocommerce-form-login .woocommerce-Input:focus {
    outline: none;
    border-bottom-color: var(--kr-ink);
}

/*
 * No :focus-visible outline here on purpose -- see myaccount.css for the
 * full explanation (outline draws a box on all four sides, and browsers
 * apply :focus-visible to text inputs on click, not just keyboard).
 */

#main body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account #main .woocommerce-form-login__submit {
    display: block !important;
    width: 100% !important;
    background: var(--kr-ink) !important;
    color: var(--kr-header) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    cursor: pointer;
    margin-top: 0; /* KRUMPLD MOD: was 8px -- .kr-signin-row's margin-bottom (40px) is
        now the sole source of the gap before this button, avoiding any ambiguity from
        two adjacent margins. */
}

body.woocommerce-account .woocommerce-form-login__submit:hover {
    opacity: 0.85;
}

/*
 * KRUMPLD MOD: Remember me removed entirely per updated decision -- this
 * row now holds only Lost Password, right-aligned (flex-end) rather than
 * space-between, which would otherwise push a single remaining item to
 * the left.
 */
body.woocommerce-account .kr-signin-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 40px; /* KRUMPLD MOD: was -8px 0 24px. The negative top margin plus the
        button's own 8px top margin were compounding into a visibly larger gap before
        LOG IN than between the fields above it. Cleaned to a single, unambiguous 40px
        bottom margin -- see the submit button rule below, whose margin-top is now 0
        so this is the sole source of that specific gap. */
}

body.woocommerce-account .kr-signin-lostpassword {
    font-size: 13px;
    color: var(--kr-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-account .kr-signin-lostpassword:hover {
    color: var(--kr-ink);
}

/*
 * Password visibility toggle on Sign In. Reuses .kp-profile-toggle-password
 * (and the .kr-eye-open/.kr-eye-closed icon classes) so the existing
 * myaccount.js logic -- already loaded on this page via is_account_page()
 * -- works with zero JS changes. Positioning CSS is redeclared here under
 * this page's own wrapper class, since Sign In's input uses
 * .woocommerce-Input, not .kp-profile-input.
 */
/*
 * KRUMPLD MOD: this wrapper is a <span>, not a <div> -- a <div> here is
 * invalid HTML (block-level elements can't be children of <p>), and
 * browsers silently auto-close the <p> and restructure the DOM around it
 * when they encounter one, which is what caused the uneven label-to-
 * underline spacing between Email and Password (confirmed via the live,
 * browser-corrected DOM not matching this file's actual source). <span>
 * is valid inline content inside <p>, so display:inline-block + width:100%
 * here restores the same full-width block-like visual behavior the old
 * div had, without violating HTML nesting rules.
 */
body.woocommerce-account .kr-signin-input-wrap {
    display: inline-block;
    width: 100%;
    position: relative;
    line-height: 0; /* KRUMPLD MOD: inline-block elements get phantom extra space below
        their content from normal line-height, which was throwing off the eye toggle's
        top:50%/translateY(-50%) centering -- it was calculating the midpoint of a
        slightly-taller-than-visible box. This removes that extra space so 50% actually
        matches the input's own visible center. */
}

/*
 * KRUMPLD MOD: a second, independent password-reveal toggle
 * (span.password-input > button.show-password-input) is rendering
 * alongside our own -- confirmed via live inspector NOT to be browser-
 * extension-injected (persists in Incognito) and confirmed via grep NOT
 * to exist anywhere in our own theme/plugin files. The real <input>
 * element is nested INSIDE that span, so only the injected button is
 * hidden here -- hiding the span itself would hide the actual password
 * field. Source of the injection is still unconfirmed (a JS-based
 * enhancement is the likely mechanism, given it wraps the input in new
 * markup after the fact -- possibly a Kadence built-in script, a Code
 * Snippet, or something loaded via the active Head Footer Code plugin).
 * Suppressed here directly rather than waiting to identify it, since we
 * already have our own working toggle. Scoped to inside our own wrapper
 * specifically, so this doesn't suppress the feature anywhere else on
 * the site it might be the only toggle present.
 */
body.woocommerce-account .kr-signin-input-wrap .show-password-input {
    display: none !important;
}

/*
 * KRUMPLD MOD: the same mystery-injected span above wraps the real input
 * and may carry its own default spacing (padding/margin/line-height),
 * which Email's plain, unwrapped input never has to contend with --
 * likely the actual cause of the uneven label-to-underline gap between
 * Email and Password. Reset to zero regardless of what it's doing by
 * default.
 */
body.woocommerce-account .kr-signin-input-wrap .password-input {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
}

body.woocommerce-account .kr-signin-input-wrap .woocommerce-Input {
    padding-right: 32px;
}

body.woocommerce-account .kr-signin-input-wrap .kp-profile-toggle-password {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: var(--kr-label);
    cursor: pointer;
}

body.woocommerce-account .kr-signin-input-wrap .kp-profile-toggle-password:hover {
    color: var(--kr-ink);
}

body.woocommerce-account .kr-signin-input-wrap .kp-profile-toggle-password:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/*
 * Defensive: forces [hidden] icons to actually stay hidden, regardless of
 * what's overriding the native [hidden] default display:none (likely a
 * Kadence global style, matching the same class of conflict already found
 * on this page's input borders/button). Narrowly scoped to these two exact
 * icon classes, so this can't affect anything else -- and is a harmless
 * no-op on pages where [hidden] already works correctly on its own.
 */
#main .kr-eye-open[hidden],
#main .kr-eye-closed[hidden],
body.woocommerce-account #main .kr-eye-open[hidden],
body.woocommerce-account #main .kr-eye-closed[hidden] {
    display: none !important;
}

/* Divider + Create Account link — injected via PHP (see functions.php hook) */
.kp-auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 24px;
    color: var(--kr-label);
    font-size: 11px;
    letter-spacing: 0.14em;
}

.kp-auth-divider::before,
.kp-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--kr-rule);
}

#main .kp-auth-create-account,
body.woocommerce-account #main .kp-auth-create-account {
    display: block !important;
    text-align: center;
    padding: 8px !important; /* KRUMPLD MOD: was 13px -- a text link doesn't need
        button-sized tap padding to the same degree; kept a small amount for tap target size. */
    border: none !important; /* KRUMPLD MOD: was 1px solid #d9d6d0 -- that grey border matched
        nothing else on the page and gave this near-equal visual weight to LOG IN. Converted
        to a plain text link instead of just softening the border color, since removing the
        second button-shaped element resolves the hierarchy issue more decisively. */
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--kr-ink) !important; /* KRUMPLD MOD: was #111 -- matches the warm near-black used elsewhere on this page. */
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kp-auth-create-account:hover {
    color: var(--kr-ink) !important;
}

@media (max-width: 480px) {
    body.woocommerce-account #customer_login {
        margin: 48px auto;
    }
}
/* ==========================================
   LOST PASSWORD CONFIRMATION — "Check Your Inbox"
   KRUMPLD MOD: dark card, reusing the exact
   palette values from claim-account.css's
   .kr-claim-confirm (#111/#f4f1ea, 440px) --
   not duplicating a fourth color system.
   ========================================== */

/*
 * KRUMPLD MOD: no dark card here, matching the same treatment now used on
 * password-updated.css -- plain centered text directly on the page's own
 * light background, dark text, no box. This was a dark card until this
 * change; removed by explicit request to match Password Updated's look.
 */
body.woocommerce-account .kr-lost-password-confirm {
    max-width: 440px;
    margin: 48px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: center;
    color: var(--kr-ink);
}

/*
 * Widened on larger screens only, so the confirmation message wraps to 2
 * lines instead of 3 -- 440px was too narrow for this specific sentence
 * length on desktop. Mobile keeps the original 440px (still comfortably
 * readable at that width on a phone). This is a deliberate min-width
 * exception to this file's usual max-width-breakpoint convention, since
 * the actual need here is "wider on larger screens," which a max-width
 * override can't express.
 */
@media (min-width: 600px) {
    body.woocommerce-account .kr-lost-password-confirm {
        max-width: 620px;
    }
}

body.woocommerce-account .kr-lost-password-confirm h1 {
    font-size: 26px;
    font-weight: 500;
    color: var(--kr-ink);
    margin: 0 0 16px;
}

body.woocommerce-account .kr-lost-password-confirm p {
    font-size: 15px;
    color: var(--kr-secondary);
    line-height: 1.6;
    margin: 0 0 8px;
}

body.woocommerce-account .kr-lost-password-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #111;
    color: var(--kr-ink);
    margin-bottom: 24px;
}

body.woocommerce-account .kr-lost-password-confirm__meta {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kr-label);
    margin: 16px 0 24px;
}

body.woocommerce-account .kr-lost-password-confirm__retry a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kr-label);
    text-decoration: none;
}

body.woocommerce-account .kr-lost-password-confirm__retry a:hover {
    color: var(--kr-ink);
}

/* ==========================================
   RESPONSIVE BUTTON WIDTH — Log In / Create Account
   KRUMPLD MOD: full-width on mobile (base,
   below 600px), constrained + centered on
   larger screens. Same min-width exception to
   this file's usual max-width convention as
   used for the "Check Your Inbox" width fix --
   the actual need here ("smaller on larger
   screens") can't be expressed as a max-width
   override. Matches the base rules' selector
   chains (including the #main anchor) and
   !important weight exactly, so this correctly
   overrides them above the breakpoint.
   ========================================== */

@media (min-width: 600px) {
    /*
     * KRUMPLD MOD: centering Log In via its parent paragraph's flexbox,
     * not the button's own margin -- confirmed via screenshot that width
     * was applying correctly (240px, narrower than before) but margin
     * auto-centering was not, meaning Kadence is fighting the margin
     * property specifically on real <button> elements. Sidesteps that
     * fight entirely by centering the parent instead, since Kadence is
     * very unlikely to be styling our own .form-row wrapper the same way
     * it styles the <button> inside it. Scoped to .woocommerce-form-login
     * specifically so this doesn't affect .form-row elsewhere on the site
     * (a generic WooCommerce class used on many other forms).
     */
    /*
     * KRUMPLD MOD: exact class-attribute match ([class="form-row"]), not a
     * plain .form-row selector -- WooCommerce's own field rows (Email,
     * Password) also carry "form-row" as one of *several* classes
     * ("woocommerce-form-row woocommerce-form-row--wide form-row
     * form-row-wide"), so a plain .form-row selector matched those too and
     * broke their layout (this was a real regression, caught and reverted
     * immediately). Only the submit button's paragraph has class="form-row"
     * as its exact, sole class value, so [class="form-row"] correctly
     * matches only that one.
     */
    body.woocommerce-account .woocommerce-form-login p[class="form-row"] {
        display: flex;
        justify-content: center;
    }

    #main body.woocommerce-account .woocommerce-form-login__submit,
    body.woocommerce-account #main .woocommerce-form-login__submit {
        width: 240px !important;
        flex: 0 0 240px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #main .kp-auth-create-account,
    body.woocommerce-account #main .kp-auth-create-account {
        width: 240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}