/* ==============================================================
   Elegant Booking Pro Suite — Frontend CSS  v2.2.1 (Phase 2.1)
   - Scoped reset under #ebps-overlay so theme styles cannot bleed
   - Hardened typography overrides (themes often force huge h2 sizes)
   - Premium modal proportions: balanced header + content + sidebar
   - One-click flow: dedup launchers, support .ebps-open-trigger
   - Refined floating launcher with safe theme isolation
   ============================================================== */

/* ── Scoped reset (isolate from theme) ────────────────────────── */
#ebps-overlay,
#ebps-overlay * {
  box-sizing: border-box;
}
#ebps-overlay,
#ebps-overlay h1, #ebps-overlay h2, #ebps-overlay h3, #ebps-overlay h4,
#ebps-overlay p, #ebps-overlay span, #ebps-overlay b, #ebps-overlay strong,
#ebps-overlay small, #ebps-overlay em, #ebps-overlay label, #ebps-overlay button,
#ebps-overlay input, #ebps-overlay select, #ebps-overlay textarea,
#ebps-overlay div, #ebps-overlay nav, #ebps-overlay form {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  font-style: normal;
}
#ebps-overlay h1, #ebps-overlay h2, #ebps-overlay h3, #ebps-overlay h4 {
  margin: 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  border: 0;
  background: transparent;
  /* Defeat aggressive themes that style raw h2 to giant hero sizes */
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}
#ebps-overlay p { margin: 0; padding: 0; line-height: 1.5; }
#ebps-overlay button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#ebps-overlay input,
#ebps-overlay select,
#ebps-overlay textarea {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  margin: 0;
  background: #fff;
  color: #0f172a;
  width: 100%;
  line-height: 1.4;
}
#ebps-overlay select {
  -webkit-appearance: menulist;
  appearance: menulist;
}
#ebps-overlay label { display: block; margin: 0; padding: 0; }
#ebps-overlay em { font-style: normal; }

/* ── Palette ──────────────────────────────────────────────────── */
:root {
  --ebps-navy:       #1e2a44;   /* sidebar + header */
  --ebps-navy-deep:  #15203a;
  --ebps-ink:        #0f172a;   /* primary text */
  --ebps-ink-soft:   #475569;   /* secondary text */
  --ebps-mute:       #94a3b8;
  --ebps-line:       #e5e7eb;
  --ebps-line-soft:  #f1f5f9;
  --ebps-bg:         #f7f8fb;   /* modal body bg */
  --ebps-surface:    #ffffff;
  --ebps-accent:     #2563eb;   /* primary blue */
  --ebps-accent-2:   #1d4ed8;
  --ebps-accent-tint:#eff4ff;
  --ebps-success:    #10b981;
  --ebps-danger:     #dc2626;
}

/* ── Overlay ──────────────────────────────────────────────────── */
#ebps-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Modal shell ──────────────────────────────────────────────── */
#ebps-modal {
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  background: var(--ebps-surface);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28),
              0 2px 8px rgba(15, 23, 42, 0.08);
  animation: ebpsModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ebpsModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Header ───────────────────────────────────────────────────── */
#ebps-modal-header {
  background: var(--ebps-navy);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
#ebps-modal-header > div { min-width: 0; }
#ebps-overlay #ebps-modal-title {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  font-family: inherit !important;
}
#ebps-overlay #ebps-modal-sub {
  color: #b5c4dc !important;
  font-size: 13px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-family: inherit !important;
}

/* Harden every modal heading and label against theme overrides. */
#ebps-overlay .ebps-panel-head h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--ebps-ink) !important;
}
#ebps-overlay .ebps-step-label b {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
#ebps-overlay .ebps-step-label small {
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#ebps-overlay #ebps-close {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
#ebps-overlay #ebps-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ── Body layout ──────────────────────────────────────────────── */
#ebps-modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ebps-bg);
}

/* ── Sidebar ──────────────────────────────────────────────────── */
#ebps-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--ebps-navy);
  display: flex;
  flex-direction: column;
  padding: 18px 0 14px;
  transition: width 0.22s ease, padding 0.22s ease;
  overflow: hidden;
}
#ebps-sidebar.collapsed {
  width: 0;
  padding: 0;
  border: 0;
}

.ebps-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
  border-left: 3px solid transparent;
}
.ebps-step-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ebps-step-item.active {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--ebps-accent);
}

.ebps-step-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #93a4c0;
  font-size: 15px;
  line-height: 1;
}
.ebps-step-item.active .ebps-step-icon,
.ebps-step-item.done   .ebps-step-icon {
  color: #ffffff;
}

.ebps-step-label {
  flex: 1 1 auto;
  min-width: 0;
}
#ebps-overlay .ebps-step-label b {
  display: block;
  color: #cdd6e6;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
}
#ebps-overlay .ebps-step-label small {
  display: block;
  color: #7c8aa3;
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.ebps-step-item.active .ebps-step-label b { color: #ffffff; }
.ebps-step-item.done   .ebps-step-label b { color: #cfe7da; }

.ebps-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #3a4a6a;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
  background: transparent;
}
.ebps-step-dot.active {
  border-color: var(--ebps-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.ebps-step-dot.done {
  background: var(--ebps-success);
  border-color: var(--ebps-success);
  color: #fff;
  font-weight: 700;
}

#ebps-collapse-btn {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.04);
  color: #9aacc7;
  padding: 11px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, color 0.12s;
}
#ebps-collapse-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
#ebps-collapse-btn span  { font-size: 14px; }

/* ── Content area ─────────────────────────────────────────────── */
#ebps-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  background: var(--ebps-surface);
  border-radius: 12px;
  margin: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06),
              0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
}

.ebps-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 380px;
  max-height: 100%;
  overflow: hidden;
}

.ebps-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--ebps-line-soft);
  flex-shrink: 0;
}
#ebps-overlay .ebps-panel-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--ebps-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

#ebps-overlay .ebps-back-btn {
  background: var(--ebps-line-soft);
  border: 1px solid var(--ebps-line);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ebps-ink-soft);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#ebps-overlay .ebps-back-btn:hover {
  background: var(--ebps-line);
  color: var(--ebps-ink);
}

/* ── Search bar ───────────────────────────────────────────────── */
.ebps-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--ebps-line-soft);
  flex-shrink: 0;
}
.ebps-search-icon {
  color: var(--ebps-mute);
  font-size: 14px;
  display: inline-flex;
}
#ebps-overlay #ebps-search {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 14px;
  color: var(--ebps-ink);
  background: transparent;
  padding: 6px 0;
  width: auto;
}
#ebps-overlay #ebps-search::placeholder { color: var(--ebps-mute); }

/* ── Service list ─────────────────────────────────────────────── */
#ebps-service-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 20px;
}

.ebps-service-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--ebps-surface);
  border: 1px solid var(--ebps-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s,
              transform 0.1s;
}
.ebps-service-card:hover {
  border-color: #c7d4ec;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.ebps-service-card.sel {
  border-color: var(--ebps-accent);
  background: var(--ebps-accent-tint);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ebps-svc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.ebps-svc-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
#ebps-overlay .ebps-svc-info b {
  font-size: 15px;
  font-weight: 600;
  color: var(--ebps-ink);
  line-height: 1.3;
}
.ebps-svc-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ebps-ink-soft);
  flex-wrap: wrap;
}
.ebps-svc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ebps-svc-learn {
  font-size: 12px;
  color: var(--ebps-accent);
  font-weight: 500;
  margin-top: 2px;
}

/* ── Calendar ─────────────────────────────────────────────────── */
#ebps-cal-wrap {
  padding: 18px 28px 8px;
  flex-shrink: 0;
}
#ebps-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#ebps-overlay #ebps-cal-nav select {
  border: 1px solid var(--ebps-line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ebps-ink);
  background: var(--ebps-surface);
  width: auto;
}
#ebps-cal-prev, #ebps-cal-next {
  background: var(--ebps-line-soft);
  border: 1px solid var(--ebps-line);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ebps-ink-soft);
  transition: background 0.12s, color 0.12s;
}
#ebps-cal-prev:hover, #ebps-cal-next:hover {
  background: var(--ebps-line);
  color: var(--ebps-ink);
}

#ebps-cal-days-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
#ebps-overlay #ebps-cal-days-head span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ebps-mute);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#ebps-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.ebps-cal-empty { height: 40px; }
.ebps-cal-day {
  height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ebps-ink);
  background: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ebps-cal-day.avail {
  background: #fff;
  color: var(--ebps-ink);
  border-color: var(--ebps-line);
}
.ebps-cal-day.avail:hover {
  background: var(--ebps-accent-tint);
  border-color: #c7d4ec;
  color: var(--ebps-accent-2);
}
.ebps-cal-day.avail.sel {
  background: var(--ebps-accent);
  color: #ffffff;
  border-color: var(--ebps-accent);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.ebps-cal-day.unavail {
  background: transparent;
  color: #94a3b8; /* WCAG-AA on white */
  cursor: default;
  border-color: transparent;
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.6);
}
.ebps-cal-day:focus,
.ebps-cal-day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* ── Selected slot label ──────────────────────────────────────── */
.ebps-selected-slot {
  margin: 0 28px 6px;
  padding: 9px 14px;
  background: var(--ebps-accent-tint);
  border: 1px solid #dbe5fa;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ebps-accent-2);
}

/* ── Times grid ───────────────────────────────────────────────── */
#ebps-times-wrap {
  padding: 12px 28px 22px;
  flex: 1;
  overflow-y: auto;
}
#ebps-times-wrap::before {
  content: "Available times";
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ebps-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 10px;
}
#ebps-times-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* Time slot pills — selectors are scoped under #ebps-overlay so the
   theme-isolation reset (`#ebps-overlay button { background:transparent;
   border:0 }`) cannot win on specificity and erase the pill styling.
   Without this, slots rendered as plain text and were only visible on
   hover (browser default focus ring). See change report v2.1.2. */
#ebps-overlay .ebps-time-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 10px;
  border: 1px solid var(--ebps-line);
  border-radius: 8px;
  background: var(--ebps-surface);
  color: var(--ebps-ink);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
#ebps-overlay .ebps-time-btn:hover {
  background: var(--ebps-accent-tint);
  border-color: #c7d4ec;
  color: var(--ebps-accent-2);
}
#ebps-overlay .ebps-time-btn:focus,
#ebps-overlay .ebps-time-btn:focus-visible {
  outline: none;
  border-color: var(--ebps-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
#ebps-overlay .ebps-time-btn.sel,
#ebps-overlay .ebps-time-btn.sel:hover {
  background: var(--ebps-accent);
  color: #fff;
  border-color: var(--ebps-accent);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
#ebps-overlay .ebps-time-btn[disabled],
#ebps-overlay .ebps-time-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--ebps-line-soft);
  color: var(--ebps-ink-soft);
}

/* ── Information form ─────────────────────────────────────────── */
#ebps-info-form {
  padding: 20px 28px 24px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ebps-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ebps-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ebps-form-field.ebps-full {
  grid-column: 1 / -1;
}
#ebps-overlay .ebps-form-field > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ebps-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
#ebps-overlay .ebps-form-field > span em {
  color: var(--ebps-danger);
  font-style: normal;
  font-weight: 600;
}
#ebps-overlay .ebps-form-field input,
#ebps-overlay .ebps-form-field select,
#ebps-overlay .ebps-form-field textarea {
  border: 1px solid var(--ebps-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ebps-ink);
  background: var(--ebps-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
  width: 100%;
  line-height: 1.4;
}
#ebps-overlay .ebps-form-field input:focus,
#ebps-overlay .ebps-form-field select:focus,
#ebps-overlay .ebps-form-field textarea:focus {
  outline: none;
  border-color: var(--ebps-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
#ebps-overlay .ebps-form-field textarea { min-height: 80px; }
.ebps-check-field {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-size: 13px;
  color: var(--ebps-ink);
}
#ebps-overlay .ebps-check-field input { width: auto; }

/* ── Footer ───────────────────────────────────────────────────── */
#ebps-modal-footer {
  border-top: 1px solid var(--ebps-line);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  background: var(--ebps-surface);
}
#ebps-overlay #ebps-continue-btn {
  background: var(--ebps-accent);
  color: #fff;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
#ebps-overlay #ebps-continue-btn:hover:not(:disabled) {
  background: var(--ebps-accent-2);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
#ebps-overlay #ebps-continue-btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

/* ── Messages ─────────────────────────────────────────────────── */
.ebps-msg {
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 8px;
  flex: 1;
  max-width: fit-content;
  margin-right: auto;
}
.ebps-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.ebps-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
#ebps-form-error { margin-top: 4px; }

.ebps-loading, .ebps-empty, .ebps-hint {
  color: var(--ebps-mute);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

/* ── Success screen ───────────────────────────────────────────── */
.ebps-success-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 44px 32px 36px;
  text-align: center;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}
.ebps-success-icon {
  width: 64px;
  height: 64px;
  background: var(--ebps-success);
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.28);
}
#ebps-overlay .ebps-success-screen h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ebps-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
#ebps-overlay .ebps-success-screen p {
  color: var(--ebps-ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 460px;
}
#ebps-overlay .ebps-success-screen .ebps-success-lead { margin-bottom: 18px; }
#ebps-overlay .ebps-success-screen .ebps-success-lead b { color: var(--ebps-ink); font-weight: 600; }

.ebps-success-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  margin: 4px 0 18px;
  text-align: left;
  background: var(--ebps-line-soft);
  border-radius: 10px;
  overflow: hidden;
}
#ebps-overlay .ebps-success-table td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ebps-ink);
  border-bottom: 1px solid #e2e8f0;
}
#ebps-overlay .ebps-success-table tr:last-child td { border-bottom: 0; }
#ebps-overlay .ebps-success-table td:first-child {
  color: var(--ebps-ink-soft);
  width: 110px;
  font-weight: 500;
}
#ebps-overlay .ebps-success-table td:last-child { font-weight: 500; }

.ebps-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 16px;
}
#ebps-overlay .ebps-success-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  line-height: 1.2;
}
#ebps-overlay .ebps-success-btn-primary {
  background: var(--ebps-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
#ebps-overlay .ebps-success-btn-primary:hover { background: var(--ebps-accent-2); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); }
#ebps-overlay .ebps-success-btn-ghost {
  background: var(--ebps-line-soft);
  color: var(--ebps-ink);
  border: 1px solid var(--ebps-line);
}
#ebps-overlay .ebps-success-btn-ghost:hover { background: var(--ebps-line); }

#ebps-overlay .ebps-success-tip {
  font-size: 12px;
  color: var(--ebps-mute);
  margin: 4px 0 18px;
  max-width: 420px;
}
#ebps-overlay #ebps-book-another,
#ebps-overlay .ebps-success-close {
  background: var(--ebps-line-soft);
  border: 1px solid var(--ebps-line);
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ebps-ink-soft);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
#ebps-overlay #ebps-book-another:hover { background: var(--ebps-line); color: var(--ebps-ink); }
#ebps-overlay .ebps-success-brand {
  font-size: 11px;
  color: var(--ebps-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 18px 0 0;
  font-weight: 600;
}

/* ── Floating book button ─────────────────────────────────────── */
#ebps-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.32),
              0 2px 6px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}
#ebps-float-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.40),
              0 3px 10px rgba(15, 23, 42, 0.16);
}
#ebps-float-btn:active { transform: translateY(0); }
.ebps-btn-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ebps-btn-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
@keyframes ebpsFloatPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(37, 99, 235, 0.32),
                         0 0 0 0 rgba(37, 99, 235, 0.35); }
  50%      { box-shadow: 0 10px 28px rgba(37, 99, 235, 0.32),
                         0 0 0 12px rgba(37, 99, 235, 0); }
}
#ebps-float-btn { animation: ebpsFloatPulse 2.6s ease-in-out infinite; }

/* ── Inline shortcode button ──────────────────────────────────── */
.ebps-inline-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
.ebps-inline-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  #ebps-modal { max-width: 720px; }
  #ebps-sidebar { width: 220px; }
  #ebps-times-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  #ebps-overlay { padding: 0; align-items: stretch; }
  #ebps-modal { max-height: 100vh; height: 100vh; border-radius: 0; }
  #ebps-modal-body { flex-direction: column; }
  #ebps-sidebar {
    width: 100%;
    flex-direction: row;
    padding: 8px 6px;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ebps-step-item {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .ebps-step-item.active { border-bottom-color: var(--ebps-accent); }
  .ebps-step-icon { display: none; }
  .ebps-step-dot { display: none; }
  #ebps-overlay .ebps-step-label b { font-size: 12px; white-space: normal; }
  #ebps-overlay .ebps-step-label small { display: none; }
  #ebps-collapse-btn { display: none; }
  #ebps-content { margin: 12px; }
  #ebps-modal-header { padding: 16px 18px; }
  #ebps-overlay #ebps-modal-title { font-size: 16px; }
  #ebps-overlay #ebps-modal-sub { font-size: 12px; }
  .ebps-form-row { grid-template-columns: 1fr; }
  #ebps-times-grid { grid-template-columns: repeat(2, 1fr); }
  #ebps-modal-footer { padding: 12px 18px; }
  #ebps-float-btn { bottom: 16px; right: 16px; }
  #ebps-cal-wrap, .ebps-search-wrap, .ebps-panel-head,
  #ebps-times-wrap, #ebps-info-form { padding-left: 18px; padding-right: 18px; }
  .ebps-selected-slot { margin-left: 18px; margin-right: 18px; }
  #ebps-service-list { padding: 12px 14px 16px; }
  #ebps-overlay .ebps-panel-head h3 { font-size: 18px; }
}
@media (max-width: 420px) {
  .ebps-btn-label { font-size: 14px; }
  #ebps-float-btn { padding: 10px 16px 10px 10px; }
  .ebps-btn-icon { width: 28px; height: 28px; }
  #ebps-times-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
 * v2.2.2 — New custom field types (radio, checkbox group, heading, hidden)
 * ===================================================================== */
#ebps-overlay .ebps-cf-hidden { display: none; }

#ebps-overlay .ebps-cf-grouplabel {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3340;
    margin-bottom: 6px;
}
#ebps-overlay .ebps-cf-grouplabel em {
    color: #b91c1c;
    font-style: normal;
    font-weight: 700;
    margin-left: 2px;
}
#ebps-overlay .ebps-cf-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
#ebps-overlay .ebps-cf-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13.5px;
    transition: background .12s ease, border-color .12s ease;
    user-select: none;
}
#ebps-overlay .ebps-cf-opt:hover { background: #f9fafb; border-color: #b6bcc7; }
#ebps-overlay .ebps-cf-opt input { margin: 0; }
#ebps-overlay .ebps-cf-opt:has(input:checked) {
    background: #eef4ff;
    border-color: #6f8bd7;
    color: #1e3a8a;
}

#ebps-overlay .ebps-cf-heading {
    background: #f8fafc;
    border-left: 3px solid #1e3a8a;
    padding: 12px 14px;
    border-radius: 8px;
}
#ebps-overlay .ebps-cf-heading__title {
    margin: 0 0 4px;
    font-size: 14.5px;
    color: #0f172a;
}
#ebps-overlay .ebps-cf-heading__body {
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* ── 2.2.4 launcher hardening ───────────────────────────────────────
   2.2.3 had an over-aggressive rule that hid ALL `.ebps-inline-btn` and
   `#ebps-float-btn` whenever <body> carried `.ebps-modal-open`. That
   rule, combined with a watchPopupVisibility() bug, produced the empty
   white popup shell regression: the host popup mounted, body got the
   `.ebps-modal-open` marker, and every launcher (including the only
   real one) was hidden — leaving an empty white bar with a close X.

   2.2.4 only hides plugin-injected DUPLICATE intermediates that are
   explicitly tagged with `data-ebps-launcher="inline"` AND only after
   our overlay is actually open. Real user-placed launchers and the
   floating button are NEVER hidden by this rule — the wizard sits on
   top via z-index 2147483000, which is sufficient.
*/
body.ebps-modal-open [data-ebps-launcher="inline"] { display: none !important; }

/* If the shortcode landed inside a host popup wrapper, hide any inline
   launcher that lives INSIDE that wrapper so the user does not see a
   stacked launcher inside the host popup. Our own #ebps-overlay does
   NOT match `.elementor-popup-modal` / `.popup-content` / `.modal` /
   `.lightbox` selectors, so this is safe. The `[role="dialog"]` rule
   was removed in 2.2.4 because our own overlay carries that role and
   the rule could hide the wizard's own buttons inside it. */
.elementor-popup-modal .ebps-inline-btn,
.popup-content .ebps-inline-btn,
.modal .ebps-inline-btn,
.lightbox .ebps-inline-btn { display: none !important; }