/* =============================================
   SEÇÃO AGENDAR — integração com API Beauty in Shell
   Identidade visual: Bem Maria (verde-escuro + cobre)
============================================= */

.agendar-section {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr;   /* coluna única: intro e formulário empilhados (full width) */
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .agendar-section {
    padding: 6rem 4rem;
  }
}


.agendar-desc {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .92rem;
  color: #555;
  line-height: 1.9;
}

/* FORMULÁRIO */
.agendar-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* STEP */
.ag-step {
  border-top: 1px solid rgba(60,85,61,.08);  /* mais sutil */
  padding-top: 1.5rem;
}

.ag-step-header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1.2rem;
}

.ag-step-num {
  font-family: 'Gloock', serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--copper-light);
  line-height: 1;
}

.ag-step-label {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green-dark);
}

/* GRID DE SERVIÇOS */
.ag-servicos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .6rem;
}

.ag-loading {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  color: var(--text-muted);
  grid-column: 1/-1;
}

.ag-servico-item {
  border: 1px solid rgba(60,85,61,.2);
  padding: .9rem 1rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.ag-servico-item:hover {
  border-color: var(--copper-light);
  background: rgba(183,106,79,.04);
}

.ag-servico-item.selecionado {
  border-color: var(--copper);
  background: rgba(183,106,79,.07);
}

.ag-servico-nome {
  font-family: 'Gloock', serif;
  font-size: .95rem;
  font-weight: 400;
  color: var(--text-dark);
}

.ag-servico-item.selecionado .ag-servico-nome {
  color: var(--copper);
}

.ag-servico-meta {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-muted);
  display: flex;
  gap: .6rem;
}

.ag-servico-check {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(60,85,61,.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: transparent;
  flex-shrink: 0;
  margin-top: .15rem;
  transition: all .2s;
}

.ag-servico-item.selecionado .ag-servico-check {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}

/* PROFISSIONAL POR SERVIÇO */
.ag-prof-blocos {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.ag-prof-bloco {
  border: 1px solid rgba(60,85,61,.18);
  border-left: 3px solid var(--copper);
  padding: 1rem 1.1rem;
}

.ag-prof-titulo {
  font-family: 'Gloock', serif;
  font-size: 1rem;
  color: var(--green-dark);
  margin-bottom: .7rem;
}

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

.ag-prof-opcao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(60,85,61,.2);
  padding: .5rem .9rem;
  cursor: pointer;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .85rem;
  color: var(--text-dark);
  transition: border-color .2s, background .2s;
}

.ag-prof-opcao:hover { border-color: var(--copper-light); }

.ag-prof-opcao.selecionado {
  border-color: var(--copper);
  background: rgba(183,106,79,.08);
  color: var(--copper);
}

.ag-prof-opcao input { accent-color: var(--copper); }

.ag-prof-vazio {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .8rem;
  color: #8b1a1a;
  line-height: 1.6;
}

/* =============================================
   MINI PERFIL PROFISSIONAL — Dark Luxury
   Painel escuro, letras claras, foto quadrada.
============================================= */
.ag-perfil { margin-top: 1rem; }

.ag-perfil-loading {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .78rem;
  color: var(--text-muted);
}

.ag-perfil-card {
  background: #1f1818;
  color: #f5f0ea;
  padding: 1.6rem;
  border-top: 2px solid var(--copper);
  animation: agPerfilIn .3s ease;
}

@keyframes agPerfilIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabeçalho do perfil — foto + Instagram centralizados */
.ag-perfil-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Foto de perfil — quadrada */
.ag-perfil-foto {
  width: 150px;
  height: 150px;
  background-size: cover;
  background-position: center;
  border: 4px solid var(--copper-light);
  filter: saturate(.85);
}

.ag-perfil-foto--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Gloock', serif;
  font-size: 3rem;
  color: var(--copper-light);
  background: #2e2824;
}

/* Botão Instagram */
.ag-perfil-insta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f5f0ea;
  text-decoration: none;
  border: 1px solid rgba(245,240,234,.35);
  padding: .55rem 1.1rem;
  transition: background .25s, border-color .25s, color .25s;
}

.ag-perfil-insta:hover {
  background: var(--insta);
  border-color: var(--insta);
  color: #fff;
}

.ag-perfil-insta-ico { font-size: .9rem; line-height: 1; }

.ag-perfil-nome {
  font-family: 'Gloock', serif;
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--copper-light);
  margin: 1rem 0 .25rem;
  text-align: center;
}

.ag-perfil-bloco-titulo {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin: 1.3rem 0 .6rem;
}

.ag-perfil-sobre {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.85;
  color: rgba(245,240,234,.82);
}

/* Carrossel — slides de altura fixa, imagem inteira sobre fundo borrado
   (estilo "post" do Instagram: nada é cortado, todos os slides iguais) */
.ag-perfil-carrossel {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--copper) transparent;
}

.ag-perfil-carrossel::-webkit-scrollbar { height: 6px; }
.ag-perfil-carrossel::-webkit-scrollbar-track { background: rgba(245,240,234,.08); }
.ag-perfil-carrossel::-webkit-scrollbar-thumb { background: var(--copper); }

.ag-perfil-foto-item {
  flex: 0 0 auto;
  width: 260px;
  height: 320px;
  margin: 0;
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Cópia borrada da própria foto preenchendo as laterais/topo */
.ag-perfil-foto-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(.55);
  transform: scale(1.2);
  z-index: 0;
}

/* Foto inteira, centralizada, sem corte */
.ag-perfil-foto-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .4s ease;
}

.ag-perfil-foto-item:hover img { transform: scale(1.04); }

/* Legenda sobreposta na base do slide */
.ag-perfil-foto-item figcaption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .62rem;
  letter-spacing: .04em;
  color: #f5f0ea;
  padding: 1.4rem .6rem .5rem;
  line-height: 1.4;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}

@media (max-width: 600px) {
  .ag-perfil-foto { width: 130px; height: 130px; }
  .ag-perfil-foto-item { width: 220px; height: 280px; }
}

/* Modal de imagem ampliada */
.ag-perfil-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,8,7,.92);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vw;
}

.ag-perfil-lightbox.active { display: flex; }

.ag-perfil-lightbox-fig {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.ag-perfil-lightbox-fig img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.ag-perfil-lightbox-fig figcaption {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  letter-spacing: .05em;
  color: #f5f0ea;
  text-align: center;
}

.ag-perfil-lightbox-close {
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
  background: none;
  border: none;
  color: #f5f0ea;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s;
}

.ag-perfil-lightbox-close:hover { color: var(--copper-light); }

/* LINHAS DE CAMPO (usadas na etapa "Seus dados") */
.ag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

@media (max-width: 600px) {
  .ag-row { grid-template-columns: 1fr; }
}

.ag-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.ag-label {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
}

.ag-input {
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  padding: .55rem 0;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  color: var(--text-dark);
  outline: none;
  transition: border-color .2s;
  width: 100%;
}

.ag-input:focus { border-color: var(--copper); }

.ag-textarea {
  border: 1px solid #ccc;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ccc;
  resize: vertical;
  padding: .55rem 0;
}

/* CALENDÁRIO + GRADE DE HORÁRIOS (substituem input[type=date] e select nativos) */
.ag-datahora {
  display: grid;
  gap: 1.6rem;
}

@media (min-width: 700px) {
  .ag-datahora { grid-template-columns: 1fr 1fr; align-items: start; }
}

.ag-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}

.ag-cal-nav {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Gloock', serif;
  font-size: 1.1rem;
  color: var(--copper);
  padding: .2rem .6rem;
  transition: color .2s;
}

.ag-cal-nav:hover:not(:disabled) { color: var(--green-dark); }
.ag-cal-nav:disabled { color: #ccc; cursor: not-allowed; }

.ag-cal-month {
  font-family: 'Gloock', serif;
  font-size: 1rem;
  color: var(--text-dark);
  text-transform: lowercase;
}

.ag-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: .3rem;
}

.ag-cal-weekdays span {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  text-align: center;
}

.ag-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ag-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Gloock', serif;
  font-size: .88rem;
  color: var(--text-dark);
  transition: background .15s, color .15s;
}

.ag-cal-blank { visibility: hidden; cursor: default; }

.ag-cal-day:hover:not(:disabled) { background: rgba(183,106,79,.08); }

.ag-cal-day:disabled {
  color: rgba(55,34,25,.28);
  cursor: not-allowed;
}

.ag-cal-day.ag-cal-hoje:not(.ag-cal-selecionado) { box-shadow: inset 0 -2px 0 var(--copper-light); }

.ag-cal-day.ag-cal-selecionado {
  background: var(--green-dark);
  color: var(--white);
}

.ag-horarios-msg {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  color: var(--text-muted);
}

.ag-horarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .5rem;
}

.ag-horario {
  border: 1px solid rgba(60,85,61,.18);
  background: none;
  padding: .5rem .3rem;
  text-align: center;
  cursor: pointer;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  transition: border-color .2s, background .2s;
}

.ag-horario:hover:not(:disabled) { border-color: var(--copper-light); }

.ag-horario .inicio { display: block; font-size: .82rem; color: var(--text-dark); }
.ag-horario .fim { display: block; font-size: .62rem; color: var(--text-muted); margin-top: .1rem; }

.ag-horario:disabled {
  background: rgba(0,0,0,.03);
  cursor: not-allowed;
}
.ag-horario:disabled .inicio,
.ag-horario:disabled .fim { color: #b9b0a8; text-decoration: line-through; }

.ag-horario.ag-horario-selecionado {
  background: var(--copper);
  border-color: var(--copper);
}
.ag-horario.ag-horario-selecionado .inicio,
.ag-horario.ag-horario-selecionado .fim { color: var(--white); }

.ag-horarios-vazio {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: .8rem;
}

/* DURAÇÃO AVISO */
.ag-duracao-aviso {
  margin-top: .75rem;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--green-dark);
}

/* ERRO / SUCESSO */
.ag-erro {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .85rem;
  color: #8b1a1a;
  padding: 12px 16px;
  border-left: 3px solid #8b1a1a;
  background: rgba(139,26,26,.04);
}

.ag-sucesso {
  text-align: center;
  padding: 2rem;
  border: 1px solid rgba(60,85,61,.2);
  background: rgba(60,85,61,.04);
}

.ag-sucesso-icon {
  font-family: 'Gloock', serif;
  font-size: 2.5rem;
  color: var(--green-dark);
  margin-bottom: .75rem;
}

.ag-sucesso h3 {
  font-family: 'Gloock', serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--green-dark);
  margin-bottom: .5rem;
}

.ag-sucesso p {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .85rem;
  color: #555;
  line-height: 1.7;
}

/* CRONOGRAMA DE CONFIRMAÇÃO (timeline na caixa de sucesso) */
.ag-crono {
  margin-top: 1.6rem;
  text-align: left;
}

.ag-crono-titulo {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem;
  text-align: center;
}

.ag-crono-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ag-crono-item {
  display: grid;
  grid-template-columns: 54px 16px 1fr;
  align-items: start;
  gap: .75rem;
  padding-bottom: 1.1rem;
}

.ag-crono-item:last-child { padding-bottom: 0; }

.ag-crono-hora {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 400;
  font-size: .8rem;
  color: var(--green-dark);
  line-height: 1.3;
  text-align: right;
}

.ag-crono-hora-fim {
  font-weight: 300;
  font-size: .68rem;
  color: var(--text-muted);
}

/* Marcador + linha que conecta os serviços */
.ag-crono-dot {
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: .25rem;
  border-radius: 50%;
  background: var(--copper);
  justify-self: center;
}

.ag-crono-item:not(:last-child) .ag-crono-dot::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + 1.1rem - 14px);
  background: rgba(183,106,79,.35);
}

.ag-crono-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.ag-crono-servico {
  font-family: 'Gloock', serif;
  font-size: .98rem;
  color: var(--text-dark);
}

.ag-crono-prof {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .76rem;
  color: var(--copper);
}

.ag-crono-dur {
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.ag-crono-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(60,85,61,.18);
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--green-dark);
  text-align: center;
}

.ag-crono-nota {
  margin-top: .5rem;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .68rem;
  color: var(--text-muted);
  text-align: center;
}

/* BOTÃO ENVIAR */
.ag-btn-enviar {
  align-self: flex-start;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  background: var(--green-dark);
  color: var(--white);
  border: 1px solid var(--green-dark);
  padding: .95rem 2.6rem;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.ag-btn-enviar:hover {
  background: var(--copper);
  border-color: var(--copper);
}

.ag-btn-enviar:disabled {
  opacity: .45;
  cursor: not-allowed;
}