/*
 * Regit notice presentation — REGIT-035.
 *
 * Event Espresso's page-level notices, which appear after a form is refused on
 * the server: a failed ticket selection, an expired session, a sold-out ticket
 * taken between two clicks. EE_Error::formatNoticesOutput() builds them
 * (EE_Error.core.php:884) and espresso_core.js:246 reveals them.
 *
 * What they looked like: 21.8px centred bold text in a 4px #fb516d box with
 * square corners, floating over the event description, larger than the page's
 * own body copy and in a pink that appears nowhere else on the site.
 *
 * This is the FALLBACK path, not the primary one. The ticket selector now
 * refuses an empty booking in the browser, so a visitor with JavaScript should
 * never reach these for that case — but they are what a visitor without it
 * sees, and what every other Event Espresso refusal still uses, so they have to
 * look like they belong to the same product.
 *
 * Scoped to #espresso-notices, which is core's own wrapper, so nothing on the
 * host page is touched.
 */

#espresso-notices {
    --regit-notice-radius: 6px;

    --regit-notice-error-ink: #8a2424;
    --regit-notice-error-line: #c0392b;
    --regit-notice-error-bg: #fdf2f2;

    --regit-notice-attention-ink: #6a4a00;
    --regit-notice-attention-line: #b8860b;
    --regit-notice-attention-bg: #fdf6e3;

    --regit-notice-success-ink: #1c5c3f;
    --regit-notice-success-line: #2e7d5b;
    --regit-notice-success-bg: #eef7f2;
}

/*
 * In the flow, not on top of it.
 *
 * Core centres these with position/z-index so they land wherever the page
 * happens to have scrolled, which is how one came to sit over the event
 * description with a list bullet poking out from behind it.
 */
#espresso-notices .espresso-notices {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    box-sizing: border-box;
    width: auto;
    max-width: 42rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--regit-notice-error-line);
    border-inline-start: 4px solid var(--regit-notice-error-line);
    border-radius: var(--regit-notice-radius);
    background: var(--regit-notice-error-bg);
    box-shadow: none;
    text-align: start;
}

#espresso-notices .espresso-notices p {
    margin: 0;
    /* Not larger than the page it interrupts. Core set 1.5em on a centred
       bold paragraph, which is why it read as a dialog rather than a message. */
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--regit-notice-error-ink);
    text-align: start;
}

#espresso-notices .espresso-notices.attention {
    border-color: var(--regit-notice-attention-line);
    background: var(--regit-notice-attention-bg);
}

#espresso-notices .espresso-notices.attention p {
    color: var(--regit-notice-attention-ink);
}

#espresso-notices .espresso-notices.success {
    border-color: var(--regit-notice-success-line);
    background: var(--regit-notice-success-bg);
}

#espresso-notices .espresso-notices.success p {
    color: var(--regit-notice-success-ink);
}

/* The dismiss control, which core renders as a bare dashicon. */
#espresso-notices .close-espresso-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 32px;
    min-height: 32px;
    margin-inline-start: auto;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}

#espresso-notices .close-espresso-notice:hover,
#espresso-notices .close-espresso-notice:focus-visible {
    opacity: 1;
}

#espresso-notices .close-espresso-notice:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}