.slotpress-wrap { max-width: 640px; margin: 0 auto; font-family: inherit; }
.sp-steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.sp-step { padding: 6px 14px; border-radius: 20px; font-size: 13px; background: #f0f0f0; color: #666; }
.sp-step.active { background: #185FA5; color: #fff; font-weight: 500; }
.sp-step.done { background: #555; color: #fff; }
.sp-panel { display: none; }
.sp-panel.active { display: block; }
.sp-panel h3 { margin: 0 0 20px; font-size: 18px; }
.sp-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sp-field { margin-bottom: 16px; }
.sp-field-full { grid-column: 1 / -1; }
.sp-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.sp-field input, .sp-field select, .sp-field textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #ccc;
    border-radius: 6px; font-size: 14px; box-sizing: border-box;
}
/* Reset explícito para input[type="date"] — previne colisões com OceanWP/tema
   que pintam inputs com a cor primária do site (fundo verde/azul). */
#slotpress-booking .sp-field input[type="date"] {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    -webkit-appearance: none;
    appearance: none;
}
.sp-field textarea { resize: vertical; }
.sp-slots label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
#sp-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sp-slot { padding: 8px 16px; border: 1px solid #185FA5; border-radius: 6px;
    cursor: pointer; font-size: 14px; color: #185FA5; background: #fff; transition: all .2s; }
.sp-slot:hover, .sp-slot.selected { background: #185FA5 !important; color: #fff !important; font-weight: 500; }
.sp-actions { margin-top: 24px; display: flex; gap: 12px; }
.sp-btn { padding: 10px 24px; background: #185FA5; color: #fff; border: none;
    border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.sp-btn:hover { background: #0C447C; }
.sp-btn:disabled { background: #ccc; cursor: not-allowed; }
.sp-btn-secondary { background: #fff; color: #185FA5; border: 1px solid #185FA5; }
.sp-btn-secondary:hover { background: #f0f5ff; }
.sp-summary { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; font-size: 14px; }
.sp-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.sp-summary-item { display: flex; flex-direction: column; gap: 2px; }
.sp-summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; }
.sp-summary-value { font-size: 14px; font-weight: 600; color: #111827; }
@media (max-width: 480px) { .sp-summary-grid { grid-template-columns: 1fr; } }
.sp-success { text-align: center; padding: 40px 20px; }
.sp-success-icon { width: 60px; height: 60px; background: #2a7a2a; color: #fff;
    border-radius: 50%; font-size: 28px; line-height: 60px; margin: 0 auto 16px; }
.sp-success h3 { color: #2a7a2a; font-size: 22px; margin-bottom: 8px; }
.sp-error { background: #FCEBEB; border: 1px solid #F09595; color: #791F1F;
    padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-top: 12px; }
.sp-loading { color: #666; font-size: 14px; margin-top: 12px; }
@media (max-width: 480px) { .sp-field-group { grid-template-columns: 1fr; } }

.sp-mb-ref { background:#f8f8f8; border:1px solid #ddd; border-radius:8px; padding:16px; margin:16px 0; }
.sp-mb-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #eee; font-size:15px; }
.sp-mb-row:last-child { border-bottom:none; }
.sp-mb-row span { color:#666; }
.sp-mb-row strong { font-size:18px; letter-spacing:1px; }

/* ── Flatpickr — calendário de disponibilidades ─────────────── */
.sp-flatpickr-wrap { margin-bottom: 16px; }

.sp-flatpickr-wrap .flatpickr-calendar {
    width: 100% !important;
    max-width: 420px;
    box-shadow: 0 2px 12px rgba(0,0,0,.10) !important;
    border-radius: 10px !important;
    border: 1px solid #e0e0e0 !important;
    font-family: inherit !important;
}
.sp-flatpickr-wrap .flatpickr-months {
    border-radius: 10px 10px 0 0 !important;
    padding: 4px 0 !important;
    /* background gerido pelo JS via spInjectCSS */
}
.sp-flatpickr-wrap .flatpickr-month,
.sp-flatpickr-wrap .flatpickr-current-month input.cur-year,
.sp-flatpickr-wrap .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #fff !important;
    fill: #fff !important;
}
.sp-flatpickr-wrap .flatpickr-prev-month svg,
.sp-flatpickr-wrap .flatpickr-next-month svg {
    fill: #fff !important;
}
.sp-flatpickr-wrap .flatpickr-weekdays,
.sp-flatpickr-wrap span.flatpickr-weekday {
    background: #fff !important;
    font-weight: 700 !important;
    /* color gerido pelo JS via spInjectCSS */
}

/* Todos os dias — visíveis mas não clicáveis */
#sp-date-input .flatpickr-day,
.sp-flatpickr-wrap .flatpickr-calendar .flatpickr-day {
    border-radius: 50% !important;
    color: #999 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* sp-avail-day: cores geridas exclusivamente pelo spInjectCSS() em slotpress-public.js
   Não definir cor aqui — o JS usa a primary_color das Settings e sobrescreve. */
.sp-flatpickr-wrap .flatpickr-calendar .flatpickr-day.sp-avail-day {
    font-weight: 700 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Dia seleccionado */
#sp-date-input .flatpickr-day.selected,
.sp-flatpickr-wrap .flatpickr-calendar .flatpickr-day.selected {
    background: #185FA5 !important;
    border-color: #185FA5 !important;
    color: #fff !important;
    pointer-events: auto !important;
}

/* Dias fora do mês */
#sp-date-input .flatpickr-day.prevMonthDay,
#sp-date-input .flatpickr-day.nextMonthDay,
.sp-flatpickr-wrap .flatpickr-calendar .flatpickr-day.prevMonthDay,
.sp-flatpickr-wrap .flatpickr-calendar .flatpickr-day.nextMonthDay {
    opacity: 0.2 !important;
    pointer-events: none !important;
}