/* VisionFlex Schedule Notify
   Notificação no estilo "compra realizada" igual ao modelo:
   🔥 Nome abreviado acabou de comprar 3 unidades
   📍 Compra feita em Cidade - UF
   agora mesmo          Ver oferta
   barra de progresso inferior
*/

:root{
  --vf-sn-bg:#020617;        /* fundo geral (quase preto/azul) */
  --vf-sn-card:#020617;      /* card bem escuro */
  --vf-sn-border:#1f2937;    /* borda sutil */
  --vf-sn-text:#f9fafb;      /* texto principal */
  --vf-sn-muted:#9ca3af;     /* texto secundário */
  --vf-sn-accent:#fbbf24;    /* amarelo "Ver oferta" */
  --vf-sn-progress:#22c55e;  /* verde barra de progresso */
  --vf-sn-icon-bg:#16a34a;   /* verde ícone check */
}

.vf-sn-wrapper{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:99998;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:340px;
  pointer-events:none; /* deixa clicks passarem exceto no card */
}

/* Card principal */
.vf-sn-toast{
  background:var(--vf-sn-card);
  color:var(--vf-sn-text);
  border-radius:10px;
  border:1px solid var(--vf-sn-border);
  box-shadow:0 14px 35px rgba(0,0,0,0.75);
  display:flex;
  padding:10px 12px 8px;
  gap:8px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  font-family:'Roboto',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  pointer-events:auto;
  position:relative;
}

/* Botão fechar (X) */
.vf-sn-close{
  position:absolute;
  top:6px;
  right:8px;
  border:none;
  background:transparent;
  color:var(--vf-sn-muted);
  font-size:14px;
  cursor:pointer;
}

/* Coluna ícone */
.vf-sn-left{
  display:flex;
  align-items:flex-start;
  margin-top:2px;
}

.vf-sn-check{
  width:22px;
  height:22px;
  border-radius:6px;
  background:var(--vf-sn-icon-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#ecfdf5;
}

/* Coluna conteúdo */
.vf-sn-main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Linha de título */
.vf-sn-line1{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:0.9rem;
  font-weight:700;
}

.vf-sn-line1-emoji{
  font-size:14px;
}

/* Linha localização */
.vf-sn-line2{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:0.84rem;
  color:var(--vf-sn-muted);
}

/* Linha inferior: tempo + CTA */
.vf-sn-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.8rem;
  margin-top:2px;
}

.vf-sn-time{
  color:var(--vf-sn-muted);
}

.vf-sn-link{
  color:var(--vf-sn-accent);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}

/* Barra de progresso inferior */
.vf-sn-progress{
  position:relative;
  margin-top:5px;
  height:3px;
  width:100%;
  border-radius:999px;
  background:rgba(148,163,184,0.35);
  overflow:hidden;
}

.vf-sn-progress-bar{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:100%;
  background:var(--vf-sn-progress);
  transform-origin:left center;
  transform:scaleX(1);
  transition:transform 8s linear;
}

.vf-sn-toast.vf-sn-visible{
  opacity:1;
  transform:translateY(0);
}

/* Responsivo */
@media (max-width:480px){
  .vf-sn-wrapper{
    left:10px;
    right:10px;
    max-width:100%;
  }
  .vf-sn-toast{
    padding:9px 10px 7px;
  }
  .vf-sn-line1{
    font-size:0.88rem;
  }
  .vf-sn-line2{
    font-size:0.82rem;
  }
}