/* FIX: Error message flashing and repositioning on mobile */
/* Prevents error messages from appearing at top then flashing to left side */

/* Target all possible error message selectors */
.alert,
.alert-danger,
.error-alert,
.login-error,
[role="alert"],
.error-message,
.danger,
.alert-error,
div[class*="error"],
div[class*="alert"] {
    /* Force fixed position at top - prevents repositioning */
    position: fixed !important;
    top: 20px !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;

    /* Prevent cropping */
    overflow: visible !important;
    word-wrap: break-word !important;
    white-space: normal !important;

    /* Typography */
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;

    /* Ensure visibility */
    z-index: 99999 !important;

    /* CRITICAL: Disable ALL animations and transitions */
    transform: none !important;
    animation: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    -webkit-animation: none !important;
    -webkit-transition: none !important;

    /* Prevent layout shifts */
    will-change: auto !important;
    backface-visibility: visible !important;

    /* Ensure it renders immediately */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Disable any fade-in/slide-in animations */
@keyframes fadeIn,
@keyframes slideIn,
@keyframes slideDown,
@keyframes show {
    from, to {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Override Bootstrap/framework animations */
.fade.in,
.fade.show,
.alert.fade,
.alert.show {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    .alert,
    .alert-danger,
    .error-alert,
    [role="alert"] {
        font-size: 13px !important;
        padding: 14px !important;
        top: var(--safe-area-inset-top, 0px) !important;
    }
}