/* ==========================================================================
   Egységes toast/értesítés — EGYETLEN komponens a korábbi két külön
   rendszer helyett: a kék showNotification()-sáv (szekely-membership.js,
   korábban .szekely-notification, zöld/piros bootstrap-stílus) és a
   Kedvencek ⭐ Mentés zöld toastja (szekely-membership/collections.js,
   .sd-save-toast — vízszintes görgetősávval, mert a #szekely-notification-
   container fix 250px szélessége alá csomagolt flex-sor az akciógombbal
   túlcsordult, és az overflow-y:auto emiatt a CSS overflow-számítási
   szabály miatt overflow-x:auto-t is kikényszerített).
   Egy igazságforrás, CLAUDE.md "Design rules": a megjelenés csakis itt él,
   a JS (szekely-membership.js, window.szekelyToast()) csak DOM-ot épít és
   osztályt vált.
   Sitewide betöltve, minden oldalon (szekely-design.php,
   szekely_design_enqueue_assets(), a front page-en is — a ⭐ Mentés gomb és
   az emoji-rating is megjelenik ott).
   Fibonacci térköz/méret/sugár, 233ms átmenet, prefers-reduced-motion.
   ========================================================================== */

#szekely-notification-container {
    position: fixed;
    top: var(--sd-89);
    right: var(--sd-21);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--sd-13);
    width: min(var(--sd-377), calc(100vw - var(--sd-34)));
    max-height: calc(100vh - var(--sd-144));
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;
}

/* A sticky fejléc admin-bar-eltolását követi (szekely-design.css), hogy a
   verem soha ne csússzon a fejléc alá bejelentkezett adminnál. */
body.admin-bar #szekely-notification-container {
    top: calc(var(--sd-89) + 32px);
}

@media (max-width: 782px) {
    body.admin-bar #szekely-notification-container {
        top: calc(var(--sd-89) + 46px);
    }
}

.sd-toast {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
    box-sizing: border-box;
    padding: var(--sd-13) var(--sd-21);
    border: 1px solid var(--sd-glass-border);
    border-radius: var(--sd-13);
    background: var(--sd-glass-strong);
    -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    box-shadow: var(--sd-shadow-raised);
    color: var(--color-two, #013A63);
    opacity: 0;
    transform: translateY(calc(var(--sd-13) * -1));
    transition: opacity var(--sd-hover) var(--sd-ease), transform var(--sd-hover) var(--sd-ease);
    pointer-events: auto;
}

.sd-toast.sd-is-visible {
    opacity: 1;
    transform: none;
}

.sd-toast__icon {
    flex: none;
    font-size: var(--sd-16);
    color: var(--color-four, #0285BA);
}

/* Csak a típus GLYPHJA különbözik (✓/ℹ/⚠) — a Minőségi mérce "egy
   igazságforrás" színszabálya szerint nincs külön zöld/piros árnyalat,
   csak a hiba kap egy komolyabb, sötétebb tónust a már meglévő négy
   márkaszínből. */
.sd-toast--error .sd-toast__icon {
    color: var(--color-two, #013A63);
}

.sd-toast__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--sd-16);
    line-height: 1.382;
    word-break: break-word;
}

.sd-toast__action {
    flex: none;
    padding: var(--sd-3) var(--sd-13);
    border: 0;
    border-radius: var(--sd-13);
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-family: inherit;
    font-size: var(--sd-13);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--sd-hover) var(--sd-ease);
}

.sd-toast__action:hover,
.sd-toast__action:focus-visible {
    transform: scale(1.05);
}

.sd-toast__close {
    flex: none;
    cursor: pointer;
    color: var(--sd-text-muted, #555);
    font-size: var(--sd-16);
    line-height: 1;
}

.sd-toast__close:hover,
.sd-toast__close:focus-visible {
    color: var(--color-two, #013A63);
}

@media (prefers-reduced-motion: reduce) {
    .sd-toast,
    .sd-toast__action {
        transition: none;
    }
}