/* =============================================================
 * WP Custom Login & Authentication — auth-forms.css
 *
 * Consolidates the login styles from the old ct-styles.css with
 * the forgot/reset additions and the mobile breakpoint. Loaded
 * site-wide by the plugin; safe because all selectors are scoped
 * under .custom-login-form / .custom-*-form.
 * ============================================================= */

/* ---------- Base form ---------- */
.custom-login-form {
    color: #E2DFD9;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

.custom-login-form label {
    display: block;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}

.custom-login-form input,
.custom-login-form select {
    width: 100%;
    padding: 18px 24px 19px 26px;
    border-radius: 20px;
    border: none;
    background: #242930;
    color: #E2DFD9;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 24px;
}

.custom-login-form input::placeholder {
    color: #E2DFD9;
}

.custom-login-form .forgot-password {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #E2DFD9;
    text-decoration: none;
    margin-bottom: 48px !important;
}

.custom-login-form button {
    width: 100%;
    padding: 16px 24px 16px 24px !important;
    border-radius: 36px;
    border: none;
    background: #E2DFD9 !important;
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-top: 48px;
}

.custom-login-form button:hover {
    background: #ffb800 !important;
    border-radius: 36px !important;
    box-shadow: 0 0 12px 0 #FFB800D9;
}

/* ---------- Status messages ---------- */
.login-error {
    color: red;
    margin-bottom: 10px;
}

.login-success {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.32);
    color: #C8E6C9;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    margin: 0 0 16px;
}

.field-error {
    color: #ff4d4f;
    font-size: 14px;
    margin-top: 5px;
    font-family: Inter, sans-serif;
}

/* ---------- Password show/hide toggle ----------
 *
 * Used on the reset password form. Wraps the password input so the
 * toggle button can position-absolute over the input's right edge.
 *
 * The wrapper inherits the input's bottom margin (we move it from the
 * input to the wrapper) so spacing stays consistent.
 */
.wpcla-password-wrap {
    position: relative;
    /* Match the input's margin-bottom so layout doesn't shift. We
     * cancel the input's own margin-bottom inside the wrap below. */
    margin-bottom: 36px;
}

.wpcla-password-wrap input {
    /* Right padding leaves room for the toggle button. The base input
     * padding-right is 24px; bump to 56px (24 + 32 icon + 0 gap). */
    padding-right: 56px !important;
    /* Margin is now on the wrap, not the input. */
    margin-bottom: 0 !important;
}

/* Base styles for the toggle button. These work standalone on sites
 * without Elementor; on Elementor sites the higher-specificity
 * overrides at the bottom of this file win the cascade.
 *
 * Why two sets of rules: keeping the base rules without !important
 * means a non-Elementor host doesn't pay the cost of !important
 * fighting; the bottom block is purely a kit-override safety net. */
.wpcla-password-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #E2DFD9;
    line-height: 0;
    box-shadow: none;
}

.wpcla-password-toggle:hover,
.wpcla-password-toggle:focus {
    color: #FFFFFF;
    background: transparent;
    outline: none;
}

.wpcla-password-toggle__icon {
    width: 24px !important;
    height: auto !important;
    max-width: 24px !important;
    pointer-events: none;
    /* Inlined SVGs inherit the button's `color` via currentColor.
     * Raster <img> just renders its own pixels. */
    color: inherit;
    /* Slight opacity dip so the icon doesn't compete with the input. */
    opacity: 0.7;
    transition: opacity 0.15s;
    /* Bulldoze any theme img rules that might add backgrounds, borders,
     * or rounded corners (Elementor sometimes does this). */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Inlined SVG children — make sure strokes/fills follow currentColor
 * when the author's SVG used that convention. If the SVG hardcodes
 * colors (the default eye SVGs use #FFB800), those win, which is fine. */
.wpcla-password-toggle__icon path[stroke="currentColor"],
.wpcla-password-toggle__icon circle[stroke="currentColor"] {
    stroke: currentColor;
}

.wpcla-password-toggle:hover .wpcla-password-toggle__icon,
.wpcla-password-toggle:focus .wpcla-password-toggle__icon {
    opacity: 1;
}

/* Two-icon swap. The button renders BOTH eye-open ("show") and
 * eye-closed ("hide") icons in the DOM at all times. Which is visible
 * depends on the wrap's data-revealed state:
 *
 *   data-revealed="false" → password hidden, show eye-open
 *   data-revealed="true"  → password visible, show eye-closed
 *
 * No DOM swapping needed at click time — JS just flips the attribute. */
.wpcla-password-toggle__icon--show,
.wpcla-password-toggle__icon--hide {
    display: none;
}
.wpcla-password-wrap[data-revealed="false"] .wpcla-password-toggle__icon--show {
    display: block;
}
.wpcla-password-wrap[data-revealed="true"] .wpcla-password-toggle__icon--hide {
    display: block;
}

/* ---------- Forgot / Reset additions ----------
 *
 * Spacing/typography that differs from login lives here, scoped under
 * .custom-forgot-form and .custom-reset-form so .custom-login-form is
 * untouched. Anything truly shared (button stack base) stays at the
 * unscoped .custom-auth-* class level.
 */
.custom-forgot-form,
.custom-reset-form {
    text-align: center;
}

/* Heading — "Forgot Password" / "Create New Password" / "Check your email" etc.
 * Scoped to forgot/reset/verify because the size (48px) and color (#E2DFD9)
 * are page-specific; if we ever reuse .custom-auth-heading elsewhere
 * it shouldn't inherit these. */
.custom-forgot-form .custom-auth-heading,
.custom-reset-form .custom-auth-heading,
.custom-verify-pending .custom-auth-heading,
.custom-verify-result .custom-auth-heading {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: 48px;
    color: #E2DFD9;
    margin: 0 0 8px;
    text-align: center;
}

/* Subtitle — body text under headings. Same scoping rationale. */
.custom-forgot-form .custom-auth-subtitle,
.custom-reset-form .custom-auth-subtitle,
.custom-verify-pending .custom-auth-subtitle,
.custom-verify-result .custom-auth-subtitle {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #E2DFD9;
    margin: 0 0 24px;
    text-align: left;
}

.custom-auth-subtitle a {
    color: #E2DFD9;
    text-decoration: underline;
}

/* Verify pages ("Check your email", "Email verified") use left-aligned
 * heading, unlike forgot/reset which are centered. Per design spec.
 *
 * This override comes AFTER the shared rule above so it wins on equal
 * specificity. Subtitle was already left-aligned in the shared rule,
 * so only the heading needs overriding. */
.custom-verify-pending .custom-auth-heading,
.custom-verify-result .custom-auth-heading {
    text-align: left;
}

.custom-verify-pending,
.custom-verify-result {
    text-align: left;
}

/* Form field label */
.custom-forgot-form label,
.custom-reset-form label {
    display: block;
    text-align: left;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #E2DFD9;
    margin: 16px 0 8px;
}

/* Form field — inputs and select.
 * The base .custom-login-form rule already sets padding 18px 24px 19px 26px,
 * border-radius 20px, background #242930, font Inter 400/16px, color #E2DFD9.
 * We re-declare here only for the values that DIFFER (margin-bottom) plus
 * an explicit `gap: 10px` per spec. `gap` has no effect on plain inputs
 * (no flex/grid children) but we include it for spec fidelity in case
 * the field gets wrapped in a flex container later. */
.custom-forgot-form input,
.custom-forgot-form select,
.custom-reset-form input,
.custom-reset-form select {
    gap: 10px;
    margin-bottom: 36px;
}

.custom-forgot-form button,
.custom-reset-form button {
    margin-top: 11px !important;
}

/* Two-button stack base — shared by login secondary actions if any. */
.custom-auth-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    border-radius: 36px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    margin-top: 12px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.custom-auth-btn--primary {
    background: #E2DFD9;
    color: #000000;
    border-color: #E2DFD9;
}

.custom-auth-btn--primary:hover,
.custom-auth-btn--primary:focus {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.custom-auth-btn--secondary {
    background: transparent;
    color: #E2DFD9;
    border: 1px solid #E2DFD9;
}

.custom-auth-btn--secondary:hover,
.custom-auth-btn--secondary:focus {
    background: rgba(226, 223, 217, 0.08);
    color: #E2DFD9;
    box-shadow: 0 0 12px 0 #E2DFD959;
}

/* Step-2 "Go Back" — a text link, not a button. Renders inside the
 * registration form which has aggressive .custom-login-form button
 * styles (cream pill, full width, large padding), so we need !important
 * and a couple of layout resets to escape that styling. */
.custom-login-form button.wpcla-back-link {
    background: transparent !important;
    color: #FFB800 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 24px 0 24px 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    display: inline-block !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.custom-login-form button.wpcla-back-link:hover,
.custom-login-form button.wpcla-back-link:focus {
    color: #FFCC44 !important;
    background: transparent !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Inline link-styled button used in messages like the "Click here to
 * resend" link in the unverified-login banner. Same idea as
 * .wpcla-back-link but inline (sits inside a paragraph) and shorter. */
.custom-login-form button.wpcla-link-button,
.custom-login-form button.wpcla-link-button:active {
    background: transparent !important;
    color: #FFB800 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    font-weight: 600 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    display: inline !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    vertical-align: baseline !important;
}

.custom-login-form button.wpcla-link-button:hover,
.custom-login-form button.wpcla-link-button:focus {
    color: #FFCC44 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Override the base `.custom-login-form button` rules which use
 * !important on background/color/border. Without this the Cancel
 * button renders as a filled cream button identical to Send, because
 * the form carries both .custom-login-form and .custom-forgot-form
 * classes. Matching the !important flag and going one specificity
 * step deeper wins the cascade.
 *
 * Same rationale applies to .custom-reset-form. */
.custom-forgot-form .custom-auth-btn--secondary,
.custom-reset-form .custom-auth-btn--secondary {
    background: transparent !important;
    color: #E2DFD9 !important;
    border: 1px solid #E2DFD9 !important;
}

.custom-forgot-form .custom-auth-btn--secondary:hover,
.custom-forgot-form .custom-auth-btn--secondary:focus,
.custom-reset-form .custom-auth-btn--secondary:hover,
.custom-reset-form .custom-auth-btn--secondary:focus {
    background: rgba(226, 223, 217, 0.08) !important;
    color: #E2DFD9 !important;
    box-shadow: 0 0 12px 0 #E2DFD959 !important;
}

/* ---------- Mobile / tablet breakpoint ---------- */
@media (max-width: 1024px) {
    .custom-login-form label {
        font-size: 14px;
        font-weight: 700;
        font-family: Inter, sans-serif;
    }
    .custom-login-form input,
    .custom-login-form select {
        width: 100%;
        padding: 16px 24px;
        border-radius: 16px;
        font-size: 14px;
    }
    .custom-login-form .forgot-password {
        font-size: 14px;
    }
    .custom-login-form button {
        padding: 14px 24px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }

    /* Forgot/reset/verify mobile typography spec.
     *
     * Unlike login (which scales down to compact mobile sizes), these
     * pages keep most of the desktop typography on mobile because the
     * design uses generous spacing. Only the 48px heading shrinks
     * (to 28px); subtitle stays at 22px, labels at 16px, inputs at
     * full 18px/19px/24px/26px padding and 16px font.
     *
     * Selectors are scoped to .custom-forgot-form / .custom-reset-form /
     * .custom-verify-pending / .custom-verify-result. These same forms
     * also carry .custom-login-form so we need !important to override
     * the .custom-login-form mobile rules above. */
    .custom-forgot-form .custom-auth-heading,
    .custom-reset-form .custom-auth-heading,
    .custom-verify-pending .custom-auth-heading,
    .custom-verify-result .custom-auth-heading {
        font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 800;
        font-size: 28px;
        text-align: left;
    }
    .custom-forgot-form .custom-auth-subtitle,
    .custom-reset-form .custom-auth-subtitle,
    .custom-verify-pending .custom-auth-subtitle,
    .custom-verify-result .custom-auth-subtitle {
        font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400;
        font-size: 22px;
    }
    .custom-forgot-form label,
    .custom-reset-form label,
    .custom-verify-pending label,
    .custom-verify-result label {
        font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600;
        font-size: 16px !important;
    }
    /* Inputs/selects keep desktop padding + size. !important because
     * .custom-login-form mobile rule above sets a smaller padding/font. */
    .custom-forgot-form input,
    .custom-forgot-form select,
    .custom-reset-form input,
    .custom-reset-form select,
    .custom-verify-pending input,
    .custom-verify-pending select,
    .custom-verify-result input,
    .custom-verify-result select {
        padding: 18px 24px 19px 26px !important;
        border-radius: 20px !important;
        font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        margin-bottom: 36px;
    }
    /* Password wrap matches the input mobile margin — the wrap owns
     * the bottom spacing, not the inner input. */
    .custom-reset-form .wpcla-password-wrap {
        margin-bottom: 36px;
    }
}

/* Phone-specific narrower breakpoint. Below 768px the 22px subtitle
 * (set by the ≤1024px rule above) starts wrapping awkwardly on long
 * subtitles like "We sent a verification link to long@email.com.
 * Click the link in the email to activate your account." Drop to
 * 16px so the line length stays readable. */
@media (max-width: 767px) {
    .custom-forgot-form .custom-auth-subtitle,
    .custom-reset-form .custom-auth-subtitle,
    .custom-verify-pending .custom-auth-subtitle,
    .custom-verify-result .custom-auth-subtitle {
        font-size: 16px;
    }
}

/* =============================================================
 * Elementor kit override — font-family only
 *
 * Elementor's site kit (the .elementor-kit-N rule) applies a global
 * font-family to every button and input on the site (e.g. "Clash
 * Display"). Our auth-forms.css loads BEFORE Elementor's kit CSS,
 * so without !important the kit wins on equal specificity.
 *
 * Listing every form element we use here, with !important on
 * font-family ONLY. Other properties (color, size, weight, padding)
 * are already won by the per-form rules above via their own
 * !important flags or by being targeted enough.
 *
 * If Elementor's selector list changes in a future version and our
 * fonts revert, audit by inspecting in DevTools and add the offending
 * selector below.
 * ============================================================= */
.custom-login-form,
.custom-login-form label,
.custom-login-form input,
.custom-login-form select,
.custom-login-form button,
.custom-login-form input[type="text"],
.custom-login-form input[type="email"],
.custom-login-form input[type="password"],
.custom-login-form input[type="submit"],
.custom-login-form input[type="button"],
.custom-login-form input[type="reset"],
.custom-forgot-form .custom-auth-heading,
.custom-reset-form .custom-auth-heading,
.custom-forgot-form .custom-auth-subtitle,
.custom-reset-form .custom-auth-subtitle,
.custom-auth-btn {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Headings on forgot/reset stay on Exo 2 — override after the
 * generic rule above so Inter doesn't smash through. */
.custom-forgot-form .custom-auth-heading,
.custom-reset-form .custom-auth-heading {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Password toggle button needs Elementor overrides too — the kit's
 * button selectors (.elementor-kit-N button) have specificity (0,1,1)
 * which beats our plain .wpcla-password-toggle (0,1,0). Scope the
 * overrides under .custom-reset-form to get (0,2,0), enough to win
 * even with the kit also using !important.
 *
 * Also targeting .custom-login-form because the reset form carries
 * BOTH classes — belt and suspenders. */
.custom-reset-form .wpcla-password-toggle,
.custom-login-form .wpcla-password-toggle {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #E2DFD9 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    /* Re-assert layout in case Elementor's button rules set display
     * to inline-block or block — we need inline-flex for the icon
     * to center inside the 32x32 button. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Re-assert positioning — Elementor's button rules occasionally
     * set position:relative which would knock the absolute positioning
     * out of effect. The wrap is the positioning context. */
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    line-height: 0 !important;
    box-shadow: none !important;
}

.custom-reset-form .wpcla-password-toggle:hover,
.custom-reset-form .wpcla-password-toggle:focus,
.custom-login-form .wpcla-password-toggle:hover,
.custom-login-form .wpcla-password-toggle:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}