/* ============================================================
   Deep Detail — Agendamento online (Fase 4)
   Complementa app.css e site.css.
   ============================================================ */

/* `.container--estreito`, `.migalhas` e `.passos-agenda` vivem no
   site.css desde a revisão visual de 2026-08-07 — são usados por
   mais de uma página pública, não só por esta. */

/* ------------------------------------------------------------
   Formulário
   ------------------------------------------------------------ */

.agendar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

.agendar__bloco {
    border: 1px solid var(--s-borda);
    border-radius: var(--raio-g);
    background: var(--s-card);
    padding: 1.25rem 1.35rem 1.5rem;
}

.agendar__bloco > legend {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.5rem;
    font-family: var(--s-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.agendar__numero {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--grad-verde);
    color: var(--preto);
    font-family: var(--s-display);
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: var(--s-glow);
}

.agendar .grade-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin-top: 1rem;
}
.agendar .campo--largo { grid-column: 1 / -1; }

.agendar__preco {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--s-borda);
}
.agendar__preco strong {
    font-size: 1.35rem;
    color: var(--verde);
}

.agendar__resumo {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    background: var(--s-escuro);
    border: 1px solid var(--verde-escuro);
    border-radius: var(--raio);
    font-size: 0.88rem;
}
.agendar__resumo dl { display: grid; gap: 0.35rem; }
.agendar__resumo div { display: flex; justify-content: space-between; gap: 1rem; }
.agendar__resumo dt { color: var(--s-txt-fraco); }
.agendar__resumo dd { font-weight: 600; text-align: right; }

.campo-com-botao {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}
.campo-com-botao input { flex: 1 1 auto; min-width: 0; }
.campo-com-botao .btn { flex: 0 0 auto; white-space: nowrap; }

.placa-input {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.btn--grande { padding: 0.85rem 1.6rem; font-size: 1rem; }

/* ------------------------------------------------------------
   Slots
   ------------------------------------------------------------ */

.slots { margin-top: 1rem; }
.slots__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.slot {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--s-borda);
    border-radius: var(--raio);
    background: var(--s-escuro);
    color: var(--s-txt-suave);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.slot:hover:not(:disabled) { border-color: var(--verde); color: var(--txt); }
.slot[aria-pressed="true"] {
    background: var(--verde);
    border-color: var(--verde);
    color: var(--preto);
    font-weight: 700;
}

.slots__aviso {
    color: var(--s-txt-fraco);
    font-size: 0.88rem;
    padding: 0.6rem 0;
}

/* ------------------------------------------------------------
   Confirmação
   ------------------------------------------------------------ */

.confirmacao__icone {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--grad-verde);
    color: var(--preto);
    font-size: 2.2rem;
    font-weight: 800;
    box-shadow: var(--sombra-verde);
}

.confirmacao__card {
    max-width: 30rem;
    margin: 0 auto;
    text-align: left;
}

.acoes-centro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* ------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    .agendar .grade-form { grid-template-columns: 1fr; }
    .agendar__bloco { padding: 1rem 1rem 1.25rem; }
    .acoes-centro .btn { width: 100%; }
}