/**
 * assets/css/app.css
 * Estilos da area publica (fluxo de agendamento do cliente).
 * Mantido minimo — a maior parte do visual vem do Bootstrap 5.
 */

:root {
    --cor-primaria: #c2185b;
    --cor-primaria-clara: #fce4ec;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.text-primary,
.navbar-brand {
    color: var(--cor-primaria) !important;
}

.btn-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #a01650;
    border-color: #a01650;
}

.btn-outline-primary {
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.btn-outline-primary:hover {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

/* Indicador de etapas do wizard de agendamento */
.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    gap: .4rem;
}

.wizard-steps .step {
    flex: 1 1 auto;
    min-width: 88px;
    text-align: center;
}

.wizard-steps .step .rotulo-etapa {
    display: block;
    padding: .35rem .5rem;
    border: 2px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    color: #adb5bd;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .15s ease-in-out, color .15s ease-in-out, background-color .15s ease-in-out;
}

.wizard-steps .step .rotulo-etapa i {
    margin-right: .3rem;
}

.wizard-steps .step.ativo .rotulo-etapa {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
}

.wizard-steps .step.concluido .rotulo-etapa {
    border-color: #198754;
    color: #198754;
    background: #e9f7ef;
}

/* Cards selecionaveis (servico/pacote/combo) */
.card-selecionavel {
    cursor: pointer;
    border: 2px solid #e9ecef;
    transition: border-color .15s ease-in-out;
}

.card-selecionavel:hover {
    border-color: #f8bbd0;
}

.card-selecionavel.selecionado {
    border-color: var(--cor-primaria);
    background-color: var(--cor-primaria-clara);
}

/* Botoes de horario disponivel */
.grade-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .5rem;
}

.btn-horario.selecionado {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.etapa-wizard {
    display: none;
}

.etapa-wizard.ativa {
    display: block;
}