/* -------------------------------
   Toasts — Modern Theme (CSS only)
   ------------------------------- */

/* Theme variables (easy to tweak) */
:root {
  --theme-light: #ffcbfc;
  --theme-medium: #ff9af9;
  --dark-purple: #3b0038;
  --accent-1: #dc005d; /* bright */
  --accent-2: #740334; /* deep */
  --accent-3: #4e0949; /* deep-2 */
  --gold-gradient: linear-gradient(120deg, #ecaa24 0%, #fc4747 100%);
  --ocean-gradient: linear-gradient(90deg, #00276b, #00b1cb);
  --ruby-gradient: linear-gradient(90deg, #9c0030, #63005d);
  --violet-gradient: linear-gradient(282deg, #9c0030, #96008d);
  --glass-bg: rgba(255,255,255,0.04);
}

/* Container */
.jq-toast-wrap {
  display: block;
  position: fixed;
  max-width: 420px;
  min-width: 280px;
  pointer-events: none !important;
  margin: 0;
  padding: 0;
  z-index: 99999 !important;
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* position tweaks */
.jq-toast-wrap.bottom-left  { bottom: 20px; left: 20px;  }
.jq-toast-wrap.bottom-right { bottom: 20px; right: 24px; }
.jq-toast-wrap.top-left     { top: 20px; left: 20px;    }
.jq-toast-wrap.top-right    { top: 20px; right: 24px;   }

/* Single toast base */
.jq-toast-single {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 16px 18px;
  margin: 0 0 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  position: relative;
  pointer-events: all !important;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 24px rgba(11,8,23,0.55);
  overflow: hidden;
  transform-origin: top right;
  animation: toastIn 360ms cubic-bezier(.2,.9,.3,1);
}

/* small title and content */
.jq-toast-single h2 {
  font-size: 14px;
  margin: 0 0 4px;
  font-weight: 700;
  color: inherit;
}
.jq-toast-single p {
  margin: 0;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}

/* link style */
.jq-toast-single a {
  color: var(--theme-light);
  text-decoration: underline;
  font-weight: 600;
  font-size: 13px;
}

/* bullet lists inside toast */
.jq-toast-single ul { margin: 0 0 0 16px; padding: 0; }
.jq-toast-single ul li { margin: 0 0 4px; list-style: disc; }

/* close button */
.close-jq-toast-single {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  background: transparent;
  border: none;
  padding: 2px;
  line-height: 1;
}
.close-jq-toast-single:hover { color: #fff; }

/* loader bar — animated and themed */
.jq-toast-loader {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #9c0030, #63005d);
  border-radius: 12px;
  transition: width linear;
  opacity: 0.95;
}

/* when fully loaded — fallback */
.jq-toast-loaded { width: 100%; }

/* spacing for icon variant */
.jq-has-icon {
  padding-left: 56px;
  background-repeat: no-repeat;
  background-position: 14px center;
}

/* modern icons styling (sprites are embedded already) */
/* Info (ocean gradient) */
.jq-icon-info {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=');
  background-color: #ff9af952;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,39,107,0.22);
  background-size: 28px 28px;
}

/* Warning (gold-gradient) */
.jq-icon-warning {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=');
  background-color: #ff9af952;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(236,162,36,0.14);
  background-size: 28px 28px;
}

/* Error (ruby / deep red) */
.jq-icon-error {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');
  background-color: #ff9af952;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(220,0,93,0.18);
  background-size: 28px 28px;
}

/* Success (ocean variant) */
.jq-icon-success {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');
  background-color: #ff9af952;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,177,203,0.12);
  background-size: 28px 28px;
}

/* Visual skins for the toast (applies strong accent visuals without changing JS) */
.jq-toast-single[data-theme="info"] {
  background: linear-gradient(180deg, rgba(0,39,107,0.12), rgba(0,177,203,0.06));
  border: 1px solid rgba(0,39,107,0.06);
  color: #eaf8ff;
}
.jq-toast-single[data-theme="warning"] {
  background: linear-gradient(180deg, rgba(236,162,36,0.08), rgba(252,71,71,0.04));
  border: 1px solid rgba(236,162,36,0.06);
  color: #100b03;
}
.jq-toast-single[data-theme="error"] {
  background: linear-gradient(180deg, rgba(220,0,93,0.08), rgba(156,0,141,0.03));
  border: 1px solid rgba(220,0,93,0.06);
  color: #fff4f6;
}
.jq-toast-single[data-theme="success"] {
  background: linear-gradient(180deg, rgba(0,39,107,0.06), rgba(0,177,203,0.04));
  border: 1px solid rgba(0,177,203,0.05);
  color: #e8fbff;
}

/* small badge/icon container — positioned left */
.jq-toast-single .toast-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.06);
}

/* make sure content has left padding when icon present */
.jq-has-icon .toast-body { padding-left: 8px; }

/* subtle pulsate for warnings/errors (optional) */
.jq-toast-single[data-theme="warning"] .toast-icon,
.jq-toast-single[data-theme="error"] .toast-icon {
  animation: pulseAccent 2.4s ease-in-out infinite;
}

@keyframes pulseAccent {
  0% { transform: translateY(-50%) scale(1); opacity: 0.98; }
  50% { transform: translateY(-50%) scale(1.06); opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 0.98; }
}

/* entrance animation */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* make toasts responsive on very small screens */
@media (max-width: 360px) {
  .jq-toast-wrap { left: 10px; right: 10px; max-width: calc(100% - 20px); min-width: unset; }
  .jq-toast-single { padding: 10px; font-size: 13px; border-radius: 10px; }
}

/* Optional: recover legacy loader colorization per theme (if loader element has theme class) */
.jq-toast-single[data-theme="warning"] .jq-toast-loader { background: var(--gold-gradient); }
.jq-toast-single[data-theme="info"]    .jq-toast-loader { background: var(--ocean-gradient); }
.jq-toast-single[data-theme="error"]   .jq-toast-loader { background: var(--violet-gradient); }
.jq-toast-single[data-theme="success"] .jq-toast-loader { background: linear-gradient(90deg, #0070a8, #00b5d8); }

/* End modern toast CSS */