/* ==========================================================================
   PEREIRA E GOMES — UI COMPARTILHADA
   Toasts de feedback e modal de confirmação reutilizáveis em blog e admin.
   Depende das variáveis de cor definidas em style.css.
   ========================================================================== */

:root{
  --toast-bg: rgba(6,20,34,.94);
  --toast-success: #4fae82;
  --toast-error: #d97757;
}

.pg-toast-stack{
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}
.pg-toast{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--toast-bg);
  color: var(--cream);
  border: 1px solid rgba(199,168,109,.28);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55);
  font-size: .88rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .35s cubic-bezier(.16,.8,.24,1), transform .35s cubic-bezier(.16,.8,.24,1);
}
.pg-toast.is-visible{ opacity: 1; transform: translateX(0); }
.pg-toast-icon{
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(199,168,109,.16); color: var(--gold-400);
  margin-top: 1px;
}
.pg-toast--success .pg-toast-icon{ background: rgba(79,174,130,.18); color: var(--toast-success); }
.pg-toast--error .pg-toast-icon{ background: rgba(217,119,87,.18); color: var(--toast-error); }
.pg-toast-close{ margin-left: auto; color: rgba(247,245,240,.5); flex-shrink: 0; }
.pg-toast-close:hover{ color: var(--cream); }

/* ---- modal de confirmação (reaproveita .modal-overlay / .modal-box) ---- */
.modal-actions{
  display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap;
}
.modal-actions .btn{ flex: 1; justify-content: center; }
.btn-danger{
  background: linear-gradient(135deg, #e0876a, #c25a3d);
  color: #fff8f4;
}
.btn-danger:hover{ transform: translateY(-2px); box-shadow: 0 26px 60px -22px rgba(194,90,61,.55); }

@media (max-width: 480px){
  .pg-toast-stack{ left: 16px; right: 16px; max-width: none; }
}