/* Base styles for all error notifications */
.erh-notification {
    min-height: 47px;
    max-height: 47px;
    height: 47px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 12px;
    display: block;
    color: white;
    font-size: 11pt;
    font-family: sans-serif;
    border-radius: 0;
    padding-right: 30px;
    position: fixed;
    z-index: 99999999999999999;
    width: 100vw;
    left: 0;
    transition: top 0.3s ease;
    /* Set a default top position */
    top: 0;
}

/* Error types with specific colors */
.erh-error {
    background: red;
    border-left: 9px solid darkred;
}

.erh-correct {
    background: forestgreen;
    border-left: 9px solid darkgreen;
}

.erh-notice {
    background: orange;
    border-left: 9px solid darkorange;
}

.erh-warning {
    background: orangered;
    border-left: 9px solid darkred;
}

/* Message content styles */
.erh-message {
    color: white;
    text-decoration: none;
    float: left;
    display: inline-block;
    max-width: calc(100% - 30px);
}

/* For backward compatibility with existing classes */
.new-error-handler {
    /* Same as erh-error */
}

.trigger-correct {
    /* Same as erh-correct */
}

.trigger-notice {
    /* Same as erh-notice */
}

.trigger-warning {
    /* Same as erh-warning */
}

/* Close button styles */
.erh-close {
    top: 10px;
    right: 12px;
    margin-right: 12px;
    position: absolute;
    font-size: 13pt;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

/* Animation for new notifications */
@keyframes erhFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.erh-notification {
    animation: erhFadeIn 0.3s ease-in-out;
}

/*
 * Remove nth-of-type selectors since they're causing issues
 * with mixed element types (code vs div)
 */

/* Add positioning attributes to help with no-JS fallback */
.erh-notification[data-position="0"] { top: 0px; }
.erh-notification[data-position="1"] { top: 47px; }
.erh-notification[data-position="2"] { top: 94px; }
.erh-notification[data-position="3"] { top: 141px; }
.erh-notification[data-position="4"] { top: 188px; }
.erh-notification[data-position="5"] { top: 235px; }
.erh-notification[data-position="6"] { top: 282px; }
.erh-notification[data-position="7"] { top: 329px; }

/* More comprehensive fallback for body margin - works without JS */
/* These selectors work even without the :has() selector support */
body .erh-notification:only-child {
    margin-top: 0; /* First notification needs no margin */
}

/* Single notification */
body .erh-notification[data-position="0"] ~ body {
    margin-top: 47px !important;
}

/* Two notifications */
body .erh-notification[data-position="1"] ~ body {
    margin-top: 94px !important;
}

/* Three notifications */
body .erh-notification[data-position="2"] ~ body {
    margin-top: 141px !important;
}

/* Four notifications */
body .erh-notification[data-position="3"] ~ body {
    margin-top: 188px !important;
}

/* Five notifications */
body .erh-notification[data-position="4"] ~ body {
    margin-top: 235px !important;
}

/* Six notifications */
body .erh-notification[data-position="5"] ~ body {
    margin-top: 282px !important;
}

/* Seven notifications */
body .erh-notification[data-position="6"] ~ body {
    margin-top: 329px !important;
}

/* Eight notifications */
body .erh-notification[data-position="7"] ~ body {
    margin-top: 376px !important;
}

/* Alternative approach for browsers that support :has() */
body:has(.erh-notification[data-position="0"]:not([data-position="1"])) {
    margin-top: 47px;
}

body:has(.erh-notification[data-position="1"]) {
    margin-top: 94px;
}

body:has(.erh-notification[data-position="2"]) {
    margin-top: 141px;
}

body:has(.erh-notification[data-position="3"]) {
    margin-top: 188px;
}

body:has(.erh-notification[data-position="4"]) {
    margin-top: 235px;
}

body:has(.erh-notification[data-position="5"]) {
    margin-top: 282px;
}

body:has(.erh-notification[data-position="6"]) {
    margin-top: 329px;
}

body:has(.erh-notification[data-position="7"]) {
    margin-top: 376px;
}

/* For browsers without JS and without fancy selectors, we need a simpler approach */
.no-js body {
    margin-top: 47px; /* Default to one notification margin at minimum */
}