/* =====================================================================
   Toastr — PaySmart theme
   Works with the existing toastr.min.js / options (closeButton,
   progressBar, positionClass "toast-bottom-right" shown at top-center).
   Icons use the Remix Icon font that is already loaded on every page.
   ===================================================================== */
:root{
    --ts-bg:#ffffff;
    --ts-text:#14213d;
    --ts-muted:#6b7280;
    --ts-border:#e3e9f4;
    --ts-shadow:0 18px 40px -14px rgba(10,36,99,.35),0 2px 6px rgba(10,36,99,.08);
    --ts-success:#16a34a; --ts-success-bg:#e8f7ee;
    --ts-error:#f43b3b;   --ts-error-bg:#fdecec;
    --ts-warning:#d98a04; --ts-warning-bg:#fff5e0;
    --ts-info:#1e5bc6;    --ts-info-bg:#e8effc;
}
:root[data-theme="dark"]{
    --ts-bg:#0f1b3a;
    --ts-text:#ffffff;
    --ts-muted:#a9b6d3;
    --ts-border:#22325c;
    --ts-success-bg:rgba(22,163,74,.18);
    --ts-error-bg:rgba(244,59,59,.18);
    --ts-warning-bg:rgba(217,138,4,.2);
    --ts-info-bg:rgba(30,91,198,.25);
}

/* ---------- container + positions ---------- */
#toast-container{position:fixed;z-index:999999;pointer-events:none}
#toast-container *{box-sizing:border-box}
.toast-top-right{top:16px;right:16px}
.toast-top-left{top:16px;left:16px}
.toast-bottom-left{bottom:16px;left:16px}
/* project uses "toast-bottom-right" but shows it top-center */
.toast-bottom-right{top:16px;left:50%;transform:translateX(-50%)}
.toast-top-center{top:16px;left:0;right:0;width:100%}
.toast-bottom-center{bottom:16px;left:0;right:0;width:100%}
.toast-top-full-width{top:0;right:0;width:100%}
.toast-bottom-full-width{bottom:0;right:0;width:100%}

/* ---------- toast card ---------- */
#toast-container > div{
    --ts-c:var(--ts-info);--ts-cbg:var(--ts-info-bg);
    position:relative;overflow:hidden;pointer-events:auto;cursor:pointer;
    width:380px;max-width:calc(100vw - 24px);margin:0 0 10px;
    padding:14px 46px 16px 64px;min-height:64px;
    display:flex;flex-direction:column;justify-content:center;
    background:var(--ts-bg) none !important;color:var(--ts-text);
    border:1px solid var(--ts-border);border-radius:14px;
    box-shadow:var(--ts-shadow);opacity:1;
    font-family:'Lexend',sans-serif;
}
#toast-container > div:hover{box-shadow:var(--ts-shadow);transform:translateY(-1px)}
#toast-container > .toast-success{--ts-c:var(--ts-success);--ts-cbg:var(--ts-success-bg)}
#toast-container > .toast-error{--ts-c:var(--ts-error);--ts-cbg:var(--ts-error-bg)}
#toast-container > .toast-warning{--ts-c:var(--ts-warning);--ts-cbg:var(--ts-warning-bg)}
#toast-container > .toast-info,
#toast-container > .toast-classic{--ts-c:var(--ts-info);--ts-cbg:var(--ts-info-bg)}

/* colour strip on the left */
#toast-container > div::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ts-c);
    filter:none;z-index:0;
}
/* icon */
#toast-container > div::before{
    content:"\ee58";
    font-family:'remixicon' !important;font-style:normal;font-weight:normal;
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:11px;padding:0;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;color:var(--ts-c);background:var(--ts-cbg) none !important;box-shadow:none;
}
#toast-container > .toast-success::before{content:"\eb80"}
#toast-container > .toast-error::before{content:"\eca0"}
#toast-container > .toast-warning::before{content:"\ea20"}

/* text */
.toast-title{font-size:14.5px;font-weight:600;color:var(--ts-text);margin-bottom:2px;line-height:1.35}
.toast-message{font-size:13.5px;font-weight:400;line-height:1.45;color:var(--ts-text);word-wrap:break-word;-ms-word-wrap:break-word}
.toast-title + .toast-message{color:var(--ts-muted)}
.toast-message a,.toast-message label{color:var(--ts-c);font-weight:500;text-decoration:underline}
.toast-message a:hover{opacity:.8}

/* close button */
#toast-container .toast-close-button,
button.toast-close-button{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);float:none;
    width:28px;height:28px;padding:0;margin:0;border:0;border-radius:8px;
    background:transparent !important;-webkit-appearance:none;
    display:flex;align-items:center;justify-content:center;
    font-size:0;line-height:1;color:var(--ts-muted);opacity:1;text-shadow:none;cursor:pointer;z-index:2;
    transition:background .2s,color .2s;
}
#toast-container .toast-close-button::before{content:"\eb99";font-family:'remixicon' !important;font-size:18px}
#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus{background:#f3f6fb !important;color:var(--ts-text);opacity:1}
:root[data-theme="dark"] #toast-container .toast-close-button:hover{background:rgba(255,255,255,.08) !important}

/* progress bar */
#toast-container .toast-progress{
    position:absolute;left:0;bottom:0;height:3px;opacity:1;
    background:var(--ts-c);border-radius:0 3px 3px 0;z-index:1;
}

/* centred containers */
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div{margin:10px auto 0}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div{width:96%;margin-left:auto;margin-right:auto}

/* RTL */
#toast-container > div.rtl{direction:rtl;padding:14px 64px 16px 46px}
#toast-container > div.rtl::before{left:auto;right:16px}
#toast-container > div.rtl::after{left:auto;right:0}
#toast-container > div.rtl .toast-close-button{right:auto;left:10px}

/* fallback colours if a toast is rendered outside #toast-container */
.toast{background-color:var(--ts-bg)}
.toast-success{background-color:var(--ts-bg)}
.toast-error{background-color:var(--ts-bg)}
.toast-info{background-color:var(--ts-bg)}
.toast-warning{background-color:var(--ts-bg)}

/* ---------- mobile ---------- */
@media (max-width:575px){
    .toast-bottom-right,.toast-top-right,.toast-top-left{top:12px;left:12px;right:12px;transform:none}
    #toast-container > div{width:100%;max-width:none;padding:12px 42px 14px 58px}
    #toast-container > div::before{left:12px;width:34px;height:34px;font-size:18px}
}