/* ==============================
   PREMIUM TOAST NOTIFICATION
============================== */

:root{
    --primary:#5A321E;
    --primary-dark:#321A10;

    --gold:#C99B3C;
    --gold-dark:#A97922;

    --cream:#FFF9F0;
    --border:#E9DDCF;

    --success:#2E8B57;
    --success-bg:#EDF8F1;

    --danger:#D64545;
    --danger-bg:#FDEDED;

    --warning:#D68A00;
    --warning-bg:#FFF7E2;

    --shadow:0 16px 35px rgba(70,42,25,.18);
}


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

#toast{

    position:fixed;

    top:25px;
    right:25px;

    min-width:280px;
    max-width:380px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 20px;

    border:1px solid rgba(201,155,60,.25);
    border-left:5px solid var(--primary);

    border-radius:14px;

    background:rgba(255,255,255,.96);

    color:var(--dark);

    font-size:14px;
    font-weight:600;
    line-height:1.5;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:var(--shadow);

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px) scale(.96);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

    z-index:99999;
}


/* ==============================
   SHOW
============================== */

#toast.show{

    opacity:1;
    visibility:visible;

    transform:translateY(0) scale(1);

}


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

#toast.success{

    background:var(--success-bg);

    color:var(--success);

    border-left-color:var(--success);

}


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

#toast.error{

    background:var(--danger-bg);

    color:var(--danger);

    border-left-color:var(--danger);

}


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

#toast.warning{

    background:var(--warning-bg);

    color:var(--warning);

    border-left-color:var(--gold-dark);

}


/* ==============================
   HOVER
============================== */

#toast:hover{

    transform:translateY(-2px);

    box-shadow:0 20px 42px rgba(70,42,25,.22);

}


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

@media(max-width:768px){

    #toast{

        left:15px;
        right:15px;
        top:18px;

        min-width:auto;
        max-width:none;

        padding:15px 18px;

        font-size:13px;

    }

}


@media(max-width:420px){

    #toast{

        border-radius:12px;

        padding:14px 16px;

        font-size:12.5px;

    }

}