/* Avisos (toasts) Empyre v2: fundo escuro da marca, icone em circulo colorido, barra de tempo champagne.
   Mantem as classes atuais: .trigger .trigger_ajax .trigger_success/.trigger_accept .trigger_info .trigger_alert .trigger_error .trigger_none .ajax_close
   e o container .wc_cart_callback (que o scripts.js anima: right -400px -> 0). Nenhuma mudanca de PHP necessaria. */

:root {
  --tk-bg: #0b0b0b;
  --tk-ink: #ffffff;
  --tk-soft: rgba(255, 255, 255, .82);
  --tk-accent: #c9a45c;
  --tk-ok: #2f8f5b;
  --tk-info: #ffffff;
  --tk-warn: #e0a000;
  --tk-err: #d64545;
  --tk-font: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Container fixo: nao bloqueia cliques fora do aviso */
.wc_cart_callback { position: fixed; top: 0; width: 400px; max-width: 100%; padding: 16px; z-index: 1000; pointer-events: none; }
.wc_cart_callback .trigger { pointer-events: auto; margin: 0 0 10px; }

/* Base: serve para aviso inline (formularios) e para o toast */
.trigger {
  --t-line: var(--tk-info);
  --t-icon-ink: #0b0b0b;
  --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.6' r='.6' fill='%230b0b0b'/%3E%3C/svg%3E");
  position: relative; display: block; width: 100%;
  padding: 16px 48px 16px 60px; min-height: 60px;
  font: 400 .9375rem/1.45 var(--tk-font); color: var(--tk-soft);
  background: var(--tk-bg); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 11, 11, .28);
  overflow: hidden; overflow-wrap: anywhere;
}
.trigger b, .trigger strong { display: block; margin-bottom: 2px; font-weight: 700; font-size: 1rem; color: var(--tk-ink); }
.trigger p { margin: 4px 0 0; }
.trigger a { color: var(--tk-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.trigger a:hover { color: #e3c488; }
.trigger small { display: block; opacity: .8; }
.trigger_none { margin-bottom: 0; }

/* Icone em circulo (mesmo desenho do sprite, via fundo) */
.trigger::before {
  content: ""; position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--t-line) var(--t-icon) center / 18px 18px no-repeat;
}

/* Variantes: so mudam a cor do circulo e o desenho do icone */
.trigger_success, .trigger_accept { --t-line: var(--tk-ok);
  --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.trigger_alert { --t-line: var(--tk-warn);
  --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='16.8' r='.7' fill='%230b0b0b'/%3E%3C/svg%3E"); }
.trigger_error { --t-line: var(--tk-err);
  --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }

/* Botao fechar (o span .ajax_close ja existe no HTML gerado). Area de toque 40x40. */
.ajax_close { position: absolute; top: 10px; right: 8px; width: 40px; height: 40px; cursor: pointer; border-radius: 8px; }
.ajax_close::before { content: ""; position: absolute; inset: 12px; background: #fff; opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.ajax_close:hover::before { opacity: 1; }
.ajax_close:hover { background: rgba(255, 255, 255, .08); }

/* Toast por ajax: entra suave, mostra a barra de tempo e sai sozinho (pausa com mouse/foco) */
.trigger_ajax { cursor: pointer; animation: toast-in .32s cubic-bezier(.2, .7, .2, 1) both, toast-out .3s ease 8s forwards; }
.trigger_ajax::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tk-accent);
  transform-origin: left; animation: toast-bar 8s linear forwards; }
.trigger_ajax:hover, .trigger_ajax:focus-within { animation-play-state: running, paused; }
.trigger_ajax:hover::after, .trigger_ajax:focus-within::after { animation-play-state: paused; }
.trigger_error.trigger_ajax { animation-delay: 0s, 12s; }
.trigger_error.trigger_ajax::after { animation-duration: 12s; background: var(--tk-err); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); visibility: hidden; } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Mobile: largura total com margem */
@media (max-width: 480px) {
  .wc_cart_callback { width: 100%; padding: 10px; }
  .trigger { padding: 14px 44px 14px 56px; }
  .trigger::before { left: 14px; top: 14px; }
}

/* Movimento reduzido: sem deslocamento nem barra animada */
@media (prefers-reduced-motion: reduce) {
  .trigger_ajax { animation: toast-fade .01ms both, toast-out .01ms 8s forwards; }
  .trigger_error.trigger_ajax { animation-delay: 0s, 12s; }
  .trigger_ajax::after { animation: none; transform: scaleX(0); }
  @keyframes toast-fade { from { opacity: 0; } to { opacity: 1; } }
}