/* =====================================================================
   Ragazzo Control Panel® · Widget "Agendamento de consultas" — visual.
   Complementa quote.wc.css (stepper/panes/cards/campos, tokens --wcq-* lidos
   da paleta do tema): calendário (air-datepicker) com dias disponíveis,
   grade de horários, cards de tipo de consulta, estado "agenda fechada".
   ===================================================================== */

/* ---- Compacto (dentro de um card, ex.: portal do paciente) ---- */
.wc-bk.wc-bk--compact { box-shadow: none; border: 0; padding: 0; }
.wc-bk.wc-bk--compact::before { display: none; }

/* ---- Cards de tipo de consulta (reusa .wc-quote-svc) ---- */
.wc-bk-type-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .15rem; font-size: .8rem; color: var(--wcq-muted); }
.wc-bk-type-meta b { color: var(--wcq-primary); font-weight: 700; }
.wc-bk-type-meta .icon { margin-right: .2rem; }

/* ---- Calendário ---- */
.wc-bk-cal-wrap { position: relative; }
.wc-bk-cal .datepicker.-inline- {
    width: 100%; border: 1.5px solid var(--wcq-border); border-radius: var(--wcq-radius);
    background: var(--wcq-surface); color: var(--wcq-text); font-family: inherit; box-shadow: none;
}
.wc-bk-cal .datepicker--nav { border-bottom: 1px solid var(--wcq-border); padding: 6px 4px; }
.wc-bk-cal .datepicker--nav-title { color: var(--wcq-heading); font-weight: 700; text-transform: capitalize; }
.wc-bk-cal .datepicker--nav-title i { color: var(--wcq-muted); font-style: normal; }
.wc-bk-cal .datepicker--nav-action:hover, .wc-bk-cal .datepicker--nav-title:hover { background: rgba(var(--wcq-primary-rgb), .08); }
.wc-bk-cal .datepicker--nav-action path { stroke: var(--wcq-primary); }
.wc-bk-cal .datepicker--content { padding: 6px 8px 10px; }
.wc-bk-cal .datepicker--day-name { color: var(--wcq-primary); font-weight: 700; font-size: .72rem; }
.wc-bk-cal .datepicker--cell { height: 36px; border-radius: 9px; color: var(--wcq-text); font-weight: 600; }
.wc-bk-cal .datepicker--cell-day.-other-month- { color: transparent; pointer-events: none; }
.wc-bk-cal .datepicker--cell.-disabled- { color: var(--wcq-muted); opacity: .45; font-weight: 400; cursor: not-allowed; text-decoration: line-through; }
.wc-bk-cal .datepicker--cell.-disabled-.-current- { text-decoration: none; }
.wc-bk-cal .datepicker--cell.-current- { color: var(--wcq-primary); box-shadow: inset 0 0 0 1.5px rgba(var(--wcq-primary-rgb), .5); }
.wc-bk-cal .datepicker--cell:not(.-disabled-):not(.-selected-) { background: rgba(var(--wcq-primary-rgb), .08); }
.wc-bk-cal .datepicker--cell:not(.-disabled-):not(.-selected-):hover { background: rgba(var(--wcq-primary-rgb), .18); }
.wc-bk-cal .datepicker--cell.-focus- { background: rgba(var(--wcq-primary-rgb), .18); }
.wc-bk-cal .datepicker--cell.-selected-, .wc-bk-cal .datepicker--cell.-selected-.-focus- { background: var(--wcq-grad); color: #fff; box-shadow: 0 8px 18px rgba(var(--wcq-primary-rgb), .3); }
.wc-bk-cal .datepicker--cells-months .datepicker--cell, .wc-bk-cal .datepicker--cells-years .datepicker--cell { height: 48px; }
.wc-bk-cal-load {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(255, 255, 255, .55); border-radius: var(--wcq-radius); z-index: 2;
}
.wc-bk-cal-load .wc-quote-spinner {
    display: inline-block; width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid rgba(var(--wcq-primary-rgb), .2); border-top-color: var(--wcq-primary); animation: wcbkSpin .7s linear infinite;
}
@keyframes wcbkSpin { to { transform: rotate(360deg); } }
.wc-bk-range-note { margin: .5rem 0 0; font-size: .78rem; color: var(--wcq-muted); }
.wc-bk-range-note .icon { color: var(--wcq-primary); }

/* ---- Horários ---- */
.wc-bk-slots-day { font-weight: 400; color: var(--wcq-muted); font-size: .8rem; margin-left: .25rem; }
.wc-bk-slots { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 44px; align-content: flex-start; }
.wc-bk-slot {
    display: inline-flex; align-items: center; justify-content: center; min-width: 68px; padding: .55rem .75rem;
    border: 1.5px solid var(--wcq-border); border-radius: 10px; background: var(--wcq-field-bg); color: var(--wcq-heading);
    font-weight: 700; font-size: .88rem; cursor: pointer; transition: .15s ease; font-family: inherit;
}
.wc-bk-slot:hover { border-color: var(--wcq-primary); transform: translateY(-1px); }
.wc-bk-slot.is-active { background: var(--wcq-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(var(--wcq-primary-rgb), .3); }
.wc-bk-empty { color: var(--wcq-muted); font-size: .9rem; }
.wc-bk-request-note {
    width: 100%; margin: .25rem 0 0; padding: .55rem .7rem; border-radius: 10px; font-size: .82rem; color: var(--wcq-text);
    background: rgba(var(--wcq-primary-rgb), .06); border: 1px dashed rgba(var(--wcq-primary-rgb), .3);
}

/* ---- Agenda fechada / sem profissionais ---- */
.wc-bk-closed { text-align: center; padding: 1.5rem .5rem .5rem; }
.wc-bk-closed-ic {
    width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 20px; display: grid; place-items: center;
    background: rgba(var(--wcq-primary-rgb), .1); color: var(--wcq-primary); font-size: 1.8rem;
}
.wc-bk-closed-title { margin: 0 0 .4rem; font-weight: 700; color: var(--wcq-heading); }
.wc-bk-closed p { color: var(--wcq-muted); max-width: 480px; margin: 0 auto 1.2rem; }
.wc-bk-whats { text-decoration: none; display: inline-flex; }
.wc-bk-whats .wc-quote-btn-label { display: inline-flex; align-items: center; gap: .4rem; }

/* ---- Navegação: botão de envio herda o gradiente do quote ---- */
.wc-bk .wc-quote-btn-submit .wc-quote-btn-label { display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 575px) {
    .wc-bk-cal .datepicker--cell { height: 32px; }
    .wc-bk-slot { min-width: 60px; padding: .5rem .6rem; }
}

/* ---- Stepper: a 1ª etapa VISÍVEL não tem linha conectora (o :first-child pode estar oculto) ---- */
.wc-bk .wc-quote-step.wc-bk-first::before { display: none; }

/* ---- Cabeçalho de cada etapa (título + descrição) centralizado, alinhado ao stepper ---- */
.wc-bk .wc-quote-pane-title, .wc-bk .wc-quote-pane-sub { text-align: center; }
.wc-bk .wc-quote-pane-sub { max-width: 560px; margin-left: auto; margin-right: auto; }