/* Container principal full-width */
.bunit-container {
  width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background: linear-gradient(180deg, #6c0ef1, 50%, #e900fc);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    border-radius: 10px;
}

/* Header / Logo grande */
.bunit-container header h1 {
  font-size: 3em;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
}
.bunit-container header p {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Formulário */
#shortenForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
}
#shortenForm input[type="url"],
#shortenForm input[type="text"] {
  padding: 15px;
  border-radius: 10px;
  border: none;
  font-size: 1em;
  outline: none;
      width: 40%;
}
#shortenForm input:focus {
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
}

/* Botão */
#shortenForm button {
  padding: 15px 30px;
  background: #fff;
  color: #6c0ef1;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#shortenForm button:hover {
  transform: scale(1.05);
  background: #f0e5ff;
}

/* Resultado */
#result {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 30px;
}
#result a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

/* Histórico */
#history {
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}
#history h2 {
  margin-bottom: 15px;
}
#history ul {
  list-style: none;
  padding: 0;
}

#history li:before {
  content: "\f0c1";  /* ou o ícone que preferir */
  margin-right: 10px;
    }
#history li a {
  color: #fff;
  text-decoration: none;
}
#history li a:hover {
  text-decoration: underline;
}
    
    #history li .link-info {
  flex: 1;  /* ocupa o espaço todo, link e data */
  color: #fff;
  margin-right: 15px;
}

/* histórico em linha + ações + contador de cliques */
#history li { display:flex; align-items:center; justify-content:space-between; gap:12px;  background-color: #0000004a;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 10px;}
#history li .link-item { display:flex; align-items:center; gap:12px; flex:1; }
#history li .click-badge { font-size:.85em; opacity:.9; background:rgba(255,255,255,0.15); padding:4px 8px; border-radius:999px; white-space:nowrap; }
#history li .link-actions { display:flex; gap:8px; }
#history li .link-actions button { background:rgba(255,255,255,0.15); border:none; border-radius:6px; padding:6px 10px; color:#fff; cursor:pointer; }
#history li .link-actions button:hover { background:rgba(255,255,255,0.3); }

/* Estatísticas */
#stats {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  gap: 20%;
}
#stats p {
  font-weight: 600;
  font-size: 1.1em;
}

/* Sections (Como usar, FAQ, Ads) */
section {
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}
section h2 {
  margin-bottom: 15px;
}

/* Espaços para Ads */
.ad-space {
  background: rgba(255,255,255,0.2);
  height: 100px;
  margin-bottom: 15px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
}

/* Footer */
footer {
  text-align: center;
  padding: 15px 0;
  font-size: 0.9em;
  opacity: 0.8;
}

/* Responsividade */
@media (max-width: 768px) {
  #shortenForm {
    flex-direction: column;
  }
  #shortenForm input, #shortenForm button {
    width:100%;
  }
  #shortenForm input[type="url"],
  #shortenForm input[type="text"] {
    width:92%;
  }
  #stats {
    flex-direction: column;
    gap: 10px;
  }

  /* Ajuste histórico em mobile */
  #history li {
    flex-direction: column;   /* empilha os blocos */
    align-items: flex-start;  /* alinha à esquerda */
  }
  #history li .link-item {
    flex-wrap: wrap;          /* quebra link/data/cliques em linhas se necessário */
    margin-bottom: 10px; gap:0 70px;justify-content: center;     /* espaço entre link e botões */
  }
  #history li .link-actions {
    width: 100%;              /* ocupa toda a largura */
    justify-content: flex-start; 
    flex-wrap: wrap;
    gap: 10px;
    place-content: center;
  }
  #history li .click-badge {
    margin-top: 5px;
  }
  #history li:before {align-self: center;}
}