/* wow-alerts — premium alert banners (icon left, message right) */

:root {
  --wow-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --wow-radius: 1rem;
  --wow-gap: 1.25rem;
  --wow-padding: 1.25rem 1.5rem;
  --wow-icon-size: 4.5rem;
  --wow-shadow: 0 6px 24px -8px color-mix(in srgb, var(--wow-accent) 22%, transparent);
  --wow-muted: color-mix(in srgb, var(--wow-text) 55%, transparent);
  --wow-duration: 0.55s;
  --wow-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wow-alert-enter {
  from {
    opacity: 0;
    transform: translateX(-1.25rem) scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes wow-orb-drift {
  0%,
  100% {
    transform: translate(-20%, -25%) scale(1);
  }
  33% {
    transform: translate(55%, 5%) scale(1.12);
  }
  66% {
    transform: translate(25%, 45%) scale(0.92);
  }
}

@keyframes wow-shine {
  0% {
    transform: translateX(-120%) skewX(-18deg);
  }
  100% {
    transform: translateX(220%) skewX(-18deg);
  }
}

@keyframes wow-dismiss {
  to {
    opacity: 0;
    transform: translateX(1rem) scale(0.92);
    max-height: 0;
    margin: 0;
    padding-block: 0;
    overflow: hidden;
  }
}

.wow-alert {
  position: relative;
  display: grid;
  grid-template-columns: var(--wow-icon-size) 1fr auto;
  align-items: center;
  gap: var(--wow-gap);
  padding: var(--wow-padding);
  font-family: var(--wow-font);
  color: var(--wow-text);
  background: var(--wow-bg);
  border: 1px solid color-mix(in srgb, var(--wow-accent) 38%, transparent);
  border-radius: var(--wow-radius);
  box-shadow: var(--wow-shadow);
  overflow: hidden;
  isolation: isolate;
  animation: wow-alert-enter var(--wow-duration) var(--wow-ease) both;
}

.wow-alert::after {
  content: "";
  position: absolute;
  width: min(18rem, 85%);
  height: min(18rem, 120%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wow-orb);
  filter: blur(52px);
  opacity: var(--wow-orb-opacity, 0.92);
  pointer-events: none;
  z-index: 0;
  top: -35%;
  left: -15%;
  animation: wow-orb-drift 14s ease-in-out infinite;
  will-change: transform;
}

.wow-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, var(--wow-shine) 55%, transparent) 50%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 2;
}

.wow-alert:hover::before {
  animation: wow-shine 0.9s ease;
}

.wow-alert__icon {
  --wow-icon-tint: color-mix(in srgb, var(--wow-bg) 82%, var(--wow-accent));
  --wow-icon-shadow: color-mix(in srgb, var(--wow-accent) 45%, var(--wow-bg));
  position: relative;
  width: var(--wow-icon-size);
  height: var(--wow-icon-size);
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: var(--wow-icon-tint);
  border: 1px solid color-mix(in srgb, var(--wow-accent) 28%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--wow-icon-shadow) 22%, transparent);
  z-index: 1;
}

.wow-alert__icon svg {
  width: 2.35rem;
  height: 2.35rem;
  stroke: var(--wow-icon-stroke, var(--wow-accent));
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wow-alert__body {
  min-width: 0;
  z-index: 1;
}

.wow-alert__title {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.wow-alert__message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wow-muted);
}

.wow-alert__message strong {
  color: var(--wow-text);
  font-weight: 600;
}

.wow-alert__close {
  align-self: start;
  margin-top: 0.15rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: var(--wow-close-bg, color-mix(in srgb, var(--wow-bg) 50%, transparent));
  color: var(--wow-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  z-index: 3;
}

.wow-alert__close:hover {
  background: var(--wow-close-hover, color-mix(in srgb, var(--wow-accent) 30%, #fff));
  color: var(--wow-text);
  transform: rotate(90deg);
}

.wow-alert__close:focus-visible {
  outline: 2px solid var(--wow-accent);
  outline-offset: 2px;
}

.wow-alert.is-dismissing {
  animation: wow-dismiss 0.4s var(--wow-ease) forwards;
  pointer-events: none;
}

/* —— Theme: Light (ciemniejsze tło, czarny tekst) —— */
.wow-theme-light {
  --wow-shine: #fff;
  --wow-orb-opacity: 0.92;
}

.wow-theme-light .wow-alert--success {
  --wow-accent: #059669;
  --wow-bg: #6ee7b7;
  --wow-orb: #ecfdf5;
  --wow-text: #064e3b;
  --wow-muted: color-mix(in srgb, var(--wow-text) 50%, #fff);
}

.wow-theme-light .wow-alert--error {
  --wow-accent: #e11d48;
  --wow-bg: #fda4af;
  --wow-orb: #fff1f2;
  --wow-text: #881337;
  --wow-muted: color-mix(in srgb, var(--wow-text) 50%, #fff);
}

.wow-theme-light .wow-alert--warning {
  --wow-accent: #d97706;
  --wow-bg: #fcd34d;
  --wow-orb: #fffbeb;
  --wow-text: #78350f;
  --wow-muted: color-mix(in srgb, var(--wow-text) 50%, #fff);
}

.wow-theme-light .wow-alert--info {
  --wow-accent: #0284c7;
  --wow-bg: #7dd3fc;
  --wow-orb: #f0f9ff;
  --wow-text: #0c4a6e;
  --wow-muted: color-mix(in srgb, var(--wow-text) 50%, #fff);
}

.wow-theme-light .wow-alert--neutral {
  --wow-accent: #64748b;
  --wow-bg: #cbd5e1;
  --wow-orb: #f8fafc;
  --wow-text: #1e293b;
  --wow-muted: color-mix(in srgb, var(--wow-text) 48%, #fff);
}

/* —— Theme: Dark (ciemniejsze tło, biały tekst) —— */
.wow-theme-dark {
  --wow-shine: #fff;
  --wow-orb-opacity: 0.7;
  --wow-shadow: 0 8px 28px -6px color-mix(in srgb, var(--wow-accent) 30%, #000);
  --wow-text: #ffffff;
  --wow-muted: color-mix(in srgb, var(--wow-text) 72%, transparent);
  --wow-close-bg: color-mix(in srgb, var(--wow-text) 12%, transparent);
  --wow-close-hover: color-mix(in srgb, var(--wow-accent) 40%, transparent);
}

.wow-theme-dark .wow-alert__icon {
  --wow-icon-tint: color-mix(in srgb, var(--wow-bg) 65%, var(--wow-accent));
  border-color: color-mix(in srgb, var(--wow-accent) 35%, transparent);
}

.wow-theme-dark .wow-alert--success {
  --wow-accent: #34d399;
  --wow-icon-stroke: #a7f3d0;
  --wow-bg: #047857;
  --wow-orb: #6ee7b7;
}

.wow-theme-dark .wow-alert--error {
  --wow-accent: #fb7185;
  --wow-icon-stroke: #fecdd3;
  --wow-bg: #be123c;
  --wow-orb: #fda4af;
}

.wow-theme-dark .wow-alert--warning {
  --wow-accent: #fbbf24;
  --wow-icon-stroke: #fef08a;
  --wow-bg: #b45309;
  --wow-orb: #fde047;
}

.wow-theme-dark .wow-alert--info {
  --wow-accent: #38bdf8;
  --wow-icon-stroke: #bae6fd;
  --wow-bg: #0369a1;
  --wow-orb: #7dd3fc;
}

.wow-theme-dark .wow-alert--neutral {
  --wow-accent: #cbd5e1;
  --wow-icon-stroke: #f1f5f9;
  --wow-bg: #475569;
  --wow-orb: #e2e8f0;
}

/* Compact */
.wow-alert--compact {
  --wow-icon-size: 3.25rem;
  --wow-gap: 1rem;
  --wow-padding: 0.9rem 1.15rem;
}

.wow-alert--compact .wow-alert__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.wow-alert--compact .wow-alert__title {
  font-size: 1rem;
}

.wow-alert--compact::after {
  width: min(14rem, 90%);
  height: min(14rem, 110%);
  filter: blur(40px);
}

/* Stack */
.wow-alerts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.wow-alerts .wow-alert:nth-child(1) { animation-delay: 0s; }
.wow-alerts .wow-alert:nth-child(2) { animation-delay: 0.08s; }
.wow-alerts .wow-alert:nth-child(3) { animation-delay: 0.16s; }
.wow-alerts .wow-alert:nth-child(4) { animation-delay: 0.24s; }
.wow-alerts .wow-alert:nth-child(5) { animation-delay: 0.32s; }

.wow-alerts .wow-alert:nth-child(2)::after { animation-delay: -4s; }
.wow-alerts .wow-alert:nth-child(3)::after { animation-delay: -8s; }
.wow-alerts .wow-alert:nth-child(4)::after { animation-delay: -2s; }
.wow-alerts .wow-alert:nth-child(5)::after { animation-delay: -11s; }

@media (prefers-reduced-motion: reduce) {
  .wow-alert,
  .wow-alert::after {
    animation: none;
  }

  .wow-alert::before {
    display: none;
  }

  .wow-alert.is-dismissing {
    animation: wow-dismiss 0.2s ease forwards;
  }
}

@media (max-width: 480px) {
  .wow-alert {
    grid-template-columns: 3.5rem 1fr auto;
    --wow-icon-size: 3.5rem;
    --wow-gap: 1rem;
  }

  .wow-alert__icon svg {
    width: 1.85rem;
    height: 1.85rem;
  }

  .wow-alert::after {
    filter: blur(36px);
  }
}