/**
 * Estilo base do widget de agendamento — neutro de propósito, pensado pra
 * ser sobrescrito por cliente via as variáveis --ag-* abaixo (redefina num
 * <style> do site do cliente depois de importar este arquivo).
 */

.ag-widget {
  --ag-cor-fundo: #16161f;
  --ag-cor-texto: #f3f3f7;
  --ag-cor-borda: #2c2c3a;
  --ag-cor-acento: #7c5cff;
  --ag-cor-acento-texto: #ffffff;
  --ag-cor-erro: #ff6b6b;
  --ag-cor-sucesso: #4ade80;
  --ag-raio: 10px;
  --ag-fonte: inherit;

  font-family: var(--ag-fonte);
  color: var(--ag-cor-texto);
  max-width: 480px;
}

.ag-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.ag-chip {
  background: var(--ag-cor-borda);
  color: var(--ag-cor-texto);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.ag-link {
  background: none;
  border: none;
  color: var(--ag-cor-acento);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}

.ag-step h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.ag-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ag-opcao {
  background: var(--ag-cor-fundo);
  border: 1px solid var(--ag-cor-borda);
  color: var(--ag-cor-texto);
  border-radius: var(--ag-raio);
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ag-opcao:hover {
  border-color: var(--ag-cor-acento);
}

.ag-opcoes--horarios .ag-opcao {
  padding: 0.5rem 0.8rem;
  font-variant-numeric: tabular-nums;
}

.ag-data {
  background: var(--ag-cor-fundo);
  border: 1px solid var(--ag-cor-borda);
  color: var(--ag-cor-texto);
  border-radius: var(--ag-raio);
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.ag-horarios {
  margin-top: 0.5rem;
}

.ag-carregando,
.ag-vazio {
  opacity: 0.75;
  font-size: 0.9rem;
}

.ag-campo {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.ag-campo input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  background: var(--ag-cor-fundo);
  border: 1px solid var(--ag-cor-borda);
  color: var(--ag-cor-texto);
  border-radius: var(--ag-raio);
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

.ag-confirmar {
  background: var(--ag-cor-acento);
  color: var(--ag-cor-acento-texto);
  border: none;
  border-radius: var(--ag-raio);
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
}

.ag-confirmar:disabled {
  opacity: 0.6;
  cursor: default;
}

.ag-mensagem {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.ag-mensagem--erro,
.ag-erro {
  color: var(--ag-cor-erro);
}

.ag-sucesso {
  color: var(--ag-cor-sucesso);
  font-size: 1.05rem;
}