/*
 * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance,
 * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use,
 * make sure you copy the url from the website since the url may change between versions.
 * */
.toast-title {
  font-size:.875rem;
  line-height:1.25rem
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word
}

.toast-message a,
.toast-message label {
  color: #FFF
  font-size:.875rem;
  line-height:1.25rem
}

.toast-message a:hover {
  color: #CCC;
  text-decoration: none
}

.toast-close-button {
  position: relative;
  right: -.3em;
  top: -.3em;
  float: right;
  font-size:.875rem;
  line-height:1.25rem
  color: #FFF;
}

.toast-close-button:focus,
.toast-close-button:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.rtl .toast-close-button {
  left: -.3em;
  float: left;
  right: .3em
}

button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%
}

.toast-bottom-center {
  bottom: 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-top-left {
  top: 12px;
  left: 12px
}

.toast-top-right {
  top: 12px;
  right: 12px
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px
}

#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none
}

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

#toast-container>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  line-height: 1.3;
  will-change: transform;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
  max-width: 350px;
  /* pointer-events: auto; */
  padding: 8px 10px 8px 50px;
  border-radius: 8px;
  background-position: 15px center;
  background-repeat: no-repeat;
}

#toast-container>div.rtl {
  direction: rtl;
  padding: 15px 50px 15px 15px;
  background-position: right 15px center
}

#toast-container>div:hover {
  -moz-box-shadow: 0 0 12px #000;
  -webkit-box-shadow: 0 0 12px #000;
  box-shadow: 0 0 12px #000;
  cursor: pointer
}

#toast-container>.toast-info {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABEWlDQ1BTa2lhAAAokYWRoU7DUBSGP8YMCQkGMYG4AoGBDJYQBGqIBltGMnBtVwrJ2jW3XcYLEAwGgyY8BLwCnoCBh0AQNH9X0ZqO/+bc8+Xk5N77nwutDlK7C3GSW9fpm+HZuaEmL8hSmrUEvx/FDm/bC/qatDIKs0D5W5FbXa4jR+L1qOTrgv2S7wq2A/dI/Cjeimrs13iWp7n4tegPUlvwl/gwHk+D6t2shsnpifJQscEeOwrDAItHQsYFodgw44qcS1GGi0Nf5KgnZqr6P6rmOdHbDn5g+b6q+Q/wcgudz6q2+QRrN/D8nnrWm5failavV8550R3VXzR4NXOvDhOtiLEcGo7lNpB7I/9ddtn/A5FmRR9HEKhQAAAABHNCSVQICAgIfAhkiAAAAhpJREFUSIm9lU1rE1EUhp9zJx/009DSIl1YmhZcBBEsduFWcGnBRcFF9unEnSv7I1y0JDQI7gRBWmjXal34G4IiTUgp4kKhNom1mZl7XNRACUlnElvf1dzLmed975kzXKGHFtY12Uo05o2NTQn+h241VswdrP09MjW6X16RVrca6baZLtRdhQyGVbR7zTl5KCULe7X82HaoQbpQd1V4DiRDwJ36KcpaJT9W7GkwVzx+CLLTJ7hDulx1x3fbK9N+SBfq7r/DAWTnjPV31YYP2JYeHnKA2gdVd/yzWVjXpEImDD4xJLx9PMzr5SEmhkK+u+oNRXKLJY2bVqIxj2E1LFQ2EyedMizNOGQz8SjnyB75p7PG2NhUhFHk42HA9xPl4NjyquyF0gUmPcdLyFyxrlHiDCSVd7Gotbenz9rTaMHuF49m+CFA9H5kg6UZh6dLSb42LO9rgTY9G9pWOPcfhIYBHANOJOwABoPqSg0UNo0Yc/eqDKxhwwSBbQJRZqIvKew7vt+MxYNvlcC5XkJ4ctELbz757NUCPAs/TsInyIhsVaZThwIwW/j1yEjwErh2GelFKFdyo7cQsQaglh/eFmXtMuAAWAqIWPifFw5A1R3fFSWPyEG/WBHKouTPw6HHpT9XPL6pSA7ICkxemBf2jchWJTfyrN2WUAOAxZLGj/zTWc/xEsbyQuBeB3jTGjYc329Wp1OHrEjQjfMH1/XDLDi/XfwAAAAASUVORK5CYII=) !important;
  color: #000 !important;
}

#toast-container>.toast-error {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABEWlDQ1BTa2lhAAAokYWRoU7DUBSGP8YMCQkGMYG4AoGBDJYQBGqIBltGMnBtVwrJ2jW3XcYLEAwGgyY8BLwCnoCBh0AQNH9X0ZqO/+bc8+Xk5N77nwutDlK7C3GSW9fpm+HZuaEmL8hSmrUEvx/FDm/bC/qatDIKs0D5W5FbXa4jR+L1qOTrgv2S7wq2A/dI/Cjeimrs13iWp7n4tegPUlvwl/gwHk+D6t2shsnpifJQscEeOwrDAItHQsYFodgw44qcS1GGi0Nf5KgnZqr6P6rmOdHbDn5g+b6q+Q/wcgudz6q2+QRrN/D8nnrWm5failavV8550R3VXzR4NXOvDhOtiLEcGo7lNpB7I/9ddtn/A5FmRR9HEKhQAAAABHNCSVQICAgIfAhkiAAAAtNJREFUSIm9lU1PU0EUhp8zvb3FyMpEQsJOXaiEYNmoKxdFl7rQLqB+dGVisSExRhNj/AlGxbAzUiygJSxwZfwGURJj1KUblBCNxhgW1rRQb+9xgfTzXouYeFYzZ2ae98w7MxnBJzSZDP34/m1bqBiwNKBv6yeoFkQ7bGPUbt40JwMDy14c8UouxWMJXNpFSPgVUK3FoMBsaHgk3VCgEI8lVPUySGgt8Ir4IcJ5e2hk0Fdg6cTRg4JO/iW4KhQ51JRK313tm9VGIR5L/CscQNDJQjyWKPdZ8VzWZ4uPCF+LaHRDanTaaDIZwqW9Fi6bWwiev4AJd/mCTLgL+0YK0xmuyiu0BFSOaDRqB87u2LrdErlZuziY7Ed27MTs2Ytms+iH99XwSDfWyVNgDGb3HtxXLyGbrdxGZ9GWjAkVA5ZXdcX790ptq6cXE+muhvfESn135hm6uFiLaEKMCVwMd3zxEtAvn9FsFtPeDlYQ07kLXVhAWlt/Vx4At4j74gXOaBry+XqGakSWT8TUS6Cq2mNxzzH3+QzFiYxX9eX1f4IDuI8e4ly7Up+feoIzMvxH+JoEAFC3XuDtG8jlGi5tKGAi3Vj9Z+ryVv8ZTGT/GgRUfc+g7rZMPcG5erks0tOL6T7gC1fRx6Yg2uEJD3etHK4VXLktz2dw7ozhvnmNcysFzk+wglhHj/s+RhFJGtsYzx1Yp/vLlc/OUpzIlDx3Hz3AuT1WnuthocKCrcGcsZs3zakyWDvBuXYFXBd3egonXX9b3If3S3ZV2lYhkWF+/qMAFOK9cVSuK2ys2mJb2wrY4xE1iHd2rtAl4+N5A2APjQ4hnKur4dOn9cARYUDGx/PwPz8cgKZU+q4IfQJf18F+J0JfJRx8Pv38sZ59ATGHVfRko09IYQE0E8r9vLRqS0MBAI1G7cJGawtijLo6Icj2qnHRxyKStDWYY37+ozx96nhxfgG+By2/fyfrXgAAAABJRU5ErkJggg==) !important;
  color: #000 !important;
}

#toast-container>.toast-success {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABEWlDQ1BTa2lhAAAokYWRoU7DUBSGP8YMCQkGMYG4AoGBDJYQBGqIBltGMnBtVwrJ2jW3XcYLEAwGgyY8BLwCnoCBh0AQNH9X0ZqO/+bc8+Xk5N77nwutDlK7C3GSW9fpm+HZuaEmL8hSmrUEvx/FDm/bC/qatDIKs0D5W5FbXa4jR+L1qOTrgv2S7wq2A/dI/Cjeimrs13iWp7n4tegPUlvwl/gwHk+D6t2shsnpifJQscEeOwrDAItHQsYFodgw44qcS1GGi0Nf5KgnZqr6P6rmOdHbDn5g+b6q+Q/wcgudz6q2+QRrN/D8nnrWm5failavV8550R3VXzR4NXOvDhOtiLEcGo7lNpB7I/9ddtn/A5FmRR9HEKhQAAAABHNCSVQICAgIfAhkiAAAApVJREFUSIm1lUtIVGEUx3/nuzYPM8wGgjIaZjAqJQgSLCK0x6pFD6IgCXpAi5QoaJFF0F2UBpIre4BRbtq06wk9qDFKW1sNFNRMpUKlRSSNjvfOaWOkeUdHmf6re8/5f7//uXAun5BFZfcO+9OBwjL1W1Lg6EsPi+O6mZVGjFs43/8+XmGnvTjiVQw/bthhLLMBtC7bAGM0hNCGZc4n1p79MGVANNZQpyKNQHEO8LFKimrz+5pzF7MGRDpObAFuThP8r7Ymqptu/Xkxfx6isYa6PMABbo6ygNEvCMcathuRq8DcPAQAvA1m/Kvi6+1Bq+zeYT++wCFgXZ7gACFXHOv75gVPTDpQWJbjtniqqjjCokDJhLoq26Il0VKDb+ZjhoMhWstrqSqOTGyKLHX8pshYrnk1U/jDyqM86H/N/f7Xnh5L2V0wE3hVcYTW8lrae7u49CnGoDuczXrKZOuEgyH2LFztWW8tr6Wt5yktyYd8H/k16TBZAwCOhDeyKbR8HPxB5VGu972gvbeToczIpHAAq2T/Otur8cNJ0f2zh5ZluxjKjDDb8nNtxT4uf+ygrecZwxlnSjiARDpOpkAD2QzhYIj7q44w6A5z5t1d7nztxtFMTnCQvbL48fEKy5p8k8LBEBvnLaO9r5OMao5wcIUKY/lmOYqmJjN+SA1wtff5tOBAl3GdbyZYUpAQlSvTOZmTVB4la5o/m3iFnVa/tgDJfLEF4olqn42gBiC55lxSVJvzFYDqBcTOjIb91X+9cAAS1U23RLUe1TfTpSrERbV+LByyXPoLb9uFgTnDp1V0O8iSKcBdovIoEfPZ2PaEH8QzAIAbO63ogmipo6bIcvUARo6NP6kHXaTT8slAoqrxC4LnDv8Gb53rTXGEcf8AAAAASUVORK5CYII=) !important;
  color: #000 !important;
}

#toast-container>.toast-warning {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABEWlDQ1BTa2lhAAAokYWRoU7DUBSGP8YMCQkGMYG4AoGBDJYQBGqIBltGMnBtVwrJ2jW3XcYLEAwGgyY8BLwCnoCBh0AQNH9X0ZqO/+bc8+Xk5N77nwutDlK7C3GSW9fpm+HZuaEmL8hSmrUEvx/FDm/bC/qatDIKs0D5W5FbXa4jR+L1qOTrgv2S7wq2A/dI/Cjeimrs13iWp7n4tegPUlvwl/gwHk+D6t2shsnpifJQscEeOwrDAItHQsYFodgw44qcS1GGi0Nf5KgnZqr6P6rmOdHbDn5g+b6q+Q/wcgudz6q2+QRrN/D8nnrWm5failavV8550R3VXzR4NXOvDhOtiLEcGo7lNpB7I/9ddtn/A5FmRR9HEKhQAAAABHNCSVQICAgIfAhkiAAAAc5JREFUSIndlb9PU1EYht/366E1DV0dGAkkxBsnxYFBw8iiMfTyH+jQxtkN/wMXY2cHJ0oHWdgImwk0xsEaEsJCCCEukFhpWuC8Dl5DK/e2vQl38ZluTr77Pt85OT+IBLS/VOidFmco51zOf42p0IXX/bwzodQ+4OxmNy6HcYNXzXIFsIBQJamBARVYk7/67B41Po4UqFmuCHwLoDBOeB9tQq/5cL2WKNBu+FTEp5TBA1B4xvn6xg1B1Pn7xD9L94DJIOq1Bfz8niyBqn9nYsCfNY+WJZnJAJwKwanwWpSAyDf6svIYAEz7SwXAAqRf8yEG3IVHWa0wb73T4sy4uyWdQy/Q8dNGOXfb4RF3YGYWf4huB3k0LKvwiLmsBfgvBFKG+Vvs7iwHE2bfskinIXB5Z5IfozrFXRRxCObODaX2gcDaqOo0dxEACFrD2cmRcXazK2oX5K/R0xgPAnvW4yoXty8dALgH9Q9qlotDr+t2Czq+/h6O3nFhvRPJ+oYzeHAGzgHn6xuEqiB+pA4G9ghV+8Oj8Ztc7Dx/4mxi2cO/JDjqnTgUtGY9rnKh3okRx6NWmEfHT8PM5NEAMPdPyRYNr8DcOc5Ojri4fRmX8xsdv63+R3Ya8gAAAABJRU5ErkJggg==) !important;
  color: #000 !important;
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
  max-width: 350px;
  margin-left: auto;
  margin-right: auto
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
  width: 96%;
  margin-left: auto;
  margin-right: auto
}

.toast {
  background-color: #030303
}

.toast-success {
  background-color: #ffffff;
  top: 10px
}

.toast-error {
  background-color: #ffffff;
  top: 10px
}

.toast-info {
  background-color: #ffffff;
  top: 10px
}

.toast-warning {
  background-color: #ffffff;
  top: 10px
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000;
}

@media all and (max-width:240px) {
  #toast-container>div {
    padding: 8px 8px 8px 50px;
    width: 11em
  }

  #toast-container>div.rtl {
    padding: 8px 50px 8px 8px
  }

  #toast-container .toast-close-button {
    right: -.2em;
    top: -.2em
  }

  #toast-container .rtl .toast-close-button {
    left: -.2em;
    right: .2em
  }
}

@media all and (min-width:241px) and (max-width:480px) {
  #toast-container>div {
    padding: 8px 8px 8px 50px;
    width: 18em
  }

  #toast-container>div.rtl {
    padding: 8px 50px 8px 8px
  }

  #toast-container .toast-close-button {
    right: -.2em;
    top: -.2em
  }

  #toast-container .rtl .toast-close-button {
    left: -.2em;
    right: .2em
  }
}

@media all and (min-width:481px) and (max-width:768px) {
  #toast-container>div {
    padding: 15px 15px 15px 50px;
    width: 25em
  }

  #toast-container>div.rtl {
    padding: 15px 50px 15px 15px
  }
}

/* ======================
   Custom toast animations
   ====================== */

/* Entrance: slide from right + fade + small overshoot (bounce) */
@keyframes toast-enter-slide {
  0%   { transform: translateX(30px) scale(0.985); opacity: 0; }
  60%  { transform: translateX(-6px)  scale(1.03);  opacity: 1; }
  85%  { transform: translateX(2px)   scale(0.995); opacity: 1; }
  100% { transform: translateX(0)     scale(1);     opacity: 1; }
}

/* Exit: fade + slight move up + scale down a bit */
@keyframes toast-exit-fade {
  0%   { transform: translateY(0)    scale(1);    opacity: 1; }
  100% { transform: translateY(-8px) scale(0.96); opacity: 0; }
}

/* apply toasts wrapper */
#toast-container>div.custom-anim {
  will-change: transform, opacity;
  box-shadow: 0 10px 22px rgba(15,15,15,0.12);
  border-radius: 8px;
  transform-origin: center center;
}

/* entrance state */
#toast-container>div.custom-anim.entering {
  animation: toast-enter-slide 560ms cubic-bezier(.22,.9,.35,1) both;
}

/* exit/closing state */
#toast-container>div.custom-anim.closing {
  animation: toast-exit-fade 260ms ease both;
}

/* (optional) slightly reduce inner content movement on hover */
#toast-container>div.custom-anim:hover {
  transform: translateZ(0);
}

/* ensure close button visible & clickable during animation */
#toast-container>div.custom-anim .toast-close-button {
  z-index: 5;
  pointer-events: auto;
}

/* mobile tweak to remain full width like your original */
@media (max-width: 520px) {
  #toast-container>div.custom-anim {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
}


/* Entrance: slide from top + fade + small overshoot (bounce) */
@keyframes toast-enter-top {
  0%   { transform: translateY(-28px) scale(0.985); opacity: 0; }
  60%  { transform: translateY(8px)   scale(1.03);  opacity: 1; }
  85%  { transform: translateY(-3px)  scale(0.995); opacity: 1; }
  100% { transform: translateY(0)     scale(1);     opacity: 1; }
}

/* Exit: fade + move up + slight scale down */
@keyframes toast-exit-top {
  0%   { transform: translateY(0)     scale(1);    opacity: 1; }
  100% { transform: translateY(-12px) scale(0.96); opacity: 0; }
}

/* apply toasts wrapper */
#toast-container>div.custom-anim {
  will-change: transform, opacity;
  box-shadow: 0 10px 22px rgba(15,15,15,0.12);
  border-radius: 8px;
  transform-origin: center center;
}

/* entrance state (from top) */
#toast-container>div.custom-anim.entering {
  animation: toast-enter-top 520ms cubic-bezier(.22,.9,.35,1) both;
}

/* exit/closing state (go up while fading) */
#toast-container>div.custom-anim.closing {
  animation: toast-exit-top 260ms ease both;
}

/* make close button clickable during animation */
#toast-container>div.custom-anim .toast-close-button {
  z-index: 5;
  pointer-events: auto;
}

/* mobile tweak to remain full width */
@media (max-width: 520px) {
  #toast-container>div.custom-anim {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
}


/* ======================
   Toast: top/bottom enter + exit + stagger
   ====================== */

/* Enter from top (downwards with overshoot) */
@keyframes toast-enter-top {
  0%   { transform: translateY(-40px) scale(0.98); opacity: 0; }
  55%  { transform: translateY(10px)  scale(1.03); opacity: 1; }
  80%  { transform: translateY(-4px)  scale(0.995); opacity: 1; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Enter from bottom (upwards with overshoot) */
@keyframes toast-enter-bottom {
  0%   { transform: translateY(40px) scale(0.98); opacity: 0; }
  55%  { transform: translateY(-10px) scale(1.03); opacity: 1; }
  80%  { transform: translateY(4px)   scale(0.995); opacity: 1; }
  100% { transform: translateY(0)     scale(1);     opacity: 1; }
}

/* Exit for top positions: fade + move up */
@keyframes toast-exit-top {
  0%   { transform: translateY(0)     scale(1);    opacity: 1; }
  100% { transform: translateY(-18px) scale(0.96); opacity: 0; }
}

/* Exit for bottom positions: fade + move down */
@keyframes toast-exit-bottom {
  0%   { transform: translateY(0)     scale(1);    opacity: 1; }
  100% { transform: translateY(18px)  scale(0.96); opacity: 0; }
}

/* wrapper tweaks */
#toast-container>div.custom-anim {
  will-change: transform, opacity;
  box-shadow: 0 10px 22px rgba(15,15,15,0.12);
  border-radius: 8px;
  transform-origin: center center;
  /* allow animated stacking visually */
  transition: transform 220ms ease;
}

/* states: entering uses top/bottom variant, combined with per-toast delay */
#toast-container>div.custom-anim.entering.top {
  animation-name: toast-enter-top;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22,.9,.35,1);
  animation-fill-mode: both;
}

#toast-container>div.custom-anim.entering.bottom {
  animation-name: toast-enter-bottom;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22,.9,.35,1);
  animation-fill-mode: both;
}

/* closing state uses corresponding exit animation */
#toast-container>div.custom-anim.closing.top {
  animation-name: toast-exit-top;
  animation-duration: 260ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

#toast-container>div.custom-anim.closing.bottom {
  animation-name: toast-exit-bottom;
  animation-duration: 260ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* make sure close button clickable */
#toast-container>div.custom-anim .toast-close-button {
  z-index: 5;
  pointer-events: auto;
}

/* stacking visual: give a tiny translate for each index to avoid overlap when entering */
#toast-container>div.custom-anim[data-toast-index="1"] { transform: translateY(0); }
#toast-container>div.custom-anim[data-toast-index="2"] { transform: translateY(6px); }
#toast-container>div.custom-anim[data-toast-index="3"] { transform: translateY(12px); }
/* more indices possible — JS still handles ordering */

/* mobile tweak */
@media (max-width: 520px) {
  #toast-container>div.custom-anim {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
}


/* --------------- visual + animation --------------- */
/* Enter from top (downwards with overshoot) */
@keyframes toast-enter-top {
  0%   { transform: translateY(-48px) scale(0.98); opacity: 0; }
  56%  { transform: translateY(12px)  scale(1.04); opacity: 1; }
  80%  { transform: translateY(-6px)  scale(0.995); opacity: 1; }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Exit: fade + move up */
@keyframes toast-exit-top {
  0%   { transform: translateY(0)     scale(1);    opacity: 1; }
  100% { transform: translateY(-16px) scale(0.96); opacity: 0; }
}

/* wrapper */
#toast-container>div.custom-anim {
  will-change: transform, opacity;
  box-shadow: 0 12px 30px rgba(10,10,10,0.14);
  border-radius: 8px;
  transform-origin: center center;
}

/* entering state (top) */
#toast-container>div.custom-anim.entering.top {
  animation-name: toast-enter-top;
  animation-duration: 480ms; /* enter duration */
  animation-timing-function: cubic-bezier(.22,.9,.35,1);
  animation-fill-mode: both;
}

/* closing state (top) */
#toast-container>div.custom-anim.closing.top {
  animation-name: toast-exit-top;
  animation-duration: 260ms; /* exit duration */
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* ensure close button clickable */
#toast-container>div.custom-anim .toast-close-button {
  z-index: 5;
  pointer-events: auto;
}

/* small stagger offsets via attribute (JS mengatur data-toast-index) */
#toast-container>div.custom-anim[data-toast-index="1"] { transform: translateY(0); }
#toast-container>div.custom-anim[data-toast-index="2"] { transform: translateY(6px); }
#toast-container>div.custom-anim[data-toast-index="3"] { transform: translateY(12px); }

/* mobile tweak */
@media (max-width: 520px) {
  #toast-container>div.custom-anim {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
}