/* ===== Container principal ===== */
.esb-cfn-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none; /* só o toast em si é clicável */
}

.esb-cfn-container.bottom-left  { left: 16px; bottom: 16px; }
.esb-cfn-container.bottom-right { right: 16px; bottom: 16px; }
.esb-cfn-container.top-left     { left: 16px; top: 16px; }
.esb-cfn-container.top-right    { right: 16px; top: 16px; }

/* ===== Toast ===== */
.esb-cfn-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  width: 320px;
  max-width: 85vw;

  background: #111827;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);

  padding: 12px;
  margin-top: 10px;
  pointer-events: auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  animation: esb-cfn-in .35s ease both;
}

/* Links */
.esb-cfn-toast a { 
  color: #93c5fd; 
  text-decoration: underline; 
}

/* Imagem */
.esb-cfn-toast .img { 
  flex: 0 0 56px;
  width: 56px; 
  height: 56px; 
  border-radius: 8px; 
  overflow: hidden; 
  background:#222; 
}
.esb-cfn-toast .img img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* Corpo */
.esb-cfn-toast .body { flex: 1; }
.esb-cfn-toast .title { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.esb-cfn-toast .price { font-size: 13px; opacity: .9; margin-bottom: 6px; }
.esb-cfn-toast .note  { font-size: 12px; opacity: .95; }

/* Botão fechar */
.esb-cfn-toast .close { 
  background: none; 
  border: 0; 
  color: #9CA3AF; 
  cursor: pointer; 
  font-size: 18px; 
  line-height: 1; 
}

/* ===== Animações ===== */
@keyframes esb-cfn-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.esb-cfn-exit { 
  animation: esb-cfn-out .25s ease both; 
}

@keyframes esb-cfn-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* ===== Ajustes para Mobile ===== */
@media (max-width: 480px) {
  .esb-cfn-container {
    display: none !important;
  }
}