/* ══════════════════════════════════════════════════════════
   Vandalierer Labs — WooCommerce Notices
   Ersetzt die Standard-Notices von WooCommerce.
   Laden nach vl-tokens.css, auf allen Shop-Seiten.
   ══════════════════════════════════════════════════════════ */

/* ── Basis ─────────────────────────────────────────────── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.vl-notice {
  /* WooCommerce Defaults abräumen */
  list-style: none !important;
  border-left-width: 0 !important;
  background-image: none !important;
  text-indent: 0 !important;

  display: grid !important;
  grid-template-columns: 32px 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  border-radius: 13px !important;
  border: 1.5px solid !important;
  font-family: var(--font-body, 'Roboto', system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--bark, #2C1F14) !important;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 10px rgba(44,31,20,.04);
}

/* WooCommerce hängt ein ::before Icon an — wir ersetzen es durch unsere Kachel */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  content: '' !important;
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  font-size: 0 !important;
}

/* ── Inhalt ────────────────────────────────────────────── */
.vl-notice-body { grid-column: 2; min-width: 0; }
.vl-notice-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--bark, #2C1F14);
  margin-bottom: 2px;
}
.vl-notice-text {
  font-size: 12.5px;
  color: var(--muted-text, #8C6A58);
  text-wrap: pretty;
}
.vl-notice-text:only-child { color: var(--bark, #2C1F14); font-weight: 600; }

/* Aktion rechts (z.B. „Zur Kasse", „Rückgängig") */
.vl-notice .button,
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  grid-column: 3;
  align-self: center;
  padding: 8px 15px !important;
  border-radius: 9px !important;
  border: 1.5px solid currentColor !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  transition: background .15s;
}
.vl-notice .button:hover,
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
  background: rgba(255,255,255,.7) !important;
  transform: none !important;
}

/* Schließen */
.vl-notice-dismiss {
  grid-column: 3;
  align-self: start;
  width: 24px; height: 24px;
  border: none; background: none; cursor: pointer;
  border-radius: 7px;
  color: var(--muted-light, #C4A88A);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.vl-notice-dismiss:hover { background: rgba(44,31,20,.05); color: var(--bark, #2C1F14); }

/* Liste mehrerer Meldungen (WC gibt <ul><li> aus)
   grid-column: 2 / -1 verhindert, dass <li>-Items als einzelne Grid-Zellen
   auto-platziert werden (letztes Item würde sonst in der 32px-Icon-Spalte landen) */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 2 / -1;
}
.woocommerce-error li + li,
.woocommerce-message li + li,
.woocommerce-info li + li { margin-top: 2px; }

/* Fehler-Heading (erstes <li> im Error-Template) */
.woocommerce-error .vl-notice-heading {
  font-weight: 800;
  font-size: 12px;
  color: var(--error, #C04030);
  margin-bottom: 1px;
}

/* ── Varianten ─────────────────────────────────────────── */

/* Erfolg — Sage */
.woocommerce-message,
.vl-notice--success {
  border-color: var(--sage-border, #C8DFC8) !important;
  background: var(--sage-bg, #F0F7F2) !important;
}
.woocommerce-message::before,
.vl-notice--success .vl-notice-icon {
  background-color: rgba(61,122,80,.12);
  color: var(--sage-dark, #3D7A50);
}
.woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D7A50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.woocommerce-message .button,
.vl-notice--success .button { color: var(--sage-dark, #3D7A50) !important; }

/* Fehler — Error-Rot */
.woocommerce-error,
.vl-notice--error {
  border-color: var(--error-border, #E88A7A) !important;
  background: var(--error-bg, #FDF2F0) !important;
}
.woocommerce-error::before,
.vl-notice--error .vl-notice-icon {
  background-color: rgba(192,64,48,.1);
  color: var(--error, #C04030);
}
.woocommerce-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C04030' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
}
.woocommerce-error .button,
.vl-notice--error .button { color: var(--error, #C04030) !important; }

/* Hinweis — Water-Blau (bewusst nicht Terra: Terra ist Aktionsfarbe) */
.woocommerce-info,
.vl-notice--info {
  border-color: var(--water-border, #B8D8E8) !important;
  background: var(--water-bg, #F0F8FB) !important;
}
.woocommerce-info::before,
.vl-notice--info .vl-notice-icon {
  background-color: rgba(58,122,158,.1);
  color: var(--water-dark, #2A5A7E);
}
.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A5A7E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}
.woocommerce-info .button,
.vl-notice--info .button { color: var(--water-dark, #2A5A7E) !important; }

/* Warnung — Amber */
.vl-notice--warning {
  border-color: var(--warning-border, #F0C040) !important;
  background: var(--warning-bg, #FFF3CD) !important;
}
.vl-notice--warning .vl-notice-icon {
  background-color: rgba(122,88,0,.1);
  color: var(--warning, #7A5800);
}
.vl-notice--warning .button { color: var(--warning, #7A5800) !important; }

/* Bauplan-Bezug — Terra, für App-Verknüpfungen */
.vl-notice--planer {
  border-color: rgba(196,99,58,.22) !important;
  background: rgba(196,99,58,.055) !important;
}
.vl-notice--planer .vl-notice-icon {
  background-color: rgba(196,99,58,.11);
  color: var(--terra, #C4633A);
}
.vl-notice--planer .button { color: var(--terra, #C4633A) !important; }

/* ── Icon-Kachel für eigenes Markup ────────────────────── */
.vl-notice-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Kompakte Inline-Variante (Formularfelder) ─────────── */
.vl-notice--inline {
  grid-template-columns: 16px 1fr;
  gap: 8px;
  padding: 8px 11px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  box-shadow: none;
  margin-bottom: 0 !important;
}
.vl-notice--inline .vl-notice-icon {
  width: 16px; height: 16px; border-radius: 5px; background: none !important;
}
.vl-notice--inline .vl-notice-title { font-size: 12px; margin-bottom: 0; }

/* ── Toast (rechts oben, für AJAX-Rückmeldungen) ───────── */
.vl-toast-stack {
  position: fixed;
  top: 58px; right: 20px;
  z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
  width: 340px;
  pointer-events: none;
}
.vl-toast-stack > * { pointer-events: auto; }
.vl-notice--toast {
  margin-bottom: 0 !important;
  box-shadow: 0 8px 26px rgba(44,31,20,.13);
  animation: vl-toast-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes vl-toast-in {
  from { opacity: 0; transform: translateY(-7px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ── Seitenweite Bannerleiste (Versandhinweis o.ä.) ────── */
.vl-notice--bar {
  grid-template-columns: 20px 1fr auto;
  border-radius: 0 !important;
  border-width: 0 0 1.5px 0 !important;
  box-shadow: none;
  padding: 10px 40px !important;
  margin: 0 !important;
  justify-content: center;
}
.vl-notice--bar .vl-notice-icon { width: 20px; height: 20px; border-radius: 6px; background: none !important; }