:root {
  --wtn-bg: #ffffff;
  --wtn-text: #15171a;
  --wtn-muted: #6b7280;
  --wtn-border: rgba(15, 23, 42, .10);
  --wtn-shadow: 0 18px 50px rgba(15, 23, 42, .15), 0 3px 12px rgba(15, 23, 42, .08);
  --wtn-success: #16a34a;
  --wtn-error: #dc2626;
  --wtn-info: #2563eb;
  --wtn-warning: #d97706;
}

#wtn-toasts {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  box-sizing: border-box;
}

#wtn-toasts .wtn-toasts__stack {
  width: min(480px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#wtn-toasts[data-position^="bottom"] .wtn-toasts__stack { margin-top: auto; }
#wtn-toasts[data-position$="left"] .wtn-toasts__stack { margin-right: auto; }
#wtn-toasts[data-position$="right"] .wtn-toasts__stack { margin-left: auto; }
#wtn-toasts[data-position$="center"] .wtn-toasts__stack { margin-left: auto; margin-right: auto; }

.wtn-toast {
  --wtn-accent: var(--wtn-info);
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: start;
  padding: 14px 14px 16px;
  background: var(--wtn-bg);
  color: var(--wtn-text);
  border: 1px solid var(--wtn-border);
  border-radius: 14px;
  box-shadow: var(--wtn-shadow);
  pointer-events: auto;
  overflow: hidden;
  direction: inherit;
  transform-origin: top center;
  animation: wtn-in .28s cubic-bezier(.2,.8,.2,1) both;
  backdrop-filter: blur(14px);
}

.wtn-toast[data-type="success"] { --wtn-accent: var(--wtn-success); }
.wtn-toast[data-type="error"] { --wtn-accent: var(--wtn-error); }
.wtn-toast[data-type="notice"], .wtn-toast[data-type="info"] { --wtn-accent: var(--wtn-info); }

.wtn-toast__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--wtn-accent);
  background: color-mix(in srgb, var(--wtn-accent) 12%, transparent);
}

.wtn-toast__icon svg { width: 19px; height: 19px; fill: currentColor; }
.wtn-toast__message { min-width: 0; font-size: 14px; line-height: 1.7; font-family: inherit; }
.wtn-toast__message a { color: var(--wtn-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wtn-toast__message p { margin: 0 0 6px; }
.wtn-toast__message p:last-child { margin-bottom: 0; }

.wtn-toast__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--wtn-muted);
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.wtn-toast__close:hover { color: var(--wtn-text); background: rgba(15,23,42,.06); }
.wtn-toast__close:focus-visible { outline: 2px solid var(--wtn-accent); outline-offset: 2px; }
.wtn-toast__close svg { width: 17px; height: 17px; fill: currentColor; }

.wtn-toast__progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  transform-origin: left center;
  background: var(--wtn-accent);
  opacity: .72;
  animation: wtn-progress var(--wtn-duration, 5s) linear forwards;
}
html[dir="rtl"] .wtn-toast__progress { transform-origin: right center; }

.wtn-toast.wtn-toast--leaving { animation: wtn-out .22s ease forwards; }
.wtn-toast.wtn-toast--paused .wtn-toast__progress { animation-play-state: paused; }

/* Keep the classic notice DOM hidden after JS enhances it. */
.woocommerce-notices-wrapper[data-wtn-enhanced="1"],
.woocommerce-message[data-wtn-enhanced="1"],
.woocommerce-error[data-wtn-enhanced="1"],
.woocommerce-info[data-wtn-enhanced="1"],
.wc-block-components-notice-banner[data-wtn-enhanced="1"] {
  display: none !important;
}

@keyframes wtn-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wtn-out {
  to { opacity: 0; transform: translateY(-8px) scale(.985); max-height: 0; margin-block: -6px; padding-block: 0; }
}
@keyframes wtn-progress { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .wtn-toast { animation: none; }
  .wtn-toast__progress { animation: none; display: none; }
}

@media (max-width: 600px) {
  #wtn-toasts { padding: 12px; }
  #wtn-toasts .wtn-toasts__stack { width: 100%; max-width: none; }
  .wtn-toast { border-radius: 12px; }
}
.wtn-toast__close {
    border: 0 !important;
}
.wtn-toast__message .wc-forward {
    float: left !important;
    background-color: unset !important;
    border: 1px solid #ddd !important;
    border-radius: 16px !important;
    font-size: 12px !important;
}