/* ── Booking System Plugin — Frontend CSS ── */
.bsp-form-wrap { max-width:680px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* Steps */
.bsp-steps { display:flex;gap:0;margin-bottom:28px;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb; }
.bsp-step  { flex:1;text-align:center;padding:12px 8px;font-size:13px;color:#9ca3af;background:#f9fafb;border-right:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;gap:8px; }
.bsp-step:last-child { border-right:none; }
.bsp-step span { width:22px;height:22px;border-radius:50%;background:#e5e7eb;color:#9ca3af;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center; }
.bsp-step.active { background:#2563eb;color:#fff; }
.bsp-step.active span { background:#fff;color:#2563eb; }
.bsp-step.done { background:#f0fdf4;color:#16a34a; }
.bsp-step.done span { background:#16a34a;color:#fff; }

/* Step content */
.bsp-step-content { display:none; }
.bsp-step-content.active { display:block; }
.bsp-step-content h3 { margin:0 0 20px;font-size:20px;color:#111827; }

/* Services */
.bsp-services-list { display:flex;flex-direction:column;gap:10px;margin-bottom:20px; }
.bsp-svc-option { display:flex;align-items:stretch;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;overflow:hidden;transition:border-color .2s; }
.bsp-svc-option:hover { border-color:#93c5fd; }
.bsp-svc-option.selected { border-color:#2563eb;background:#eff6ff; }
.bsp-svc-option input { display:none; }
.bsp-svc-bar { width:6px;flex-shrink:0; }
.bsp-svc-info { padding:14px 16px;flex:1; }
.bsp-svc-info strong { font-size:15px;color:#111827; }
.bsp-svc-info p { margin:4px 0 8px;color:#6b7280;font-size:13px; }
.bsp-svc-meta { display:flex;gap:16px;font-size:13px;color:#374151; }

/* Date/time */
.bsp-date-time-row { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px; }
.bsp-date-time-row label { display:block;font-weight:600;margin-bottom:6px;color:#374151; }
.bsp-date-time-row input[type="date"] { width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;font-size:15px; }
.bsp-slots { display:flex;flex-wrap:wrap;gap:8px;margin-top:8px; }
.bsp-slot { padding:8px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:.2s; }
.bsp-slot:hover { border-color:#93c5fd; }
.bsp-slot.selected { border-color:#2563eb;background:#2563eb;color:#fff; }
.bsp-hint { color:#9ca3af;font-size:13px; }

/* Fields */
.bsp-fields { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px; }
.bsp-field { display:flex;flex-direction:column;gap:6px; }
.bsp-field-full { grid-column:1/-1; }
.bsp-field label { font-weight:600;font-size:14px;color:#374151; }
.bsp-field input,.bsp-field textarea { padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;font-family:inherit;transition:border-color .2s; }
.bsp-field input:focus,.bsp-field textarea:focus { outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #dbeafe; }

/* Payment */
#bsp-pay-options { display:flex;flex-direction:column;gap:10px;margin-bottom:20px; }
.bsp-pay-option { display:flex;align-items:center;gap:14px;border:2px solid #e5e7eb;border-radius:10px;padding:16px;cursor:pointer;transition:.2s; }
.bsp-pay-option:hover { border-color:#93c5fd; }
.bsp-pay-option.selected { border-color:#2563eb;background:#eff6ff; }
.bsp-pay-option input { width:18px;height:18px;accent-color:#2563eb; }
.bsp-pay-icon { font-size:28px; }
#bsp-stripe-element { border:1px solid #d1d5db;border-radius:8px;padding:12px;margin-top:12px;background:#fff; }

/* Summary */
.bsp-summary { background:#f9fafb;border-radius:10px;padding:20px;margin-bottom:20px; }
.bsp-summary-row { display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #e5e7eb;font-size:14px; }
.bsp-summary-row:last-child { border-bottom:none;font-weight:700;font-size:15px;margin-top:6px; }
.bsp-summary-label { color:#6b7280; }

/* Buttons */
.bsp-nav { display:flex;gap:10px;justify-content:flex-end;margin-top:20px; }
.bsp-btn { padding:12px 28px;border-radius:8px;border:none;font-size:15px;font-weight:700;cursor:pointer;background:#2563eb;color:#fff;transition:.2s; }
.bsp-btn:hover { background:#1d4ed8; }
.bsp-btn-sec { background:#f3f4f6;color:#374151; }
.bsp-btn-sec:hover { background:#e5e7eb; }
.bsp-btn-green { background:#16a34a; }
.bsp-btn-green:hover { background:#15803d; }

/* Error */
.bsp-error-msg { background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:12px 16px;border-radius:8px;margin-top:12px; }

/* Spinner */
.bsp-spinner { width:36px;height:36px;border:4px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:bsp-spin .7s linear infinite;margin:0 auto 10px; }
@keyframes bsp-spin { to { transform:rotate(360deg); } }

@media (max-width:500px) {
  .bsp-fields { grid-template-columns:1fr; }
  .bsp-date-time-row { grid-template-columns:1fr; }
  .bsp-steps .bsp-step { font-size:0; }
  .bsp-steps .bsp-step span { font-size:12px; }
}