/* New Wave Donation - every selector is namespaced under .nwd / .nwd__* */
.nwd {
    --nwd-bg: #1a1a2e;
    --nwd-text: #fff;
    --nwd-btn-bg: #e94560;
    --nwd-btn-text: #fff;
    --nwd-radius: 12px;
    --nwd-width: 340px;
    --nwd-mx: 20px;
    --nwd-my: 20px;
    --nwd-z: 1050;
    --nwd-sx: 0px;
    --nwd-sy: 24px;
    --nwd-dur: .3s;

    position: fixed;
    inset: 0;
    z-index: var(--nwd-z);
    display: flex;
    box-sizing: border-box;
    padding: max(var(--nwd-my), env(safe-area-inset-top)) max(var(--nwd-mx), env(safe-area-inset-right)) max(var(--nwd-my), env(safe-area-inset-bottom)) max(var(--nwd-mx), env(safe-area-inset-left));
    pointer-events: none;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.nwd *,
.nwd *::before,
.nwd *::after { box-sizing: border-box; }

.nwd[hidden] { display: none; }

/* 3x3 position matrix */
.nwd--v-top { align-items: flex-start; }
.nwd--v-middle { align-items: center; }
.nwd--v-bottom { align-items: flex-end; }
.nwd--h-left { justify-content: flex-start; }
.nwd--h-center { justify-content: center; }
.nwd--h-right { justify-content: flex-end; }

/* slide direction follows the anchor edge */
.nwd--h-left { --nwd-sx: -32px; --nwd-sy: 0px; }
.nwd--h-right { --nwd-sx: 32px; --nwd-sy: 0px; }
.nwd--h-center.nwd--v-top { --nwd-sx: 0px; --nwd-sy: -32px; }
.nwd--h-center.nwd--v-bottom,
.nwd--h-center.nwd--v-middle { --nwd-sx: 0px; --nwd-sy: 32px; }

.nwd__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: auto;
    transition: opacity var(--nwd-dur) ease;
}

.nwd.is-visible .nwd__backdrop { opacity: 1; }
.nwd.is-leaving .nwd__backdrop { opacity: 0; }

.nwd__panel {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--nwd-width);
    max-width: 100%;
    padding: 20px 22px 22px;
    border-radius: var(--nwd-radius);
    background: var(--nwd-bg);
    color: var(--nwd-text);
    pointer-events: auto;
    text-align: left;
    opacity: 0;
    transition: opacity var(--nwd-dur) ease, transform var(--nwd-dur) ease;
}

.nwd[data-shadow="small"] .nwd__panel { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.nwd[data-shadow="medium"] .nwd__panel { box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.nwd[data-shadow="large"] .nwd__panel { box-shadow: 0 16px 48px rgba(0, 0, 0, .4); }

.nwd__panel:focus-visible { outline: 3px solid var(--nwd-btn-bg); outline-offset: 3px; }

/* enter animation (initial state) */
.nwd[data-anim="slide"]:not(.is-visible) .nwd__panel { transform: translate(var(--nwd-sx), var(--nwd-sy)); }
.nwd[data-anim="scale"]:not(.is-visible) .nwd__panel { transform: scale(.92); }
.nwd[data-anim="none"] .nwd__panel { transition: none; }
.nwd.is-visible .nwd__panel { opacity: 1; transform: none; }

/* exit animation (set by JS through data-exit) */
.nwd.is-leaving[data-exit="fade"] .nwd__panel { opacity: 0; transform: none; }
.nwd.is-leaving[data-exit="slide"] .nwd__panel { opacity: 0; transform: translate(var(--nwd-sx), var(--nwd-sy)); }
.nwd.is-leaving[data-exit="none"] .nwd__panel,
.nwd.is-leaving[data-exit="none"] .nwd__backdrop { transition: none; }

.nwd__title {
    margin: 0 28px 8px 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.3;
}

.nwd__text {
    margin: 0 0 16px;
    color: inherit;
    font-size: .95em;
    white-space: pre-line;
}

.nwd__button {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--nwd-btn-bg);
    border-radius: calc(var(--nwd-radius) * .6);
    background: var(--nwd-btn-bg);
    color: var(--nwd-btn-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.nwd__button:hover { filter: brightness(1.08); text-decoration: none; color: var(--nwd-btn-text); }
.nwd__button:focus-visible,
.nwd__close:focus-visible,
.nwd__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #000; }

.nwd__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}

.nwd__close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }

.nwd__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* collapsible floating widget */
.nwd__toggle {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--nwd-bg);
    color: var(--nwd-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.nwd--collapsible .nwd__toggle { display: inline-flex; }
.nwd--collapsible:not(.is-collapsed) .nwd__toggle { display: none; }
.nwd--collapsible.is-collapsed .nwd__panel { display: none; }
.nwd__toggle-icon { color: var(--nwd-btn-bg); }

/* modal: dialog is on top of the backdrop and centred through the position matrix */
.nwd--modal .nwd__panel { max-height: 100%; overflow: auto; }

/* mobile / compact (breakpoint comes from the module parameter via JS and inline CSS, never hardcoded here) */
.nwd--compact {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
}

.nwd--compact .nwd__panel {
    width: 100%;
    max-width: none;
    border-radius: var(--nwd-radius) var(--nwd-radius) 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
}

.nwd--compact.nwd--collapsible { padding: var(--nwd-my) var(--nwd-mx); }
.nwd--compact.nwd--collapsible:not(.is-collapsed) { padding: 0; }
.nwd--compact { --nwd-sx: 0px; --nwd-sy: 40px; }

@media (prefers-reduced-motion: reduce) {
    .nwd,
    .nwd .nwd__panel,
    .nwd .nwd__backdrop { transition: none !important; }
    .nwd:not(.is-visible) .nwd__panel { transform: none !important; }
}

@media (forced-colors: active) {
    .nwd__panel { border: 2px solid CanvasText; }
    .nwd__button { border-color: ButtonText; }
}

/* no-JavaScript fallback: a plain, accessible donation link rendered inside <noscript> */
.nwd-fallback {
    box-sizing: border-box;
    margin: 1em 0;
    padding: 1em 1.25em;
    border: 2px solid currentcolor;
    border-radius: 8px;
}

.nwd-fallback__title { margin: 0 0 .5em; font-size: 1.2em; }
.nwd-fallback__text { margin: 0 0 .75em; white-space: pre-line; }
.nwd-fallback__action { margin: 0; }
.nwd-fallback__link { font-weight: 700; text-decoration: underline; }
