/* ============================================================================
   MyPay Portal — platform toast

   Replaces the theme's toastr look: a flat saturated block, same colour whether
   it carried a confirmation or a failure, no icon, no close button, and nothing
   to show how long it would stay. It read as a debug message and people missed
   it entirely.

   This one is a white card with a tone-coloured rail and medallion, sized and
   shadowed to sit above the page rather than tint it. Colour identifies the
   kind of message instead of decorating it — the brand system permits a
   coloured left rule in exactly one place, and this is it.

   Class prefix .mpt- so nothing here can collide with the theme's own
   .toast-* rules, which are left in place and simply go unused.
   ========================================================================== */

.mpt-host {
    --mpt-ink: #1e1b4b;
    --mpt-text: #454b63;
    --mpt-faint: #8b90a8;
    --mpt-line: #e7e9f2;

    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 50%;
    pointer-events: none;
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
    z-index: 999999;
}

/* Clear of the fixed header once there is room beside the content. */
@media (min-width: 768px) {
    .mpt-host {
        left: auto;
        right: 24px;
        top: 88px;
        transform: none;
        width: 400px;
    }
}

.mpt {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--mpt-line);
    border-left: 4px solid var(--mpt-tone, #352f9f);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 13, 46, .06), 0 18px 40px -16px rgba(15, 13, 46, .38);
    cursor: pointer;
    display: flex;
    gap: 12px;
    overflow: hidden;
    padding: 14px 14px 15px;
    pointer-events: auto;
    position: relative;
    transform: translateY(-12px) scale(.97);
    opacity: 0;
    transition: opacity .22s cubic-bezier(.2, .7, .3, 1), transform .22s cubic-bezier(.2, .7, .3, 1);
}

.mpt.is-in { opacity: 1; transform: translateY(0) scale(1); }
.mpt.is-out { opacity: 0; transform: translateY(-8px) scale(.98); }

/* A faint wash of the tone, so the eye catches the kind of message before it
   reads a word of it — without the solid block the old one used. */
.mpt::after {
    background: var(--mpt-tone, #352f9f);
    content: "";
    inset: 0 0 0 0;
    opacity: .035;
    pointer-events: none;
    position: absolute;
}

.mpt-badge {
    align-items: center;
    background: var(--mpt-tone, #352f9f);
    border-radius: 10px;
    box-shadow: 0 6px 14px -6px var(--mpt-glow, rgba(53, 47, 159, .8));
    color: #fff;
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    position: relative;
    width: 34px;
    z-index: 1;
}

.mpt-badge svg { height: 19px; width: 19px; }

.mpt-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The badge's height, so a single line centres against the icon rather
       than hanging from the top of it. */
    min-height: 34px;
    min-width: 0;
    padding-right: 4px;
    position: relative;
    z-index: 1;
}

.mpt-title {
    color: var(--mpt-ink);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 1px 0 3px;
}

/* Standing alone, the line IS the message and may run to two or three lines,
   so it gets reading leading and a shade less weight than a real title. */
.mpt-title:only-child {
    font-size: .805rem;
    font-weight: 700;
    line-height: 1.5;
    /* No nudge in either direction: the column above does the centring. */
    margin: 0;
}

.mpt-message {
    color: var(--mpt-text);
    font-size: .795rem;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.mpt-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--mpt-faint);
    cursor: pointer;
    display: flex;
    flex: 0 0 26px;
    height: 26px;
    justify-content: center;
    margin: -2px -4px 0 auto;
    padding: 0;
    position: relative;
    transition: background .15s ease, color .15s ease;
    width: 26px;
    z-index: 1;
}

.mpt-close:hover { background: #f1f2f7; color: var(--mpt-ink); }
.mpt-close svg { height: 13px; width: 13px; }

/* How long is left. The old toast gave no indication it was about to leave. */
.mpt-timer {
    background: var(--mpt-tone, #352f9f);
    bottom: 0;
    height: 3px;
    left: 0;
    opacity: .85;
    position: absolute;
    transform-origin: left center;
    width: 100%;
    z-index: 1;
}

.mpt.is-held .mpt-timer { animation-play-state: paused; }

@keyframes mpt-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------------------------------------------------------- tones --- */
.mpt-success { --mpt-tone: #12855c; --mpt-glow: rgba(18, 133, 92, .75); }
.mpt-error   { --mpt-tone: #c0344a; --mpt-glow: rgba(192, 52, 74, .75); }
.mpt-warning { --mpt-tone: #b8770a; --mpt-glow: rgba(184, 119, 10, .75); }
.mpt-info    { --mpt-tone: #352f9f; --mpt-glow: rgba(53, 47, 159, .75); }

/* An error is the one a member must not miss, so it alone gets weight. */
.mpt-error { box-shadow: 0 2px 6px rgba(15, 13, 46, .06), 0 20px 44px -14px rgba(192, 52, 74, .45); }

@media (max-width: 767.98px) {
    .mpt { border-radius: 13px; padding: 13px 13px 14px; }
    .mpt-title { font-size: .8rem; }
    .mpt-message { font-size: .775rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mpt { transform: none; transition: opacity .12s linear; }
    .mpt.is-in, .mpt.is-out { transform: none; }
    .mpt-timer { animation: none !important; }
}

@media print { .mpt-host { display: none !important; } }