/*
 * Assistente de agendamento. Bootstrap 5.3 fornece grade, formulários e alertas; as cores, o raio e as fontes vêm
 * dos tokens da empresa (/tema.css). Carregado depois do Bootstrap e do site.css.
 */
.wizard {
    --wz-radius: var(--ag-radius, 8px);
    --wz-gap: calc(var(--ag-space, 1rem));
    --bs-body-font-family: var(--ag-font-body);
    --bs-body-color: var(--ag-text);
    --bs-body-bg: var(--ag-surface);
    --bs-border-color: var(--ag-border);
    --bs-link-color: var(--ag-primary);
    --bs-link-hover-color: var(--ag-primary);
    --bs-focus-ring-color: transparent;
    padding-block: calc(var(--wz-gap) * 1.5) calc(var(--wz-gap) * 3);
}

.wizard-title { font-size: clamp(1.5rem, 5vw, 2.25rem); margin-bottom: .75rem; }
.wizard-title:focus { outline: none; }
.wizard .lead { font-size: 1.05rem; max-width: 40rem; }
.wizard .form-control, .wizard .form-select {
    min-height: 2.75rem; border-radius: var(--wz-radius); border: 1px solid var(--ag-muted);
    background-color: var(--ag-surface); color: var(--ag-text);
}
.wizard .form-control:focus, .wizard .form-select:focus, .wizard .form-check-input:focus {
    border-color: var(--ag-primary); box-shadow: none; outline: 3px solid var(--ag-accent); outline-offset: 2px;
}
.wizard .form-check-input { width: 1.35em; height: 1.35em; border: 1px solid var(--ag-muted); }
.wizard .form-check-input:checked { background-color: var(--ag-primary); border-color: var(--ag-primary); }
.wizard .form-check-label { padding-left: .25rem; }
.wizard .form-text { color: var(--ag-muted); }
.wizard .form-control.is-invalid, .wizard .form-select.is-invalid { border-color: #b02a37; border-width: 2px; background-image: none; padding-right: .75rem; }
.field-error { margin-top: .35rem; color: #842029; font-size: .95rem; }
.field-error::before { content: "\26A0\FE0F\00a0"; }
.wizard .alert { border-radius: var(--wz-radius); }
.wizard fieldset { border: 0; padding: 0; margin: 0; }
.wizard legend { float: none; width: auto; padding: 0; }
.muted { color: var(--ag-muted); }

/* Botões: o estilo (sólido, contorno, suave) vem de site.css; aqui só variações do assistente */
.wizard .btn { text-decoration: none; }
.btn-nav { min-height: 2.75rem; }
.btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-link-like { background: transparent !important; border-color: transparent !important; color: var(--ag-primary) !important; text-decoration: underline !important; }
.btn-text { background: none; border: 0; padding: .5rem 0; min-height: 2.75rem; color: var(--ag-muted); text-decoration: underline; font: inherit; cursor: pointer; }
.btn-text:hover { color: var(--ag-text); }
.wizard-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
button[aria-busy="true"] { opacity: .75; cursor: progress; }

/* Progresso */
.wizard-progress { margin-bottom: calc(var(--wz-gap) * 1.5); }
.wizard-progress-text { margin: 0 0 .5rem; color: var(--ag-muted); }
.wizard-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.wizard-steps li { display: flex; align-items: center; gap: .5rem; padding: .25rem .6rem .25rem .25rem; border-radius: 999px; border: 1px solid var(--ag-border); color: var(--ag-muted); background: var(--ag-surface); }
.step-number {
    display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; font-size: .85rem;
    border: 2px solid currentColor; flex: none;
}
.wizard-steps .is-complete { color: var(--ag-text); }
.wizard-steps .is-complete .step-number { background: var(--ag-primary); border-color: var(--ag-primary); color: var(--ag-on-primary); }
.wizard-steps .is-current { color: var(--ag-text); border-color: var(--ag-primary); border-width: 2px; font-weight: 700; }
.wizard-steps .is-current .step-number { background: var(--ag-surface); border-color: var(--ag-primary); color: var(--ag-primary); }
@media (max-width: 575.98px) {
    /* Em telas estreitas só a etapa atual mostra o nome; o texto "Etapa X de Y" acima diz onde o cliente está */
    .wizard-steps .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .wizard-steps .is-current .step-label { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
    .wizard-steps li { padding-right: .25rem; }
    .wizard-steps .is-current { padding-right: .75rem; }
}

/* Opções de escolha */
.wizard-options { display: grid; gap: .75rem; padding: 0; margin: var(--wz-gap) 0 0; }
.option {
    display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; padding: 1rem 1.1rem; min-height: 3.5rem;
    border: 2px solid var(--ag-border); border-radius: var(--wz-radius); background: var(--ag-surface); color: var(--ag-text); text-decoration: none;
}
.option:hover { border-color: var(--ag-primary); background: var(--ag-surface-alt); }
.option-label { font-weight: 700; font-size: 1.1rem; }
.option-description, .option-meta { grid-column: 1; color: var(--ag-muted); font-size: .95rem; }
.option-go { grid-row: 1 / span 3; grid-column: 2; font-size: 1.4rem; color: var(--ag-primary); }

/* Horários */
.schedule { margin-top: var(--wz-gap); transition: opacity .15s; }
.schedule[aria-busy="true"] { opacity: .55; }
.schedule-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.schedule-head p { margin: 0; }
.schedule-zone { flex-basis: 100%; }
.schedule-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.schedule-day { margin-bottom: 1.25rem; }
.schedule-day-title { font-size: 1.05rem; font-family: var(--ag-font-body); font-weight: 700; margin: 0 0 .5rem; }
.schedule-day-title::first-letter { text-transform: uppercase; }
.slot-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; padding: 0; margin: 0; }
.btn.slot {
    flex-direction: column; width: 100%; gap: .1rem; padding: .5rem .6rem; background: var(--ag-surface); color: var(--ag-primary);
    border: 2px solid var(--ag-primary); line-height: 1.25; text-align: center;
}
.btn.slot:hover { background: var(--ag-surface-alt); filter: none; }
.btn.slot .slot-time { font-size: 1.15rem; font-weight: 700; }
.btn.slot .slot-meta { font-size: .8rem; font-weight: 400; color: var(--ag-muted); }
.btn.slot.is-selected { background: var(--ag-primary); color: var(--ag-on-primary); }
.btn.slot.is-selected .slot-meta { color: var(--ag-on-primary); }
body[data-button="outline"] .btn.slot, body[data-button="soft"] .btn.slot { background: var(--ag-surface); color: var(--ag-primary); border-color: var(--ag-primary); }
body[data-button="outline"] .btn.slot.is-selected, body[data-button="soft"] .btn.slot.is-selected { background: var(--ag-primary); color: var(--ag-on-primary); }

/* Esqueleto: mesma altura do conteúdo para não mover a página */
.skeleton { display: grid; gap: .75rem; }
.skeleton span { display: block; height: 3rem; border-radius: var(--wz-radius); background: linear-gradient(90deg, var(--ag-surface-alt) 25%, var(--ag-border) 37%, var(--ag-surface-alt) 63%); background-size: 400% 100%; animation: wz-shimmer 1.2s ease infinite; }
@keyframes wz-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Resumo */
.wizard-summary { border: 1px solid var(--ag-border); border-radius: var(--wz-radius); background: var(--ag-surface-alt); padding: 0 1rem; }
.wizard-summary summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-weight: 700; padding-block: .5rem; }
.wizard-summary[open] summary { border-bottom: 1px solid var(--ag-border); margin-bottom: .5rem; }
@media (min-width: 992px) {
    .wizard-summary { position: sticky; top: 1rem; }
    .wizard-summary summary { pointer-events: none; }
    .wizard-summary summary::marker, .wizard-summary summary::-webkit-details-marker { content: ""; display: none; }
}
.wizard-facts { margin: 0 0 1rem; }
.wizard-facts > div { display: grid; padding-block: .4rem; border-bottom: 1px dashed var(--ag-border); }
.wizard-facts > div:last-child { border-bottom: 0; }
.wizard-facts dt { font-size: .85rem; font-weight: 400; color: var(--ag-muted); }
.wizard-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.wizard-facts .is-total dd { font-size: 1.2rem; }
.summary-change { margin-left: .5rem; font-weight: 400; font-size: .9rem; }

/* Retenção */
.hold-timer { border: 2px solid var(--ag-primary); border-radius: var(--wz-radius); padding: .75rem 1rem; margin-bottom: 1.25rem; background: var(--ag-surface); }
.hold-timer.is-low { border-color: #b02a37; background: #f8d7da; color: #58151c; }
.hold-timer.is-over { border-color: #b02a37; }
.hold-timer-text { margin: 0; }
.hold-remaining { font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.confirmation-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.4rem; letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) {
    .schedule { transition: none; }
    .skeleton span { animation: none; }
    * { scroll-behavior: auto !important; }
}
.wizard-facts-main { border: 1px solid var(--ag-border); border-radius: var(--wz-radius); padding: .5rem 1rem; background: var(--ag-surface-alt); margin-bottom: 1.25rem; }

/* A CSP só aceita imagens do próprio domínio: os ícones data: do Bootstrap são trocados por arquivos locais */
.wizard .form-select { --bs-form-select-bg-img: url(../img/wizard/chevron.svg); }
.wizard .form-select.is-invalid { background-image: var(--bs-form-select-bg-img); }
.wizard .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url(../img/wizard/check.svg); }
.wizard .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url(../img/wizard/radio.svg); }
/* O Bootstrap remove o contorno de .btn:focus-visible; o foco precisa continuar visível (WCAG 2.4.7) */
.wizard a:focus-visible, .wizard button:focus-visible, .wizard .btn:focus-visible, .wizard summary:focus-visible, .wizard .btn.slot:focus-visible {
    outline: 3px solid var(--ag-accent); outline-offset: 3px; box-shadow: none;
}

/* Calendário */
.calendar-card { border: 1px solid var(--ag-border); border-radius: var(--wz-radius); background: var(--ag-surface-alt); padding: 1rem 1.1rem; margin-block: 1.25rem; }
.calendar-card h2 { font-family: var(--ag-font-heading); }

/* ---------- Visual moderno do assistente (sobrepõe as regras acima; tudo continua vindo dos tokens) ---------- */
.wizard {
    --wz-radius: max(var(--ag-radius), 10px);
    --wz-radius-lg: var(--ag-radius-lg, 18px);
    padding-block: clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.wizard-title { font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.wizard .lead { color: var(--ag-muted); }

/* Progresso: trilho com marcos */
.wizard-progress { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--wz-radius-lg); padding: 1rem 1.15rem; box-shadow: var(--ag-shadow-sm); }
.wizard-progress-text { font-size: .9rem; font-weight: 600; margin-bottom: .75rem; }
.wizard-steps { gap: .4rem; }
.wizard-steps li { border: 0; background: var(--ag-primary-soft); padding: .3rem .8rem .3rem .3rem; font-size: .9rem; transition: background-color .2s; }
.step-number { border-width: 0; background: var(--ag-surface); color: var(--ag-muted); box-shadow: inset 0 0 0 1.5px var(--ag-border); }
.wizard-steps .is-complete { background: var(--ag-primary-tint); }
.wizard-steps .is-complete .step-number { box-shadow: none; }
.wizard-steps .is-current { background: var(--ag-primary); color: var(--ag-on-primary); border: 0; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ag-primary) 80%, transparent); }
.wizard-steps .is-current .step-number { background: var(--ag-on-primary); color: var(--ag-primary); box-shadow: none; }

/* Opções (áreas, serviços, profissionais…) como cartões */
.wizard-options { gap: .85rem; }
.option {
    padding: 1.15rem 1.25rem; border: 1px solid var(--ag-line); border-radius: var(--wz-radius-lg); background: var(--ag-surface);
    box-shadow: var(--ag-shadow-sm); transition: transform .2s var(--ag-ease), box-shadow .2s var(--ag-ease), border-color .2s, background-color .2s;
}
.option:hover { transform: translateY(-2px); box-shadow: var(--ag-shadow-md); border-color: var(--ag-primary); background: var(--ag-surface); }
.option-label { font-size: 1.12rem; letter-spacing: -.01em; }
.option-go {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ag-primary-tint);
    font-size: 1.2rem; transition: transform .2s var(--ag-ease), background-color .2s, color .2s;
}
.option:hover .option-go { background: var(--ag-primary); color: var(--ag-on-primary); transform: translateX(3px); }

/* Horários: fichas */
.schedule-day { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--wz-radius-lg); padding: 1rem 1.1rem 1.15rem; box-shadow: var(--ag-shadow-sm); }
.schedule-day-title { font-size: 1rem; color: var(--ag-muted); text-transform: none; }
.slot-list { grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); gap: .55rem; }
.btn.slot {
    border: 1.5px solid var(--ag-line); background: var(--ag-primary-soft); box-shadow: none; border-radius: var(--wz-radius); color: var(--ag-text);
}
.btn.slot:hover { background: var(--ag-primary-tint); border-color: var(--ag-primary); box-shadow: var(--ag-shadow-sm); transform: translateY(-1px); filter: none; }
.btn.slot .slot-time { color: var(--ag-primary); }
.btn.slot.is-selected, body[data-button="outline"] .btn.slot.is-selected, body[data-button="soft"] .btn.slot.is-selected { background: var(--ag-primary); border-color: var(--ag-primary); color: var(--ag-on-primary); box-shadow: var(--ag-shadow-md); }
.btn.slot.is-selected .slot-time { color: var(--ag-on-primary); }
body[data-button="outline"] .btn.slot, body[data-button="soft"] .btn.slot { background: var(--ag-primary-soft); color: var(--ag-text); border-color: var(--ag-line); }
.schedule-nav .btn, .wizard-actions .btn { min-height: 2.9rem; }

/* Resumo, avisos e cartões de apoio */
.wizard-summary, .wizard-facts-main, .calendar-card { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--wz-radius-lg); box-shadow: var(--ag-shadow-sm); }
.wizard-summary summary { font-family: var(--ag-font-heading); letter-spacing: -.01em; }
.wizard-facts > div { border-bottom-color: var(--ag-line); }
.hold-timer { border-width: 1.5px; border-radius: var(--wz-radius-lg); background: var(--ag-primary-soft); box-shadow: var(--ag-shadow-sm); }
.hold-timer.is-low { background: #fde8ea; }
.wizard .alert { border-radius: var(--wz-radius-lg); border: 0; box-shadow: var(--ag-shadow-sm); }
.wizard .form-control, .wizard .form-select { border-width: 1.5px; border-color: color-mix(in srgb, var(--ag-muted) 65%, var(--ag-surface)); border-radius: var(--wz-radius); }
.wizard .form-control:focus, .wizard .form-select:focus { box-shadow: 0 0 0 4px var(--ag-primary-tint); outline: 2px solid var(--ag-primary); outline-offset: 1px; }
.wizard .form-label { font-weight: 700; }
.confirmation-code { background: var(--ag-primary-soft); border: 1px dashed var(--ag-primary); border-radius: var(--wz-radius); padding: .5rem .9rem; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .option, .option-go, .btn.slot { transition: none; }
}