/* Schedulerity — Manage Booking page (cancel / reschedule via email link). */
#schedulerity-manage-booking {
  --so-mb-primary: #6366f1;
  --so-mb-text: #111827;
  --so-mb-muted: #6b7280;
  --so-mb-border: #e5e7eb;
  --so-mb-danger: #dc2626;
  max-width: 560px;
  margin: 32px auto;
  padding: 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--so-mb-text);
}
#schedulerity-manage-booking [x-cloak] { display: none !important; }

.so-mb-card {
  background: #fff;
  border: 1px solid var(--so-mb-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 28px;
}

.so-mb-center { text-align: center; padding: 24px 8px; }
.so-mb-title { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
.so-mb-muted { color: var(--so-mb-muted); font-size: 14px; line-height: 1.6; }

.so-mb-summary {
  border: 1px solid var(--so-mb-border);
  border-radius: 12px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

/* Check-in code — the customer shows this at the front desk. The reference
   renders even when the QR image doesn't, so there's always a typed fallback. */
.so-mb-qr {
  border: 1px solid var(--so-mb-border);
  border-radius: 12px;
  padding: 20px 16px;
  margin-bottom: 20px;
  text-align: center;
  background: #f9fafb;
}
.so-mb-qr__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.so-mb-qr__hint { margin: 0 0 14px; font-size: 13px; color: var(--so-mb-muted); }
.so-mb-qr__img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--so-mb-border);
  border-radius: 12px;
  box-sizing: content-box;
}
.so-mb-qr__ref { margin: 0; font-size: 12px; color: var(--so-mb-muted); }
.so-mb-qr__ref strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #111827;
}
.so-mb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
}
.so-mb-row:last-child { border-bottom: none; }
.so-mb-row span { color: var(--so-mb-muted); }
.so-mb-row strong { text-align: right; text-transform: capitalize; }

.so-mb-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.so-mb-btn {
  flex: 1 1 auto;
  min-width: 130px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
}
.so-mb-btn:disabled { opacity: .55; cursor: not-allowed; }
.so-mb-btn--primary { background: var(--so-mb-primary); color: #fff; }
.so-mb-btn--primary:hover:not(:disabled) { background: #4f46e5; }
.so-mb-btn--ghost { background: #fff; color: var(--so-mb-text); border-color: var(--so-mb-border); }
.so-mb-btn--ghost:hover:not(:disabled) { background: #f9fafb; }
.so-mb-btn--danger { background: var(--so-mb-danger); color: #fff; }
.so-mb-btn--danger:hover:not(:disabled) { background: #b91c1c; }
.so-mb-btn--danger-outline { background: #fff; color: var(--so-mb-danger); border-color: #fecaca; }
.so-mb-btn--danger-outline:hover:not(:disabled) { background: #fef2f2; }

.so-mb-confirm {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
  font-size: 14px;
}
.so-mb-confirm p { margin: 0 0 12px; }

.so-mb-label { font-size: 13px; font-weight: 600; color: var(--so-mb-muted); margin: 18px 0 8px; }
.so-mb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.so-mb-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--so-mb-border);
  background: #fff;
  color: var(--so-mb-text);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.so-mb-chip:hover { border-color: var(--so-mb-primary); }
.so-mb-chip--on { background: var(--so-mb-primary); color: #fff; border-color: var(--so-mb-primary); }

.so-mb-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 4px 0 12px;
}

.so-mb-icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  margin: 0 auto 16px;
}
.so-mb-icon--ok { background: #dcfce7; color: #16a34a; }
.so-mb-icon--warn { background: #fef9c3; color: #ca8a04; }

.so-mb-spinner {
  width: 32px; height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--so-mb-primary);
  border-radius: 999px;
  margin: 0 auto 12px;
  animation: so-mb-spin .8s linear infinite;
}
@keyframes so-mb-spin { to { transform: rotate(360deg); } }