/* ll-auth-alert.css  [AUTH-ALERT 2026-09-02]
   In-card notices for every LeadLocate sign-in surface: /login (login_new.tpl),
   the Quick Access PIN page (pin_access.php), forgot_password.tpl and
   reset_password.tpl. Replaces the floating iziToast "Error" toasts, which on
   phones rendered half off screen over the card (owner report 2026-09-02),
   timed out before they could be read, and carried a link nobody could reach.
   The notice sits INSIDE the card between the logo and the form, centered,
   never auto-dismisses, and its action is a real button. Colour language
   matches the unified card (ll-login-card.css): the same greens for success,
   the card's red (#bb321f) family for errors, 12 to 14px radii, glass tints. */
.llal {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 5px;
    margin: 0 0 14px; padding: 14px 16px 15px;
    border-radius: 14px;
    border: 1px solid rgba(187, 50, 31, 0.30);
    background: linear-gradient(180deg, rgba(255, 245, 244, 0.97) 0%, rgba(253, 236, 234, 0.97) 100%);
    color: #4a2f2b;
    font-family: inherit; font-size: 14px; line-height: 1.45;
    box-shadow: 0 10px 26px -18px rgba(120, 20, 10, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    box-sizing: border-box; width: 100%;
    animation: llalIn 420ms cubic-bezier(0.20, 0.85, 0.25, 1) both;
}
.llal-ico {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(187, 50, 31, 0.12); color: #b3301d;
    margin-bottom: 2px;
}
.llal-ico svg { width: 20px; height: 20px; display: block; }
.llal-title { font-size: 15px; font-weight: 700; color: #9c2a1a; letter-spacing: 0.01em; line-height: 1.3; }
.llal-text { margin: 0; color: #4a2f2b; }
.llal-text a { color: #9c2a1a; font-weight: 700; }
.llal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 7px; padding: 9px 20px; min-height: 40px;
    border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, #c93a25 0%, #a92a18 100%);
    color: #ffffff !important; font-weight: 700; font-size: 14px;
    text-decoration: none !important; cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(169, 42, 24, 0.80), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.llal-btn:hover, .llal-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.06); outline: none; }
.llal-btn:active { transform: translateY(0); }
.llal-foot { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: #7a5c57; }

.llal-success {
    border-color: rgba(6, 89, 34, 0.28);
    background: linear-gradient(180deg, rgba(243, 250, 245, 0.97) 0%, rgba(232, 245, 236, 0.97) 100%);
    color: #1f3a28;
    box-shadow: 0 10px 26px -18px rgba(6, 89, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
.llal-success .llal-ico { background: rgba(6, 89, 34, 0.12); color: #0a7a34; }
.llal-success .llal-title { color: #0b5b27; }
.llal-success .llal-text { color: #1f3a28; }
.llal-success .llal-foot { color: #4f6b58; }

@keyframes llalIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .llal { animation: none; } }
/* short phone viewports: the notice gives back ~20px so the card with a
   billing notice still fits an iPhone SE / small Android without scrolling */
@media (max-width: 767px) and (max-height: 660px) {
    .llal { padding: 11px 12px 12px; gap: 3px; margin-bottom: 10px; font-size: 13.5px; }
    .llal-ico { width: 30px; height: 30px; margin-bottom: 0; }
    .llal-ico svg { width: 17px; height: 17px; }
    .llal-btn { min-height: 36px; padding: 7px 18px; margin-top: 5px; }
}
@media (max-height: 470px) {
    .llal { padding: 10px 12px 11px; gap: 3px; margin-bottom: 10px; }
    .llal-ico { width: 30px; height: 30px; }
    .llal-ico svg { width: 17px; height: 17px; }
}

/* forgot_password.tpl and reset_password.tpl fill this box from their own
   client-side checks (CAPTCHA missing, passwords differ). Same look as the
   server notice above; the element selector outranks the legacy page rule. */
div.ll-auth-inline-error {
    margin: 0 0 12px; padding: 11px 14px;
    border-radius: 12px; text-align: center;
    border: 1px solid rgba(187, 50, 31, 0.30);
    background: linear-gradient(180deg, rgba(255, 245, 244, 0.97) 0%, rgba(253, 236, 234, 0.97) 100%);
    color: #9c2a1a; font-weight: 600; font-size: 13.5px; line-height: 1.45;
}