/* ============================================================================
   TCF Mentor — Login Page Error Banner (Chapter 4 · 2026-05-30)

   Styles the branded error banner injected above the Elementor login
   widget on /connexion/ when a login attempt fails.

   Matches the design tokens from pmpro-checkout.css and pmpro-confirmation.css
   (Inter font, #005C98 brand blue, soft-blue surfaces, 10/14px radii).
   The banner reuses the same shape as .tcfm-confirm-inclusion but in
   error-red instead of brand-blue.

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

/* ----------------------------------------------------------------------------
   1. Design tokens — scoped to .tcfm-login-error so we don't leak globals.
---------------------------------------------------------------------------- */

.tcfm-login-error {
    --tcfm-error:          #d92020;
    --tcfm-error-bg:       #fef2f2;
    --tcfm-error-border:   rgba(217, 32, 32, 0.25);

    --tcfm-text:           #111111;
    --tcfm-text-3:         #6b6b6b;

    --tcfm-radius:         10px;
    --tcfm-radius-lg:      14px;

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

    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin: 0 auto 24px;
    max-width: 680px;
    background: var(--tcfm-error-bg);
    border: 1px solid var(--tcfm-error-border);
    border-left: 4px solid var(--tcfm-error);
    border-radius: var(--tcfm-radius);
    font-family: var(--tcfm-font-text);
    color: var(--tcfm-text);
    font-size: 14px;
    line-height: 1.55;
    box-sizing: border-box;

    /* Subtle entrance animation so the user notices it appearing. */
    animation: tcfm-login-error-in 0.32s ease-out;
}

@keyframes tcfm-login-error-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------------------------------------------
   2. Icon — red warning circle, aligned with first line of text.
---------------------------------------------------------------------------- */

.tcfm-login-error__icon {
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tcfm-error);
    margin-top: 1px;
}

.tcfm-login-error__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ----------------------------------------------------------------------------
   3. Text block — title + body.
---------------------------------------------------------------------------- */

.tcfm-login-error__body {
    flex: 1 1 auto;
    min-width: 0;
}

.tcfm-login-error__title {
    margin: 0 0 4px !important;
    font-size: 15px;
    font-weight: 680;
    color: var(--tcfm-error);
    line-height: 1.3;
    letter-spacing: -0.1px;
}

.tcfm-login-error__text {
    margin: 0 !important;
    font-size: 14px;
    font-weight: 460;
    color: var(--tcfm-text);
    line-height: 1.55;
}

.tcfm-login-error__text a {
    color: var(--tcfm-error);
    text-decoration: underline;
    font-weight: 580;
    transition: color 0.15s ease;
}

.tcfm-login-error__text a:hover {
    color: #b01818;
}

/* ----------------------------------------------------------------------------
   4. Spacing tweak — when the banner sits directly above an Elementor
   section, give it a bit of breathing room from the form below.
---------------------------------------------------------------------------- */

.tcfm-login-error + .elementor-section,
.tcfm-login-error + .elementor-element {
    margin-top: 0 !important;
}

/* ----------------------------------------------------------------------------
   5. Mobile breakpoint.
---------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .tcfm-login-error {
        margin: 0 14px 20px;
        padding: 14px 16px;
        gap: 12px;
        font-size: 13.5px;
    }

    .tcfm-login-error__title {
        font-size: 14px;
    }

    .tcfm-login-error__text {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .tcfm-login-error__icon {
        flex-basis: 18px;
    }

    .tcfm-login-error__icon svg {
        width: 18px;
        height: 18px;
    }
}