/*
 * ZARTTEX toasts — one look for every toastr message (admin, seller, shop, customer).
 * Loaded after toastr.css; the "html body" prefix beats toastr's own !important rules.
 */
html body #toast-container {
  z-index: 100000;
  pointer-events: none;
}
html body #toast-container.toast-top-right { top: 16px; right: 16px; }
html body #toast-container.toast-top-left { top: 16px; left: 16px; }
html body #toast-container.toast-bottom-right { bottom: 16px; right: 16px; }
html body #toast-container.toast-bottom-left { bottom: 16px; left: 16px; }

html body #toast-container > div.toast {
  --zx-c: #2563eb;
  --zx-bg: #dbeafe;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  width: 370px;
  max-width: calc(100vw - 32px);
  margin: 0 0 10px;
  padding: 14px 42px 16px 60px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff !important;
  background-image: none !important;
  color: #475569;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 1 !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  cursor: default;
  animation: zx-toast-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
html body #toast-container > div.toast:hover {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* colour per type */
html body #toast-container > div.toast-success { --zx-c: #16a34a; --zx-bg: #dcfce7; }
html body #toast-container > div.toast-error   { --zx-c: #dc2626; --zx-bg: #fee2e2; }
html body #toast-container > div.toast-warning { --zx-c: #d97706; --zx-bg: #fef3c7; }
html body #toast-container > div.toast-info    { --zx-c: #2563eb; --zx-bg: #dbeafe; }

/* accent strip */
html body #toast-container > div.toast::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--zx-c);
}

/* round icon */
html body #toast-container > div.toast::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--zx-bg) center / 15px no-repeat;
}
html body #toast-container > div.toast-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
html body #toast-container > div.toast-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
html body #toast-container > div.toast-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 19h.01'/%3E%3C/svg%3E");
}
html body #toast-container > div.toast-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 11v7M12 6h.01'/%3E%3C/svg%3E");
}

html body #toast-container > div.toast .toast-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}
html body #toast-container > div.toast .toast-message {
  color: #475569;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
/* a message without a title: make the text the headline */
html body #toast-container > div.toast:not(:has(.toast-title)) .toast-message {
  color: #0f172a;
  font-weight: 500;
  padding-top: 4px;
}
html body #toast-container > div.toast .toast-message a,
html body #toast-container > div.toast .toast-message a:hover {
  color: var(--zx-c);
  font-weight: 600;
  text-decoration: underline;
}

html body #toast-container > div.toast .toast-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  float: none;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-shadow: none;
  opacity: 1;
  transition: background 0.15s, color 0.15s;
}
html body #toast-container > div.toast .toast-close-button:hover,
html body #toast-container > div.toast .toast-close-button:focus-visible {
  background: #f1f5f9;
  color: #0f172a;
  outline: none;
}

html body #toast-container > div.toast .toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--zx-c);
  opacity: 0.45;
}

/* panels with a top bar: start below it (admin: Stisla navbar, customer: dashboard bar) */
html body:has(.main-navbar) #toast-container.toast-top-right,
html body:has(.main-navbar) #toast-container.toast-top-left,
html body:has(.dashboard-navbar) #toast-container.toast-top-right,
html body:has(.dashboard-navbar) #toast-container.toast-top-left { top: 78px; }

/* RTL (Arabic) */
html body #toast-container.zx-rtl > div.toast { padding: 14px 60px 16px 42px; direction: rtl; text-align: right; }
html body #toast-container.zx-rtl > div.toast::after { inset: 0 0 0 auto; }
html body #toast-container.zx-rtl > div.toast::before { left: auto; right: 18px; }
html body #toast-container.zx-rtl > div.toast .toast-close-button { right: auto; left: 10px; }
html body #toast-container.zx-rtl > div.toast .toast-progress { left: auto; right: 0; }

@keyframes zx-toast-in {
  from { transform: translateY(-8px) scale(0.98); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body #toast-container > div.toast { animation: none; }
}

/* phones: full width at the top */
@media (max-width: 575.98px) {
  html body:has(.main-navbar) #toast-container[class*="toast-top"],
  html body:has(.dashboard-navbar) #toast-container[class*="toast-top"] { top: 70px; }
  html body #toast-container.toast-top-right,
  html body #toast-container.toast-top-left,
  html body #toast-container.toast-top-center,
  html body #toast-container.toast-top-full-width { top: 12px; left: 12px; right: 12px; width: auto; }
  html body #toast-container.toast-bottom-right,
  html body #toast-container.toast-bottom-left { bottom: 12px; left: 12px; right: 12px; width: auto; }
  /* small pill, centred: short messages ("Added to cart") don't cover the page */
  html body #toast-container > div.toast {
    width: fit-content; max-width: 100%; margin: 0 auto 8px;
    padding: 9px 34px 10px 44px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.4;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14), 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  }
  html body #toast-container > div.toast::before { left: 12px; top: 8px; width: 24px; height: 24px; background-size: 12px; }
  html body #toast-container > div.toast::after { width: 3px; }
  html body #toast-container > div.toast .toast-title { font-size: 13px; }
  html body #toast-container > div.toast:not(:has(.toast-title)) .toast-message { padding-top: 2px; }
  html body #toast-container > div.toast .toast-close-button { top: 6px; right: 6px; width: 24px; height: 24px; font-size: 17px; line-height: 22px; }
  html body #toast-container > div.toast .toast-progress { height: 2px; }
  html body #toast-container.zx-rtl > div.toast { padding: 9px 44px 10px 34px; }
  html body #toast-container.zx-rtl > div.toast::before { right: 12px; }
  html body #toast-container.zx-rtl > div.toast .toast-close-button { left: 6px; }
}