/* --- marcar-consulta.css --- */
/* Estilos específicos para a página de agendamento */

.booking-layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Coluna 2/3 para passos, 1/3 para resumo */
  gap: 25px;
}

/* --- Passos (Wizard) --- */
.booking-steps {
  background-color: var(--cor-card);
  border-radius: 12px;
  padding: 30px;
}

.step {
  display: none; /* Escondido por padrão */
}
.step.active {
  display: block; /* Mostra o passo atual */
}
.step h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cor-principal);
  margin-bottom: 25px;
}

/* Formulários */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cor-texto-secundario);
  margin-bottom: 8px;
}
.form-group select {
  width: 100%;
  background-color: var(--cor-fundo);
  border: 1px solid #334a60;
  border-radius: 8px;
  padding: 12px 15px;
  color: var(--cor-texto-principal);
  font-family: var(--font-principal);
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2348E5C2' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

/* Navegação dos Passos */
.step-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.btn-step {
  background-color: var(--cor-principal);
  color: var(--cor-texto-botao);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-principal);
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-step:hover {
  background-color: var(--cor-principal-hover);
}
.btn-step.secondary {
  background-color: transparent;
  border: 2px solid var(--cor-texto-secundario);
  color: var(--cor-texto-secundario);
}
.btn-step.secondary:hover {
  background-color: var(--cor-texto-secundario);
  color: var(--cor-card);
}
.btn-step:disabled {
  background-color: #556;
  cursor: not-allowed;
}

/* --- Calendário (Passo 2) --- */
.calendar-container {
  background-color: var(--cor-fundo);
  border-radius: 10px;
  padding: 20px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.calendar-header h4 {
  font-size: 1.2rem;
  font-weight: 600;
}
.calendar-nav button {
  background: none;
  border: none;
  color: var(--cor-principal);
  font-size: 1.5rem;
  cursor: pointer;
}
.calendar-days,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.calendar-days .day-name {
  font-weight: 600;
  color: var(--cor-texto-secundario);
  text-align: center;
  font-size: 0.8rem;
  padding-bottom: 10px;
}
.calendar-grid .day {
  padding: 10px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calendar-grid .day.past {
  color: #556;
  cursor: not-allowed;
  opacity: 0.5;
}
.calendar-grid .day.available:hover {
  background-color: #334a60;
}
.calendar-grid .day.selected {
  background-color: var(--cor-principal);
  color: var(--cor-texto-botao);
  font-weight: 600;
}

/* --- Horários (Passo 2) --- */
.time-slots {
  margin-top: 25px;
}
.time-slots h4 {
  font-size: 1.1rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 15px;
}
.slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.time-slot {
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-principal);
  color: var(--cor-principal);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.time-slot:hover {
  background-color: var(--cor-principal);
  color: var(--cor-texto-botao);
}
.time-slot.selected {
  background-color: var(--cor-principal);
  color: var(--cor-texto-botao);
  font-weight: 600;
}
.time-slot.disabled {
  background-color: #556;
  border-color: #556;
  color: #999;
  cursor: not-allowed;
}

/* --- Resumo (Passo 3) --- */
.confirmation-details {
  line-height: 1.8;
  font-size: 1.1rem;
}
.confirmation-details strong {
  color: var(--cor-principal);
  font-weight: 600;
}

/* --- Sucesso (Pós-Passo 3) --- */
.booking-success {
  text-align: center;
  padding: 40px 0;
}
.booking-success i {
  font-size: 4rem;
  color: var(--cor-principal);
  margin-bottom: 20px;
}
.booking-success h3 {
  color: var(--cor-principal);
}
.booking-success p {
  color: var(--cor-texto-secundario);
  margin-bottom: 30px;
}
.btn-back-home {
  background-color: var(--cor-principal);
  color: var(--cor-texto-botao);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-back-home:hover {
  background-color: var(--cor-principal-hover);
}

/* --- Card de Resumo (Lateral) --- */
.booking-summary {
  background-color: var(--cor-card);
  border-radius: 12px;
  padding: 25px;
  height: fit-content; /* Faz o card ter a altura do conteúdo */
  position: sticky;
  top: 30px; /* Gruda no topo ao rolar */
}
.booking-summary h4 {
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px solid #334a60;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.summary-item {
  margin-bottom: 15px;
}
.summary-item label {
  display: block;
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 3px;
}
.summary-item span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--cor-texto-principal);
}

/* --- Estilo do Rodapé (Footer) --- */
.site-footer {
    width: 100%;
    background-color: var(--cor-card); /* Reusa a cor dos cards/sidebar */
    color: var(--cor-texto-secundario);
    padding: 30px 5%;
    margin-top: 40px; /* Dá um espaço entre o conteúdo e o rodapé */
    text-align: center;
    border-top: 1px solid #334a60; /* Linha sutil de separação */
}

.site-footer .footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.site-footer .footer-logo img {
    width: 30px;
    height: 30px;
}
.site-footer .footer-logo span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cor-principal);
}

.site-footer p {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links a:hover {
    color: var(--cor-principal);
}