/* =========================================================
   NINOSEPO — GLOBAL TOAST SYSTEM
   ========================================================= */


/* =========================================================
   HIDE NATIVE WOOCOMMERCE NOTICES IMMEDIATELY
   ========================================================= */

/*
 * WooCommerce still creates and manages all notices.
 *
 * We only suppress their VISUAL output.
 *
 * JavaScript continues reading these DOM elements and
 * converts their content into Ninosepo glass toasts.
 *
 * Because this CSS loads in <head>, the ugly WooCommerce
 * notices no longer flash for a split second before JS runs.
 */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner{
    display:none !important;
}


/*
 * Additional consumed state used by our JS.
 */

.ninosepo-notice-consumed{
    display:none !important;
}


/* =========================================================
   TOAST REGION — DESKTOP
   ========================================================= */

/*
 * Desktop placement:
 *
 * Floating at the bottom center of the viewport.
 *
 * This matches the area you marked in the screenshot and
 * avoids competing with the Ninosepo header.
 */

.ninosepo-toast-region{
    position:fixed;

    z-index:999999;

    left:50%;
    bottom:24px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:10px;

    width:min(
        560px,
        calc(100vw - 48px)
    );

    transform:translateX(-50%);

    pointer-events:none;
}


/* =========================================================
   TOAST
   ========================================================= */

.ninosepo-toast{
    position:relative;

    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr)
        30px;

    align-items:start;

    gap:11px;

    width:100%;

    min-width:0;

    padding:
        13px
        12px
        13px
        13px;

    overflow:hidden;

    border:
        1px solid
        rgba(0,0,0,.075);

    border-radius:16px;

    background:
        rgba(250,250,250,.76);

    color:#111;

    box-shadow:
        0 2px 5px rgba(0,0,0,.025),
        0 10px 30px rgba(0,0,0,.09),
        0 24px 60px rgba(0,0,0,.06);

    backdrop-filter:
        blur(22px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);

    pointer-events:auto;

    opacity:0;

    /*
     * Bottom-positioned notification should enter
     * very slightly upward rather than sideways.
     */

    transform:
        translate3d(
            0,
            16px,
            0
        )
        scale(.985);

    transition:
        opacity .28s ease,
        transform .32s
        cubic-bezier(.22,1,.36,1);

    will-change:
        opacity,
        transform;
}


/* =========================================================
   GLASS HIGHLIGHT
   ========================================================= */

.ninosepo-toast::before{
    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.12) 42%,
            rgba(255,255,255,.04)
        );

    pointer-events:none;

    opacity:.68;
}


/* =========================================================
   ENTER / EXIT
   ========================================================= */

.ninosepo-toast.is-visible{
    opacity:1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


.ninosepo-toast.is-leaving{
    opacity:0;

    transform:
        translate3d(
            0,
            12px,
            0
        )
        scale(.985);

    pointer-events:none;
}


/* =========================================================
   STATUS ICON
   ========================================================= */

.ninosepo-toast__icon{
    position:relative;

    z-index:1;

    display:flex;

    width:32px;
    height:32px;

    align-items:center;
    justify-content:center;

    flex:0 0 32px;

    border-radius:50%;

    background:
        rgba(0,0,0,.055);

    color:#222;
}


.ninosepo-toast__icon svg{
    display:block;

    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   SUCCESS
   ========================================================= */

.ninosepo-toast--success
.ninosepo-toast__icon{
    background:
        rgba(31,153,76,.11);

    color:#188843;
}


/* =========================================================
   ERROR
   ========================================================= */

.ninosepo-toast--error
.ninosepo-toast__icon{
    background:
        rgba(200,47,47,.11);

    color:#b72d2d;
}


/* =========================================================
   INFO
   ========================================================= */

.ninosepo-toast--info
.ninosepo-toast__icon{
    background:
        rgba(0,0,0,.06);

    color:#333;
}


/* =========================================================
   WARNING
   ========================================================= */

.ninosepo-toast--warning
.ninosepo-toast__icon{
    background:
        rgba(180,125,20,.12);

    color:#9b6d15;
}


/* =========================================================
   CONTENT
   ========================================================= */

.ninosepo-toast__content{
    position:relative;

    z-index:1;

    min-width:0;

    padding-top:1px;
}


.ninosepo-toast__type{
    margin:0 0 3px;

    color:#666;

    font-size:9px;

    font-weight:600;

    line-height:1.2;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.ninosepo-toast__message{
    margin:0;

    color:#111;

    font-size:12px;

    font-weight:400;

    line-height:1.45;

    overflow-wrap:anywhere;
}


/* =========================================================
   OPTIONAL ACTION LINK
   ========================================================= */

.ninosepo-toast__action{
    display:inline-flex;

    margin-top:7px;

    color:#111;

    font-size:11px;

    font-weight:600;

    line-height:1.2;

    text-decoration:underline;

    text-decoration-thickness:1px;

    text-underline-offset:3px;

    transition:
        opacity .16s ease;
}


.ninosepo-toast__action:hover{
    color:#111;

    opacity:.55;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.ninosepo-toast__close{
    position:relative;

    z-index:2;

    display:flex;

    width:30px;
    height:30px;

    margin:-3px -3px 0 0;

    padding:0;

    align-items:center;
    justify-content:center;

    border:0 !important;

    border-radius:50% !important;

    background:
        transparent !important;

    color:#555 !important;

    box-shadow:none !important;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    transition:
        background .15s ease,
        color .15s ease;
}


.ninosepo-toast__close:hover{
    background:
        rgba(0,0,0,.055) !important;

    color:#111 !important;
}


.ninosepo-toast__close:focus-visible{
    outline:
        1px solid
        rgba(0,0,0,.55);

    outline-offset:1px;
}


.ninosepo-toast__close svg{
    display:block;

    width:13px;
    height:13px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;
}


/* =========================================================
   STATUS ACCENT
   ========================================================= */

/*
 * Tiny status line.
 *
 * We deliberately avoid coloring the whole toast.
 */

.ninosepo-toast::after{
    content:"";

    position:absolute;

    z-index:2;

    top:12px;
    bottom:12px;
    left:0;

    width:2px;

    border-radius:
        0 2px 2px 0;

    background:
        rgba(0,0,0,.16);
}


.ninosepo-toast--success::after{
    background:#36935a;
}


.ninosepo-toast--error::after{
    background:#bc4141;
}


.ninosepo-toast--warning::after{
    background:#ae7c25;
}


.ninosepo-toast--info::after{
    background:#777;
}


/* =========================================================
   PAUSED
   ========================================================= */

/*
 * Hover/focus pauses the 10-second timer.
 *
 * Only a tiny glass-opacity adjustment is used so
 * interaction doesn't cause a distracting visual jump.
 */

.ninosepo-toast.is-paused{
    background:
        rgba(252,252,252,.88);
}


/* =========================================================
   DESKTOP — LARGE SCREENS
   ========================================================= */

@media(min-width:1200px){

    .ninosepo-toast-region{
        /*
         * Slightly wider on desktop,
         * close to the region you marked.
         */

        width:min(
            550px,
            calc(100vw - 60px)
        );

        bottom:26px;
    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media(max-width:767px){

    .ninosepo-toast-region{
        top:auto;

        right:12px;
        bottom:16px;
        left:12px;

        width:auto;

        transform:none;

        align-items:stretch;

        gap:8px;
    }


    .ninosepo-toast{
        grid-template-columns:
            32px
            minmax(0,1fr)
            30px;

        gap:10px;

        padding:
            12px
            11px
            12px
            12px;

        border-radius:15px;

        background:
            rgba(250,250,250,.82);

        box-shadow:
            0 8px 28px rgba(0,0,0,.11),
            0 20px 50px rgba(0,0,0,.06);

        transform:
            translate3d(
                0,
                18px,
                0
            )
            scale(.985);
    }


    .ninosepo-toast.is-visible{
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }


    .ninosepo-toast.is-leaving{
        transform:
            translate3d(
                0,
                12px,
                0
            )
            scale(.985);
    }


    .ninosepo-toast__icon{
        width:30px;
        height:30px;

        flex-basis:30px;
    }


    .ninosepo-toast__message{
        font-size:12px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .ninosepo-toast{
        transition:
            opacity .12s linear;

        transform:none !important;
    }

}