/* ==========================================
   KRUMPLD — CLAIM ACCOUNT (entry page)
   REBUILT: previously a narrow (400px), auto-
   centered card matching Sign In/Registration's
   layout. Per explicit direction, rebuilt to match
   the wide, left-of-center layout used by Orders,
   Addresses, and Profile instead - same shared
   header/input/button components those pages use,
   not a page-specific parallel styling system.

   Why "left of center" and not literally
   text-align:left: Orders/Addresses/Profile's
   header is actually text-align:center (see
   myaccount.css) - it only LOOKS left-aligned
   because .woocommerce-MyAccount-content itself
   has no max-width/margin override, so it inherits
   whatever left position the theme's ambient page
   container already provides, and centers only
   WITHIN that already-left-positioned column. This
   file reproduces that same effect by giving
   .kr-claim-account the same hands-off treatment
   (a max-width, no auto-centering margin) rather
   than switching text-align to left, which would
   produce a visibly different result from the
   other three pages.

   Everything below is scoped under .kr-claim-account
   (always present in the markup regardless of body
   class) rather than body.woocommerce-account, since
   this is an ordinary WordPress page, not a real
   WooCommerce account endpoint - same reasoning
   already documented in inc/claim-account.php for
   why myaccount.css needed its own enqueue fix here.
   ========================================== */

body.page-template-claim-account {
    background: var(--kr-canvas); /* KRUMPLD MOD: was #fff -- Claim Account is explicitly
        named as an ivory-canvas page in the locked spec. This rule's actual selector may
        or may not currently match a live template (see inc/claim-account.php's own notes
        on this), but the global body !important rule now enforces ivory here regardless. */
}

.kr-claim-account {
    max-width: 640px;
}

.kr-claim-account .kr-account-header {
    text-align: center;
    margin-bottom: 40px;
}

.kr-claim-account .kr-account-header__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 12px;
}

.kr-claim-account .kr-account-header__title {
    font-family: var(--kr-font-display);
    font-size: 32px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px;
}

.kr-claim-account__intro {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin: 0 0 28px;
    text-align: center;
}

/*
 * .kp-profile-input is normally scoped to
 * body.woocommerce-account .woocommerce-MyAccount-content in
 * myaccount.css, to outrank WooCommerce core's own generic input
 * styling there. This page has neither of those ancestors, so that
 * rule never reaches it - this is the same underline-input style,
 * replicated under this page's own reliable wrapper class instead.
 */
.kr-claim-account .kp-profile-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 2px;
    font-size: 15px;
    border: none;
    border-bottom: 1px solid #d9d6d0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font-family: inherit;
    -webkit-appearance: none;
}

.kr-claim-account .kp-profile-input:focus {
    outline: none;
    border-bottom-color: #111;
}

.kr-claim-account__error {
    font-size: 13px;
    color: #b3261e;
    margin: -12px 0 20px;
}

/* ==========================================
   KRUMPLD — CLAIM ACCOUNT CONFIRM
   REDESIGNED: previously a dark card, matching
   the entry page's old style (before its own
   redesign above). Per explicit direction ("no
   dark cards at all"), redesigned to the same
   light, minimalist style as every other screen
   in this family -- values copied exactly from
   the entry page's own rules above, not
   reinvented.
   ========================================== */

body.page-template-claim-account-confirm {
    background: var(--kr-canvas); /* KRUMPLD MOD: was #fff -- matches Claim Account's own
        ivory-canvas treatment for consistency across that whole flow. */
}

/*
 * Suppresses the theme's own generic page title ("Claim Account
 * Confirmation") - this is the standard Kadence page-title header
 * every ordinary WordPress page gets automatically, rendered
 * separately from and above this shortcode's own eyebrow + headline.
 * Scoped to this page's own body class only, so no other page on the
 * site is affected.
 */
body.page-template-claim-account-confirm .entry-header.page-title {
    display: none;
}

.kr-claim-confirm {
    max-width: 400px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

/*
 * Widens the container specifically so "Link your orders to your
 * account." fits on one line at this font-size - the narrower 400px
 * default (kept for mobile, where wrapping to two lines is fine) was
 * too narrow for the full sentence regardless of actual screen width,
 * which is why it wrapped even on desktop. 640px matches the
 * standard content width already used elsewhere on the account
 * pages (Profile, Addresses), rather than an arbitrary new value.
 */
@media (min-width: 600px) {
    .kr-claim-confirm {
        max-width: 640px;
    }
}

.kr-claim-confirm__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 12px;
}

.kr-claim-confirm h1 {
    font-family: var(--kr-font-display);
    font-size: 32px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px;
}

.kr-claim-confirm p {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin: 0 0 32px;
}

.kr-claim-confirm__button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    cursor: pointer;
}

.kr-claim-confirm__button:hover,
.kr-claim-confirm__button:focus,
.kr-claim-confirm__button:active {
    background: #1a1a1a !important;
    color: #fff !important;
}

.kr-claim-confirm__button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

@media (min-width: 600px) {
    .kr-claim-confirm__button {
        width: 240px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}