/**
 * Toastr card layout for tenant storefronts (j2p-theme is not loaded there).
 * Load after toastr.min.css and toastr-viewport-anchor.css.
 */
:root {
  --j2p-toast-ink: #0f172a;
  --j2p-toast-slate: #475569;
  --j2p-toast-muted: #94a3b8;
  --j2p-toast-white: #ffffff;
  --j2p-toast-success: #16a34a;
  --j2p-toast-warning: #f59e0b;
  --j2p-toast-error: #dc2626;
  --j2p-toast-info: #1d4ed8;
  --j2p-toast-r-card: 16px;
  --j2p-toast-shadow: 0 12px 40px rgba(2, 6, 23, 0.12);
}

#toast-container > div {
  position: relative !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 0 12px !important;
  padding: 16px 44px 16px 56px !important;
  background-color: var(--j2p-toast-white) !important;
  background-image: none !important;
  color: var(--j2p-toast-ink) !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  border-left-width: 4px !important;
  border-radius: var(--j2p-toast-r-card) !important;
  box-shadow: var(--j2p-toast-shadow) !important;
  opacity: 1 !important;
  font-family: inherit !important;
  line-height: 1.45 !important;
  pointer-events: auto !important;
}

#toast-container > .toast-success { border-left-color: var(--j2p-toast-success) !important; }
#toast-container > .toast-info    { border-left-color: var(--j2p-toast-info) !important; }
#toast-container > .toast-warning { border-left-color: var(--j2p-toast-warning) !important; }
#toast-container > .toast-error   { border-left-color: var(--j2p-toast-error) !important; }

#toast-container > div::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--j2p-toast-slate);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

#toast-container > div::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 22px;
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

#toast-container > .toast-success::before { background: var(--j2p-toast-success); }
#toast-container > .toast-info::before    { background: var(--j2p-toast-info); }
#toast-container > .toast-warning::before { background: var(--j2p-toast-warning); }
#toast-container > .toast-error::before   { background: var(--j2p-toast-error); }

#toast-container > .toast-success::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M13.78 4.22a.75.75 0 010 1.06l-7 7a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 111.06-1.06L6.25 10.69l6.47-6.47a.75.75 0 011.06 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M13.78 4.22a.75.75 0 010 1.06l-7 7a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 111.06-1.06L6.25 10.69l6.47-6.47a.75.75 0 011.06 0z'/></svg>");
}

#toast-container > .toast-info::after,
#toast-container > .toast-warning::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.5a.9.9 0 110 1.8.9.9 0 010-1.8zm1 7.25a.75.75 0 01-2 0v-3.5a.75.75 0 012 0v3.5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.5a.9.9 0 110 1.8.9.9 0 010-1.8zm1 7.25a.75.75 0 01-2 0v-3.5a.75.75 0 012 0v3.5z'/></svg>");
}

#toast-container > .toast-error::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M11.78 4.22a.75.75 0 010 1.06L9.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 11-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 011.06-1.06L8 6.94l2.72-2.72a.75.75 0 011.06 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M11.78 4.22a.75.75 0 010 1.06L9.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 11-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 011.06-1.06L8 6.94l2.72-2.72a.75.75 0 011.06 0z'/></svg>");
}

#toast-container > div .toast-title {
  display: block !important;
  color: var(--j2p-toast-ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}

#toast-container > div .toast-message {
  color: var(--j2p-toast-slate) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

#toast-container > div .toast-close-button {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  float: none !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--j2p-toast-muted) !important;
  font-size: 18px !important;
  line-height: 22px !important;
  text-align: center !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#toast-container > div .toast-close-button:hover,
#toast-container > div .toast-close-button:focus {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--j2p-toast-ink) !important;
  outline: none !important;
}

#toast-container > div .toast-progress {
  height: 3px !important;
  opacity: 0.85 !important;
  background-color: var(--j2p-toast-slate) !important;
  border-bottom-left-radius: var(--j2p-toast-r-card) !important;
  border-bottom-right-radius: var(--j2p-toast-r-card) !important;
}

#toast-container > .toast-success .toast-progress { background-color: var(--j2p-toast-success) !important; }
#toast-container > .toast-info .toast-progress    { background-color: var(--j2p-toast-info) !important; }
#toast-container > .toast-warning .toast-progress { background-color: var(--j2p-toast-warning) !important; }
#toast-container > .toast-error .toast-progress   { background-color: var(--j2p-toast-error) !important; }