/*
 * Páginas públicas de agendamento (serviços, horários, dados, pedido, privacidade).
 * Pensadas para o celular, numa mão só: alvos grandes, uma coluna, botão de largura total.
 * Escopo: .page-booking.
 */

/* Cabeçalho da página */
.page-booking .booking-head { margin-bottom: var(--space-5); }
.page-booking .booking-head h1 { font-size: 2.1rem; line-height: 1.1; }
.page-booking .booking-head h1::after {
  content: ""; display: block; width: 3rem; height: 3px; margin-top: var(--space-2);
  border-radius: var(--radius-pill); background: var(--accent);
}

/* Títulos de cartão (serviço) */
.page-booking .service-name { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-1); }

/* Lista de serviços: cartão inteiro clicável */
.page-booking .service {
  display: flex; flex-direction: column; gap: var(--space-4);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.page-booking .service:hover { border-color: var(--brand); box-shadow: var(--shadow-md); color: inherit; }
.page-booking .service-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.page-booking .service-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.page-booking .meta {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600;
}
.page-booking .meta.duration { background: var(--sage-100); color: var(--brand-strong); }
.page-booking .meta.price { background: var(--accent-soft); color: var(--accent-ink); }
.page-booking .service-cta { width: 100%; }

/* Horários */
.page-booking .day + .day { margin-top: var(--space-5); }

/* Resumo do horário escolhido / do pedido */
.page-booking .summary { background: var(--sage-100); border-color: transparent; }
.page-booking .when { font-weight: 600; }

/* Formulário: uma coluna, campos e botão grandes */
.page-booking .booking-form :where(input[type=text], input[type=tel], textarea) { min-height: 3rem; }
.page-booking .booking-form .btn.block { min-height: 3.25rem; font-size: var(--text-lg); }
.page-booking .consent {
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--ink); line-height: 1.45;
}
.page-booking .consent input { width: 1.4rem; height: 1.4rem; margin-top: 0; }
.page-booking .consent a { color: var(--accent-ink); font-weight: 600; }

/* Privacidade */
.page-booking .privacy h3 { font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong); }

@media (min-width: 600px) {
  .page-booking .booking-head h1 { font-size: 2.5rem; }
  .page-booking .service { flex-direction: row; align-items: center; justify-content: space-between; }
  .page-booking .service-cta { width: auto; flex: none; }
}