/* ===== Maré Alta Bronze — Modal de Agendamento ===== */

#agModal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
#agModal.open { display: flex; }
#agOverlay { position: absolute; inset: 0; background: rgba(11,45,77,0.55); backdrop-filter: blur(3px); }

.ag-caixa {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  background: #F4EBDD; border-radius: 14px;
  padding: 30px 26px 26px; box-shadow: 0 20px 60px rgba(11,45,77,0.35);
  font-family: 'Montserrat', sans-serif;
}

.ag-fechar {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: none; background: transparent; color: #0B2D4D; font-size: 26px;
  line-height: 1; cursor: pointer;
}

.ag-titulo { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #0B2D4D; margin: 0 0 4px; }
.ag-subtitulo { font-size: 13.5px; color: rgba(11,45,77,0.65); margin: 0 0 20px; font-weight: 300; }

/* trilha de passos */
.ag-passos { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.ag-passo {
  flex: 1; height: 4px; border-radius: 4px; background: rgba(11,45,77,0.15);
}
.ag-passo-ativo, .ag-passo-feito { background: #0B2D4D; }

.ag-etapa { display: none; }
.ag-etapa.ativa { display: block; }

.ag-campo { margin-bottom: 16px; }
.ag-campo label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #0B2D4D; margin-bottom: 6px; text-transform: uppercase; }
.ag-campo input {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(11,45,77,0.2);
  border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; color: #0B2D4D;
}
.ag-campo input:focus { outline: none; border-color: #0B2D4D; }

.ag-lista-horarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; max-height: 220px; overflow-y: auto; padding: 2px; }
.ag-horario {
  padding: 11px 4px; border: 1px solid rgba(11,45,77,0.25); border-radius: 8px;
  background: #fff; color: #0B2D4D; font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: .15s;
}
.ag-horario:hover:not(:disabled) { border-color: #0B2D4D; }
.ag-horario.selecionado { background: #0B2D4D; color: #F4EBDD; border-color: #0B2D4D; }
.ag-horario-cheio, .ag-horario:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.ag-carregando, .ag-vazio { font-size: 13.5px; color: rgba(11,45,77,0.6); padding: 10px 2px; grid-column: 1 / -1; }

.ag-acoes { display: flex; gap: 10px; margin-top: 22px; }
.ag-btn {
  flex: 1; padding: 14px; border-radius: 100px; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .5px;
  text-transform: uppercase; transition: .2s;
}
.ag-btn-primario { background: #0B2D4D; color: #F4EBDD; }
.ag-btn-primario:hover:not(:disabled) { background: #153A5F; }
.ag-btn-primario:disabled { opacity: .4; cursor: not-allowed; }
.ag-btn-secundario { background: transparent; color: #0B2D4D; border: 1px solid rgba(11,45,77,0.3); }

.ag-resumo { background: #fff; border-radius: 10px; padding: 16px 18px; margin: 16px 0 20px; }
.ag-resumo p { margin: 0 0 8px; font-size: 14px; color: #0B2D4D; }
.ag-resumo p:last-child { margin-bottom: 0; }

.ag-whats-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; border-radius: 100px; background: #25D366; color: #fff;
  text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .4px;
}

@media (max-width: 480px) {
  .ag-lista-horarios { grid-template-columns: repeat(3, 1fr); max-height: 180px; }
  .ag-caixa { padding: 24px 18px 20px; }
}