/* /static/websy/styles/snackbar.css
   Schöne, mittige Snackbar mit Glass-Effekt, Animations & Varianten */

/* ===== Basis ===== */
#snackbar {
  position: fixed;
  left: 50%;
  bottom: 12vh;                 /* eher mittig im unteren Bereich */
  transform: translateX(-50%) translateY(16px) scale(.98);
  z-index: 5000;                 /* über Topbar liegen */
  pointer-events: auto;          /* klickbar (zum Schließen) */

  /* Größe & Layout */
  max-width: 560px;
  width: calc(100% - 2rem);
  padding: .9rem 1.15rem;
  border-radius: 14px;

  /* Optik (Glass / Pill) */
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0,127,127,.96), rgba(0,102,102,.96)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), transparent 60%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 48px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(10px);

  /* Typografie */
  font-weight: 700;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.25;

  /* Animation / Sichtbarkeit */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s; /* verzögert, damit sie nach dem Faden unsichtbar wird */
  cursor: pointer; /* dein JS schließt on click */
}

/* wenn sichtbar (dein JS toggelt .show) */
#snackbar.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity .25s ease,
    transform .25s ease;
}

/* Icon-Feeling vorneweg (Pseudo) – kein Markup nötig */
#snackbar::before {
  content: "✔";
  display: inline-block;
  margin-right: .55rem;
  font-weight: 800;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* ===== Varianten (optional) – via JS/HTML: setze data-variant="success|error|warning|info" ===== */
#snackbar[data-variant="success"] {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, .95), rgba(16, 141, 66, .95)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), transparent 60%);
}
#snackbar[data-variant="success"]::before { content: "✔"; }

#snackbar[data-variant="error"] {
  background:
    linear-gradient(180deg, rgba(220, 38, 38, .96), rgba(168, 21, 21, .96)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), transparent 60%);
}
#snackbar[data-variant="error"]::before { content: "✖"; }

#snackbar[data-variant="warning"] {
  background:
    linear-gradient(180deg, rgba(234, 179, 8, .96), rgba(202, 138, 4, .96)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), transparent 60%);
  color: #1b1500;
  border-color: rgba(0,0,0,.12);
}
#snackbar[data-variant="warning"]::before { content: "⚠"; }

#snackbar[data-variant="info"] {
  background:
    linear-gradient(180deg, rgba(59, 130, 246, .96), rgba(37, 99, 235, .96)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), transparent 60%);
}
#snackbar[data-variant="info"]::before { content: "ℹ"; }

/* ===== Zentrierte Vollmitte (optional)
   Falls du die Snackbar wirklich in die Bildschirmmitte setzen willst, gib dem Element die Klasse .center
   -> JS/HTML: <div id="snackbar" class="center">…</div> */
#snackbar.center {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -44%) scale(.98);
}
#snackbar.center.show {
  transform: translate(-50%, -50%) scale(1);
}

/* ===== Mobile Tweaks ===== */
@media (max-width: 480px) {
  #snackbar {
    bottom: 8vh;
    padding: .85rem 1rem;
    border-radius: 12px;
    width: calc(100% - 1.6rem);
  }
}

/* ===== Dark-Mode Feinschliff ===== */
@media (prefers-color-scheme: dark) {
  #snackbar {
    box-shadow:
      0 18px 48px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.24);
  }
}