/* In-page notices (see js/notify.js). Replaces the browser's alert() pop-ups. */

.site-notices {
    position: fixed;
    top: 96px;
    left: 50%;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(calc(100vw - 32px), 500px);
    transform: translateX(-50%);
    pointer-events: none; /* only the notices themselves take clicks */
}

.site-notice {
    --notice-bg: #fdf0ee;
    --notice-border: #e6b5ae;
    --notice-text: #6b1a12;
    --notice-accent: #b3261e;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px 12px 16px;
    border: 1px solid var(--notice-border);
    border-left: 5px solid var(--notice-accent);
    border-radius: 12px;
    background: var(--notice-bg);
    color: var(--notice-text);
    box-shadow: 0 2px 4px rgba(15, 31, 23, 0.08), 0 16px 36px rgba(15, 31, 23, 0.18);
    pointer-events: auto;
}

.site-notice--warning {
    --notice-bg: #fff8e6;
    --notice-border: #ecd28a;
    --notice-text: #5a4000;
    --notice-accent: #a15c00;
}

.site-notice--info {
    --notice-bg: #eaf4f4;
    --notice-border: #a8cfcf;
    --notice-text: #12383a;
    --notice-accent: #236967;
}

.site-notice--success {
    --notice-bg: #ecf7ef;
    --notice-border: #a9d6b5;
    --notice-text: #0f3d1d;
    --notice-accent: #188641;
}

.site-notice__icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--notice-accent);
}

.site-notices .site-notice__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 2px 0 0;
    padding: 0;
    color: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    text-shadow: none;
    overflow-wrap: anywhere;
}

/* The site-wide `button` styles (pill shape, 160px minimum width) must not leak into the close button. */
.site-notices .site-notice__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: -6px 0 -6px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--notice-text);
    cursor: pointer;
    transform: none;
}

.site-notices .site-notice__close:hover {
    background: rgba(0, 0, 0, 0.07);
    box-shadow: none;
    transform: none;
}

.site-notices .site-notice__close:focus-visible {
    outline: 3px solid var(--notice-accent);
    outline-offset: 0;
}

/* Field the notice is about, until the guest edits it. */
input.has-notice-error,
select.has-notice-error,
textarea.has-notice-error {
    border-color: #b3261e !important;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16) !important;
}

/* A notice that is on its way out can no longer be clicked. */
.site-notice.is-leaving {
    pointer-events: none;
}

@media (max-width: 992px) {
    .site-notices {
        top: 92px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .site-notice {
        animation: site-notice-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .site-notice.is-nudged {
        animation: site-notice-nudge 0.32s ease both;
    }

    .site-notice.is-leaving {
        animation: site-notice-out 0.2s ease both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-notice.is-leaving {
        opacity: 0;
    }
}

@keyframes site-notice-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@keyframes site-notice-nudge {
    0%, 100% { transform: none; }
    30% { transform: translateX(-6px); }
    65% { transform: translateX(5px); }
}

@keyframes site-notice-out {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@media print {
    .site-notices {
        display: none;
    }
}