/* Hide Woo notice */
.woocommerce-message[role="alert"]{
   left:-9999px;
}

/* ROOT */
#darbox-toast-root{
  position:fixed;
  top:70px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* TOAST */
.darbox-toast{
  min-width:420px;
  max-width:500px;
  padding:18px;
  border-radius:6px;
  background: var(--ast-global-color-5);
  border:1px solid var(--ast-border-color);
  box-shadow:0 12px 32px rgba(0,0,0,.1);
  transform:translateX(120%);
  opacity:0;
  transition:.35s ease;
}

.darbox-toast.is-visible{
  transform:translateX(0);
  opacity:1;
}

.darbox-toast-content{
  display:flex;
  align-items:center;
  gap:16px;
}

.darbox-toast-img{
  width:68px;
  height:68px;
  object-fit:cover;
  border-radius:10px;
}

.darbox-toast-title{
  font-weight:600;
}

.darbox-toast-product{
  opacity:.75;
}

.darbox-toast-actions{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.darbox-toast-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:4px 4px;
  border-radius:6px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
}
/* Кнопки*/
.darbox-toast-btn.primary{
  background:var(--ast-global-color-0);
  color:var(--ast-global-color-5);
  border-color:var(--ast-global-color-0);
  
}

.darbox-toast-btn.secondary{
  background:var(--ast-global-color-4);
  color:var(--ast-global-color-3);
  border-color:var(--ast-global-color-0);
  
}

.darbox-toast-btn.primary:hover{
  background: #7748C9;
  color:var(--ast-global-color-5);
  border-color:var(--ast-global-color-0);
}
.darbox-toast-btn.secondary:hover{
  background:#EAD5F8;
  color:var(--ast-global-color-3);
  border-color:var(--ast-global-color-0);
  
}





.darbox-toast-close{
  position:absolute;
  top:6px;
  right:8px;
  border:0;
  background:none;
  cursor:pointer;
  font-size:22px;
  opacity:.6;
}

/* MOBILE */
@media (max-width:480px){

  #darbox-toast-root{
    left:12px;
    right:12px;
    top:auto;
    bottom:20px;
  }

  .darbox-toast{
    min-width:unset;
    width:100%;
  }

}