/* ==========================================================================
   Agendamento online (prestadores de servico) — mesma base do cardapio
   (loja.css), com os passos servico > dia > horario > onde > dados.
   ========================================================================== */

.ag-pagina { padding-bottom: 24px; }

.ag-aviso {
  margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--raio);
  background: #fff7ed; color: #9a3412; font-size: .86rem; display: flex; gap: 8px;
}

.ag-grupos { position: static; border-top: 1px solid var(--linha); }

.ag-passo { padding: 16px; border-bottom: 8px solid var(--fundo); }
.ag-passo h2 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.ag-passo h2 span { color: var(--marca); }

/* ------------------------------------------------------------- Servicos */
.ag-servicos { display: flex; flex-direction: column; gap: 10px; }
.ag-servico {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px; border: 1.5px solid var(--linha); border-radius: var(--raio); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.ag-servico input { position: absolute; opacity: 0; pointer-events: none; }
.ag-servico-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-servico-texto strong { font-size: .95rem; }
.ag-servico-texto small { color: var(--tinta-fraca); font-size: .8rem; }
.ag-servico-texto b { margin-top: 4px; font-size: .95rem; }
.ag-servico-img {
  flex: none; width: 64px; height: 56px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; font-size: 1.6rem;
  background: color-mix(in srgb, var(--marca) 12%, #fff);
}
.ag-servico-img img { width: 100%; height: 100%; object-fit: cover; }
.ag-marca {
  position: absolute; top: -8px; right: -8px; font-size: 1.3rem; color: var(--marca);
  background: #fff; border-radius: 50%; line-height: 1; display: none;
}
.ag-servico:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 14%, transparent); }
.ag-servico:has(input:checked) .ag-marca { display: block; }
.ag-servico:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.ag-servico[hidden] { display: none; }

/* ----------------------------------------------------------------- Dias */
.ag-dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.ag-dias::-webkit-scrollbar { display: none; }
.ag-dia {
  position: relative; flex: none; width: 58px; padding: 8px 0; cursor: pointer; text-align: center;
  border: 1.5px solid var(--linha); border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; line-height: 1.15;
}
.ag-dia input { position: absolute; opacity: 0; pointer-events: none; }
.ag-dia small { font-size: .7rem; font-weight: 700; color: var(--tinta-fraca); }
.ag-dia strong { font-size: 1.15rem; }
.ag-dia:has(input:checked) { background: var(--marca); border-color: var(--marca); color: #fff; }
.ag-dia:has(input:checked) small { color: rgba(255,255,255,.85); }
.ag-dia:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ------------------------------------------------------------- Horarios */
.ag-horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 40px; }
.ag-hora {
  border: 1.5px solid var(--linha); background: #fff; color: var(--tinta);
  border-radius: 999px; padding: 7px 0; font-size: .86rem; font-weight: 600;
}
.ag-hora:disabled { background: #f1f1f3; color: #b0b3ba; border-color: #f1f1f3; text-decoration: line-through; }
.ag-hora.ativo { background: var(--marca); border-color: var(--marca); color: #fff; }
.ag-horas-msg { grid-column: 1 / -1; font-size: .86rem; color: var(--tinta-fraca); padding: 8px 0; }

/* ---------------------------------------------------------- Onde vai ser */
.ag-onde {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 12px; margin-bottom: 8px; border: 1.5px solid var(--linha); border-radius: var(--raio);
}
.ag-onde input { margin-top: 3px; accent-color: var(--marca); }
.ag-onde span { display: flex; flex-direction: column; }
.ag-onde strong { font-size: .92rem; }
.ag-onde small { font-size: .8rem; color: var(--tinta-fraca); }
.ag-onde:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 5%, #fff); }
.ag-endereco { margin-top: 4px; }

.ag-erro { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: .88rem; }

/* --------------------------------------------------------- Barra de baixo */
.ag-rodape {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--linha); backdrop-filter: blur(6px);
}
@media (min-width: 760px) { .ag-rodape { left: 50%; transform: translateX(-50%); width: 720px; } }
.ag-resumo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ag-resumo small { font-size: .78rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-resumo strong { font-size: 1.15rem; }
.ag-rodape .btn { min-width: 150px; }

/* ------------------------------------------------- Acompanhar agendamento */
.ag-status-icone { font-size: 3rem; line-height: 1; }
.ag-linha { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 6px 0; }
.ag-linha span:first-child { color: var(--tinta-fraca); }
.ag-linha span:last-child { text-align: right; font-weight: 600; }