/* PainWorx booking wizard and patient app stylesheet (website widget and /patient.html) */


/* ── Token definitions ──────────────────────────────────────────────────── */
:root, .pwx-wizard-wrap[data-theme="light"], .pwx-app[data-theme="light"] {
  color-scheme: light;
  --pwx-bg:        #f3f6fb;
  --pwx-card:      #ffffff;
  --pwx-hero:      #20293f;
  --pwx-fg:        #20293f;
  --pwx-sub:       #5f6b85;
  --pwx-muted:     #8a95ad;
  --pwx-accent:    #0086cd;
  --pwx-accent-dk: #0073aa;
  --pwx-accent-bg: #e3f1fa;
  --pwx-border:    #dbe3ee;
  --pwx-radius:    12px;
  --pwx-font:      'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:root[data-theme="dark"], .pwx-wizard-wrap[data-theme="dark"], .pwx-app[data-theme="dark"] {
  --pwx-bg:        #0f1522;
  --pwx-card:      #182036;
  --pwx-hero:      #0b1120;
  --pwx-fg:        #e5ebf5;
  --pwx-sub:       #9aa7c2;
  --pwx-muted:     #5f6b85;
  --pwx-accent:    #2ea8e8;
  --pwx-accent-dk: #0086cd;
  --pwx-accent-bg: #0f2a3b;
  --pwx-border:    #273152;
  color-scheme: dark;
}

/* ── Reset against the host website's theme styles ───────────────────── */
.pwx-wizard-wrap *, .pwx-wizard-wrap *::before, .pwx-wizard-wrap *::after { box-sizing: border-box; }
.pwx-wizard-wrap p, .pwx-wizard-wrap h1, .pwx-wizard-wrap h2, .pwx-wizard-wrap h3, .pwx-wizard-wrap h4,
.pwx-wizard-wrap ul, .pwx-wizard-wrap ol { margin: 0; padding: 0; text-indent: 0; line-height: 1.45; }
.pwx-wizard-wrap p:last-of-type { padding-bottom: 0; }
.pwx-wizard-wrap button, .pwx-wizard-wrap input, .pwx-wizard-wrap select, .pwx-wizard-wrap textarea { font-family: inherit; }
.pwx-wizard-wrap a { text-decoration: none; }
.pwx-wizard-wrap img { max-width: 100%; }
.pwx-sum-row > div:not(.pwx-sum-ico) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; }
.pwx-sum-row .pwx-sum-label, .pwx-sum-row .pwx-sum-val { margin: 0; padding: 0; }

/* ── Wizard wrapper ─────────────────────────────────────────────────────── */
.pwx-wizard-wrap,
.pwx-pwa-root {
  font-family: var(--pwx-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pwx-fg);
  background: var(--pwx-bg);
  box-sizing: border-box;
  min-height: 100%;
}

/* ── Hero header ────────────────────────────────────────────────────────── */
.pwx-hero {
  background: var(--pwx-hero);
  padding: 20px 24px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pwx-logo-icon {
  width: 38px; height: 38px;
  background: var(--pwx-accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 17px; color: #fff;
}
.pwx-hero-title {
  font-size: 17px; font-weight: 700;
  color: #fff; margin: 0 0 2px;
}
.pwx-hero-sub {
  font-size: 12px; color: rgba(255,255,255,.55);
}

/* ── Step indicators ────────────────────────────────────────────────────── */
.pwx-steps {
  display: flex; align-items: center;
  padding: 14px 24px; gap: 0;
  background: var(--pwx-card);
  border-bottom: 1px solid var(--pwx-border);
}
.pwx-step-item {
  display: flex; align-items: center; gap: 7px;
  flex: 1;
}
.pwx-step-item:last-child { flex: 0; }
.pwx-step-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--pwx-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--pwx-muted); background: var(--pwx-card);
  transition: all .2s;
}
.pwx-step-dot.done  { background: var(--pwx-accent-bg); border-color: var(--pwx-accent); color: var(--pwx-accent); }
.pwx-step-dot.active{ background: var(--pwx-accent);    border-color: var(--pwx-accent); color: #fff; }
.pwx-step-label     { font-size: 11px; color: var(--pwx-muted); white-space: nowrap; }
.pwx-step-label.active { color: var(--pwx-accent); font-weight: 600; }
.pwx-step-connector { flex: 1; height: 1px; background: var(--pwx-border); margin: 0 6px; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.pwx-panel        { display: none; padding: 20px 20px 28px; }
.pwx-panel.active, #pwx-panel-wrap > .pwx-panel { display: block; }

.pwx-panel-title {
  font-size: 16px; font-weight: 700;
  margin: 0 0 4px; color: var(--pwx-fg);
}
.pwx-panel-sub {
  font-size: 13px; color: var(--pwx-sub); margin: 0 0 18px;
}

/* ── Condition cards grid ───────────────────────────────────────────────── */
.pwx-cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.pwx-cond-card {
  background: var(--pwx-card);
  border: 2px solid var(--pwx-border);
  border-radius: var(--pwx-radius);
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  text-align: center;
}
.pwx-cond-card:hover {
  border-color: var(--pwx-accent);
  box-shadow: 0 2px 12px rgba(13,148,136,.12);
}
.pwx-cond-card.sel {
  border-color: var(--pwx-accent);
  background: var(--pwx-accent-bg);
}
.pwx-cond-icon {
  width: 44px; height: 44px;
  background: var(--pwx-accent-bg);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--pwx-accent);
  transition: color .16s, background .16s;
  margin: 0 auto 10px;
}
.pwx-cond-card:hover .pwx-cond-icon,
.pwx-cond-card.sel   .pwx-cond-icon {
  background: var(--pwx-accent); color: #fff;
}
.pwx-cond-name {
  font-size: 12px; font-weight: 600;
  line-height: 1.3; color: var(--pwx-fg);
}

/* ── Location + practitioner cards ─────────────────────────────────────── */
.pwx-loc-grid,
.pwx-prac-grid {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.pwx-loc-card,
.pwx-prac-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--pwx-card);
  border: 2px solid var(--pwx-border);
  border-radius: var(--pwx-radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pwx-loc-card:hover,  .pwx-prac-card:hover  { border-color: var(--pwx-accent); box-shadow: 0 2px 12px rgba(13,148,136,.1); }
.pwx-loc-card.sel,    .pwx-prac-card.sel    { border-color: var(--pwx-accent); background: var(--pwx-accent-bg); }

.pwx-loc-icon-wrap,
.pwx-prac-av {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--pwx-accent-bg); border: 2px solid var(--pwx-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--pwx-accent);
  transition: background .15s, border-color .15s, color .15s;
}
.pwx-loc-card:hover .pwx-loc-icon-wrap,
.pwx-loc-card.sel   .pwx-loc-icon-wrap,
.pwx-prac-card:hover .pwx-prac-av,
.pwx-prac-card.sel   .pwx-prac-av {
  background: var(--pwx-accent); border-color: var(--pwx-accent); color: #fff;
}

.pwx-loc-info,
.pwx-prac-info { flex: 1; min-width: 0; }
.pwx-loc-name,
.pwx-prac-name { font-size: 14px; font-weight: 600; color: var(--pwx-fg); }
.pwx-loc-meta,
.pwx-prac-title { font-size: 12px; color: var(--pwx-sub); display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* ── Summary ────────────────────────────────────────────────────────────── */
.pwx-summary-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--pwx-accent-bg); border-radius: var(--pwx-radius);
  padding: 16px; margin-bottom: 16px; color: var(--pwx-accent);
  font-weight: 700; font-size: 15px;
}
.pwx-sum-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pwx-sum-row  {
  display: flex; align-items: center; gap: 12px;
  background: var(--pwx-card); border: 1px solid var(--pwx-border);
  border-radius: 10px; padding: 12px 14px;
}
.pwx-sum-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--pwx-accent-bg); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--pwx-accent);
}
.pwx-sum-label { font-size: 11px; color: var(--pwx-muted); text-transform: uppercase; letter-spacing: .06em; }
.pwx-sum-val   { font-size: 14px; font-weight: 600; color: var(--pwx-fg); }

/* ── Info box ───────────────────────────────────────────────────────────── */
.pwx-info-box {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--pwx-accent-bg); border-radius: 10px;
  padding: 14px; margin-bottom: 20px;
  font-size: 13px; color: var(--pwx-sub); line-height: 1.5;
}
.pwx-info-box i { color: var(--pwx-accent); font-size: 16px; margin-top: 1px; flex-shrink: 0; }

/* ── CTA button ─────────────────────────────────────────────────────────── */
.pwx-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px;
  background: var(--pwx-accent); color: #fff;
  border: none; border-radius: var(--pwx-radius); cursor: pointer;
  font-size: 15px; font-weight: 700; font-family: var(--pwx-font);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  margin-bottom: 10px;
}
.pwx-cta-btn:hover { background: var(--pwx-accent-dk); box-shadow: 0 4px 16px rgba(13,148,136,.3); }

.pwx-popia-note {
  text-align: center; font-size: 11px;
  color: var(--pwx-muted); display: flex;
  align-items: center; justify-content: center; gap: 5px;
}

/* ── Nav row ────────────────────────────────────────────────────────────── */
.pwx-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
}
.pwx-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px; font-size: 14px;
  font-weight: 600; font-family: var(--pwx-font);
  cursor: pointer; border: none; transition: all .15s;
}
.pwx-nav-btn.back {
  background: var(--pwx-card); border: 1.5px solid var(--pwx-border); color: var(--pwx-fg);
}
.pwx-nav-btn.back:hover  { border-color: var(--pwx-accent); color: var(--pwx-accent); }
.pwx-nav-btn.next {
  background: var(--pwx-accent); color: #fff;
}
.pwx-nav-btn.next:hover  { background: var(--pwx-accent-dk); }
.pwx-nav-btn:disabled    { opacity: .4; cursor: default; }

/* ── Install prompt (PWA only) ──────────────────────────────────────────── */
.pwx-install-bar {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--pwx-hero); color: rgba(255,255,255,.9);
  font-size: 13px; gap: 10px;
}
.pwx-install-bar.visible { display: flex; }
.pwx-install-bar button {
  background: var(--pwx-accent); color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.pwx-install-dismiss {
  background: transparent !important; color: rgba(255,255,255,.5) !important;
  padding: 6px 10px !important;
}

/* ── Loading spinner ────────────────────────────────────────────────────── */
.pwx-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 60px 20px;
  color: var(--pwx-sub); font-size: 13px;
}
.pwx-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--pwx-border);
  border-top-color: var(--pwx-accent);
  animation: pwx-spin .8s linear infinite;
}
@keyframes pwx-spin { to { transform: rotate(360deg); } }

/* ── Error state ─────────────────────────────────────────────────────────── */
.pwx-error {
  text-align: center; padding: 40px 20px; color: var(--pwx-sub);
}
.pwx-error i { font-size: 32px; color: var(--pwx-border); margin-bottom: 12px; }

/* ── Calendar (Step 4) ──────────────────────────────────────────────────── */
.pwx-cal-wrap {
  background: var(--pwx-card);
  border: 1px solid var(--pwx-border);
  border-radius: var(--pwx-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.pwx-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--pwx-accent); color: #fff;
}
.pwx-cal-month-label {
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.pwx-cal-nav {
  background: transparent; border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
  transition: background .12s;
}
.pwx-cal-nav:hover   { background: rgba(255,255,255,.15); }
.pwx-cal-nav:disabled{ opacity: .35; cursor: default; }

.pwx-cal-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
}
.pwx-cal-day-head {
  font-size: 11px; font-weight: 700;
  text-align: center; padding: 8px 4px 6px;
  color: var(--pwx-muted); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--pwx-border);
}
.pwx-cal-cell {
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  cursor: pointer; position: relative;
  color: var(--pwx-fg);
  border-radius: 6px; margin: 2px;
  transition: background .12s, color .12s;
}
.pwx-cal-cell:hover:not(.dis):not(.sel) {
  background: var(--pwx-accent-bg); color: var(--pwx-accent);
}
.pwx-cal-cell.today:not(.sel) {
  color: var(--pwx-accent); font-weight: 700;
}
.pwx-cal-cell.today:not(.sel)::after {
  content: ''; position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--pwx-accent);
}
.pwx-cal-cell.sel {
  background: var(--pwx-accent); color: #fff; font-weight: 700;
}
.pwx-cal-cell.dis {
  color: var(--pwx-border); cursor: default; pointer-events: none;
}
.pwx-cal-empty { /* placeholder cells for days before month start */ }

/* ── Time slots (Step 4) ────────────────────────────────────────────────── */
.pwx-slots-hint {
  text-align: center; padding: 16px 8px;
  font-size: 13px; color: var(--pwx-muted);
}
.pwx-slots-hint i { margin-right: 6px; }

.pwx-slots-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 8px;
  font-size: 13px; color: var(--pwx-sub);
}
.pwx-slots-loading .pwx-spinner {
  width: 20px; height: 20px; border-width: 2px;
}

.pwx-slots-empty {
  text-align: center; padding: 16px 8px;
  font-size: 13px; color: var(--pwx-sub);
}
.pwx-slots-empty i { margin-right: 6px; color: var(--pwx-muted); }

.pwx-slots-wrap { padding-bottom: 4px; }
.pwx-slots-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pwx-muted);
  margin-bottom: 10px;
}
.pwx-slots-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pwx-slot-chip {
  padding: 8px 16px;
  border: 1.5px solid var(--pwx-border);
  border-radius: 8px; background: var(--pwx-card);
  font-size: 13px; font-weight: 600; color: var(--pwx-fg);
  cursor: pointer; font-family: var(--pwx-font);
  font-variant-numeric: tabular-nums;
  transition: border-color .12s, background .12s, color .12s;
}
.pwx-slot-chip:hover {
  border-color: var(--pwx-accent); color: var(--pwx-accent);
  background: var(--pwx-accent-bg);
}
.pwx-slot-chip.sel {
  border-color: var(--pwx-accent); background: var(--pwx-accent); color: #fff;
}

/* ── Client form (Step 5) ───────────────────────────────────────────────── */
.pwx-form-fields {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 20px;
}
.pwx-form-field {
  display: flex; flex-direction: column; gap: 5px;
}
.pwx-form-field label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--pwx-sub);
  display: block; line-height: 1.35;
}
.pwx-req { color: var(--pwx-accent); font-size: 13px; margin-left: 2px; }
.pwx-opt { color: var(--pwx-muted);  font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pwx-form-field input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  background: var(--pwx-card); color: var(--pwx-fg);
  border: 1.5px solid var(--pwx-border);
  border-radius: 9px; font-size: 14px; font-family: var(--pwx-font);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pwx-form-field input::placeholder { color: var(--pwx-muted); }
.pwx-form-field input:focus {
  border-color: var(--pwx-accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.pwx-form-field.err input {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}
.pwx-field-err {
  font-size: 12px; color: #e53e3e;
  display: flex; align-items: center; gap: 5px;
}
.pwx-field-err i { flex-shrink: 0; }

/* ── Booking submit error ────────────────────────────────────────────────── */
.pwx-booking-err {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(229,62,62,.08); border: 1px solid rgba(229,62,62,.25);
  border-radius: 9px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; color: #c53030; line-height: 1.4;
}
.pwx-booking-err i { flex-shrink: 0; margin-top: 1px; }

/* ── Button spinner (inline, inside .pwx-cta-btn) ───────────────────────── */
.pwx-btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: pwx-spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── Summary note ───────────────────────────────────────────────────────── */
.pwx-sum-note {
  font-size: 12px; color: var(--pwx-muted);
  display: flex; align-items: center; gap: 6px;
  background: var(--pwx-bg); border-radius: 8px;
  padding: 10px 12px; margin-top: 4px;
}
.pwx-sum-note i { color: var(--pwx-accent); flex-shrink: 0; }

/* ── Empty state (no treatments/locations/practitioners) ─────────────────── */
.pwx-empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--pwx-sub); font-size: 13px;
}
.pwx-empty-state i { font-size: 32px; color: var(--pwx-border); margin-bottom: 12px; display: block; }

/* ── Success screen ─────────────────────────────────────────────────────── */
.pwx-success-wrap {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 40px 24px 32px;
}
.pwx-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--pwx-accent-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--pwx-accent);
  margin-bottom: 18px;
}
.pwx-success-title {
  font-size: 22px; font-weight: 800;
  color: var(--pwx-fg); margin: 0 0 8px;
}
.pwx-success-sub {
  font-size: 14px; color: var(--pwx-sub);
  line-height: 1.6; margin: 0 0 24px;
  max-width: 320px;
}
.pwx-booking-ref {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pwx-accent-bg); border: 1px solid var(--pwx-accent);
  border-radius: 10px; padding: 10px 20px; margin-bottom: 28px;
  font-size: 13px; color: var(--pwx-accent);
}
.pwx-booking-ref strong {
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.pwx-success-rows {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 24px;
}
.pwx-success-note {
  font-size: 12px; color: var(--pwx-muted);
  background: var(--pwx-bg); border-radius: 8px;
  padding: 12px 14px; text-align: left; line-height: 1.5;
}

/* ── Dark-mode overrides for new components ─────────────────────────────── */
:root[data-theme="dark"] {
  --pwx-err-bg:   rgba(229,62,62,.12);
  --pwx-err-bdr:  rgba(229,62,62,.30);
  --pwx-err-text: #fc8181;
}
/* Default light values for error tokens */
:root {
  --pwx-err-bg:   rgba(229,62,62,.08);
  --pwx-err-bdr:  rgba(229,62,62,.25);
  --pwx-err-text: #c53030;
}
.pwx-booking-err {
  background: var(--pwx-err-bg);
  border-color: var(--pwx-err-bdr);
  color: var(--pwx-err-text);
}
.pwx-form-field.err input { border-color: var(--pwx-err-text); }
.pwx-field-err { color: var(--pwx-err-text); }

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pwx-steps { padding: 12px 12px; gap: 0; overflow-x: auto; }
  .pwx-step-label { display: none; }
  .pwx-step-label.active { display: inline; }
  .pwx-step-connector { min-width: 16px; }
  .pwx-cal-cell { font-size: 12px; height: 36px; margin: 1px; }
  .pwx-cal-day-head { padding: 6px 2px 5px; font-size: 10px; }
  .pwx-cal-header { padding: 8px 10px; }
  .pwx-cond-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 2: pre-consultation form, patient app, practitioner screens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --pwx-ok:      #15803d;
  --pwx-ok-bg:   #dcfce7;
  --pwx-warn:    #92400e;
  --pwx-warn-bg: #fef3c7;
  --pwx-off:     #6b7280;
  --pwx-off-bg:  #eceff1;
  --pwx-danger:  #b91c1c;
  --pwx-danger-bg: #fee2e2;
  --pwx-body-fill: #cfe7e4;
  --pwx-save:    #16a34a;
}
:root[data-theme="dark"] {
  --pwx-ok: #86efac; --pwx-ok-bg: #12301f;
  --pwx-warn: #fcd34d; --pwx-warn-bg: #3a2c0c;
  --pwx-off: #9aa8a6; --pwx-off-bg: #22302e;
  --pwx-danger: #fca5a5; --pwx-danger-bg: #3b1515;
  --pwx-body-fill: #1f3a37;
  --pwx-save: #22c55e;
}

/* ── Form shell ─────────────────────────────────────────────────────────── */
.pwx-as { padding: 16px 20px 28px; }
.pwx-as-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pwx-as-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pwx-sub); }
.pwx-as-badge { font-size: 12px; font-weight: 600; color: var(--pwx-muted); white-space: nowrap; }
.pwx-as-badge.saved { color: var(--pwx-ok); }
.pwx-as-badge.saving { color: var(--pwx-sub); }
.pwx-as-badge.error { color: var(--pwx-danger); }
.pwx-as-prog { height: 6px; background: var(--pwx-border); border-radius: 99px; overflow: hidden; margin: 12px 0 6px; }
.pwx-as-prog span { display: block; height: 100%; background: var(--pwx-accent); border-radius: 99px; transition: width .25s; }
.pwx-as-count { margin: 0 0 14px; font-size: 12px; color: var(--pwx-sub); }
.pwx-as-body { display: flex; flex-direction: column; gap: 14px; }
.pwx-as-sub { margin: 10px 0 2px; font-size: 14px; font-weight: 700; color: var(--pwx-fg); text-wrap: balance; }
.pwx-as-banner { padding: 10px 12px; border-radius: 10px; background: var(--pwx-accent-bg); color: var(--pwx-fg); font-size: 13px; }
.pwx-as-later { text-align: center; margin: 14px 0 0; }
.pwx-as-close, .pwx-as-retry { cursor: pointer; }

.pwx-flabel { display: block; font-size: 13px; font-weight: 600; color: var(--pwx-fg); margin-bottom: 6px; }
.pwx-hint { margin: 4px 0 0; font-size: 12px; color: var(--pwx-sub); }
.pwx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pwx-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 460px) { .pwx-row2, .pwx-row3 { grid-template-columns: 1fr; } }

.pwx-as textarea, .pwx-as select, .pwx-cl-body textarea, .pwx-cl-body select, .pwx-other,
.pwx-pin {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1.5px solid var(--pwx-border); border-radius: 10px;
  background: var(--pwx-card); color: var(--pwx-fg);
  font: inherit; font-size: 15px;
}
.pwx-as textarea, .pwx-cl-body textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.pwx-as textarea:focus, .pwx-as select:focus, .pwx-cl-body textarea:focus, .pwx-other:focus, .pwx-pin:focus {
  outline: none; border-color: var(--pwx-accent); box-shadow: 0 0 0 3px var(--pwx-accent-bg);
}
.pwx-other { margin-top: 8px; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.pwx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pwx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; min-height: 40px;
  border: 1.5px solid var(--pwx-border); border-radius: 99px;
  background: var(--pwx-card); color: var(--pwx-fg);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.pwx-chip:hover { border-color: var(--pwx-accent); }
.pwx-chip.sel { background: var(--pwx-accent); border-color: var(--pwx-accent); color: #fff; font-weight: 600; }
.pwx-chip-ghost { background: transparent; color: var(--pwx-sub); }

/* ── 0-10 scales ────────────────────────────────────────────────────────── */
.pwx-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.pwx-scale-wide { grid-template-columns: repeat(11, 1fr); }
.pwx-scale-btn {
  padding: 10px 0; min-height: 42px;
  border: 1.5px solid var(--pwx-border); border-radius: 8px;
  background: var(--pwx-card); color: var(--pwx-fg);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pwx-scale-btn.sel {
  background: hsl(var(--sh, 170) 60% 38%); border-color: hsl(var(--sh, 170) 60% 38%); color: #fff;
}
.pwx-scale-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--pwx-sub); }
@media (max-width: 380px) { .pwx-scale-btn { font-size: 12px; min-height: 38px; } }

/* ── Body diagram ───────────────────────────────────────────────────────── */
.pwx-bd { display: flex; gap: 8px; justify-content: center; }
.pwx-bd-svg { width: 48%; max-width: 210px; height: auto; touch-action: manipulation; }
.pwx-bd-svg .bd-r { fill: var(--pwx-body-fill); stroke: var(--pwx-border); stroke-width: 1; cursor: pointer; }
.pwx-bd-svg .bd-r.on { fill: #ef4444; fill-opacity: .55; stroke: #b91c1c; }
.pwx-bd-svg .bd-x line { stroke: #7f1d1d; stroke-width: 3; stroke-linecap: round; }
.pwx-bd-ro .pwx-bd-svg .bd-r { cursor: default; }
.pwx-bd-modes { margin-bottom: 8px; }

/* ── Checks and signature ───────────────────────────────────────────────── */
.pwx-check { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.pwx-check input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; accent-color: var(--pwx-accent); }
.pwx-sig { position: relative; border: 1.5px dashed var(--pwx-border); border-radius: 10px; background: #fff; }
.pwx-sig canvas { display: block; width: 100%; height: 170px; touch-action: none; }
.pwx-sig-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9ca3af; pointer-events: none; font-size: 14px; }
.pwx-sig-clear { margin-top: 6px; }

.pwx-link-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px;
  background: none; border: none; color: var(--pwx-accent); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.pwx-link-btn:hover { text-decoration: underline; }
.pwx-subbar { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 16px; line-height: 1.3; font-size: 13px; color: var(--pwx-sub); background: var(--pwx-card); border-bottom: 1px solid var(--pwx-border); }
.pwx-info-warn { padding: 10px 12px; border-radius: 10px; background: var(--pwx-warn-bg); color: var(--pwx-warn); font-size: 13px; }
.pwx-empty-compact { padding: 14px 0; text-align: left; }

/* ── Patient app ────────────────────────────────────────────────────────── */
.pwx-appt { background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); padding: 14px; margin-bottom: 12px; }
.pwx-appt.is-off { opacity: .65; }
.pwx-appt header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.pwx-appt-date { margin: 0; font-weight: 700; }
.pwx-appt-time { margin: 2px 0 0; font-size: 13px; color: var(--pwx-sub); }
.pwx-appt-line { margin: 4px 0; font-size: 14px; color: var(--pwx-sub); }
.pwx-appt-line i { width: 18px; color: var(--pwx-accent); }
.pwx-appt footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.pwx-appt-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; min-height: 42px;
  border: 1.5px solid var(--pwx-border); border-radius: 10px; background: var(--pwx-card);
  color: var(--pwx-fg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pwx-appt-btn.primary { background: var(--pwx-accent); border-color: var(--pwx-accent); color: #fff; }
.pwx-appt-formstate { font-size: 12px; font-weight: 600; }
.pwx-appt-formstate.pwx-warn { color: var(--pwx-warn); }
.pwx-appt-formstate.pwx-ok { color: var(--pwx-ok); }
.pwx-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pwx-pill-ok { background: var(--pwx-ok-bg); color: var(--pwx-ok); }
.pwx-pill-warn { background: var(--pwx-warn-bg); color: var(--pwx-warn); }
.pwx-pill-done { background: var(--pwx-accent-bg); color: var(--pwx-accent-dk); }
.pwx-pill-off { background: var(--pwx-off-bg); color: var(--pwx-off); }
.pwx-portal-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px 0 8px; }

.pwx-trend { background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); padding: 10px 10px 8px; }
.pwx-trend svg { width: 100%; height: auto; display: block; }
.pwx-trend .tr-grid { stroke: var(--pwx-border); stroke-width: 1; }
.pwx-trend .tr-ax { fill: var(--pwx-sub); font-size: 10px; font-family: var(--pwx-font); }
.pwx-trend .tr-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.pwx-trend .tr-line.avg, .pwx-trend .tr-dot.avg { stroke: var(--pwx-accent); }
.pwx-trend .tr-dot.avg { fill: var(--pwx-accent); }
.pwx-trend .tr-line.worst { stroke: #dc2626; stroke-dasharray: 5 4; }
.pwx-trend .tr-dot.worst { fill: #dc2626; stroke: #dc2626; }
.pwx-trend-key { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--pwx-sub); }
.pwx-trend-key .k-avg::before, .pwx-trend-key .k-worst::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--pwx-accent); }
.pwx-trend-key .k-worst::before { background: #dc2626; }

/* ── Practitioner screens ───────────────────────────────────────────────── */
.pwx-cl { min-height: 100%; background: var(--pwx-bg); color: var(--pwx-fg); font-family: var(--pwx-font); }
.pwx-cl-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--pwx-hero); color: #fff; }
.pwx-cl-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--pwx-accent); display: flex; align-items: center; justify-content: center; }
.pwx-cl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pwx-cl-title strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwx-cl-title span { font-size: 12px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwx-cl-icon { width: 40px; height: 40px; border: none; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 15px; }
.pwx-cl-datebar .pwx-cl-icon { background: var(--pwx-card); color: var(--pwx-fg); border: 1px solid var(--pwx-border); }
.pwx-cl-body { padding: 14px 16px 40px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pwx-cl-datebar { display: flex; align-items: center; gap: 10px; }
.pwx-cl-date { flex: 1; text-align: center; font-weight: 700; margin: 0; }
.pwx-cl-all { font-size: 13px; }
.pwx-cl-list { display: flex; flex-direction: column; gap: 8px; }
.pwx-cl-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px; background: var(--pwx-card); border: 1px solid var(--pwx-border);
  border-radius: var(--pwx-radius); color: var(--pwx-fg); font: inherit; cursor: pointer;
}
.pwx-cl-row.is-off { opacity: .6; }
.pwx-cl-time { min-width: 52px; font-weight: 700; color: var(--pwx-accent); font-variant-numeric: tabular-nums; }
.pwx-cl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pwx-cl-main small { color: var(--pwx-sub); overflow: hidden; text-overflow: ellipsis; }
.pwx-cl-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pwx-cl-card { background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); padding: 12px 14px; }
.pwx-cl-card p { margin: 3px 0; font-size: 14px; }
.pwx-cl-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pwx-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pwx-cancel-btn, #pwx-cancel-btn.armed { color: var(--pwx-danger); border-color: var(--pwx-danger); }
.pwx-cl-search { display: flex; gap: 8px; }
.pwx-cl-q { flex: 1; padding: 11px 12px; border: 1.5px solid var(--pwx-border); border-radius: 10px; background: var(--pwx-card); color: var(--pwx-fg); font: inherit; }
.pwx-cl-results { display: flex; flex-direction: column; gap: 8px; }
.pwx-cl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pwx-border); overflow-x: auto; }
.pwx-cl-tab, .pwx-cl-tabs button { flex: 1; padding: 11px 10px; background: none; border: none; border-bottom: 3px solid transparent; color: var(--pwx-sub); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pwx-cl-tabs button.sel { color: var(--pwx-accent); border-bottom-color: var(--pwx-accent); }

.pwx-pin-form-unused { max-width: 340px; margin: 12vh auto 0; padding: 24px 20px; background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
#pwx-pin { text-align: center; font-size: 22px; letter-spacing: .4em; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid var(--pwx-border); border-radius: 10px; background: var(--pwx-card); color: var(--pwx-fg); }
#pwx-pin:focus { outline: none; border-color: var(--pwx-accent); box-shadow: 0 0 0 3px var(--pwx-accent-bg); }

.pwx-flags { display: flex; flex-direction: column; gap: 6px; }
.pwx-flag { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.pwx-flag-danger { background: var(--pwx-danger-bg); color: var(--pwx-danger); }
.pwx-flag-info { background: var(--pwx-accent-bg); color: var(--pwx-fg); }

.pwx-ro { background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); padding: 12px 14px; }
.pwx-ro h3 { margin: 0 0 8px; font-size: 14px; }
.pwx-ro dl { margin: 0; }
.pwx-ro-row { padding: 6px 0; border-top: 1px solid var(--pwx-border); }
.pwx-ro-row:first-child { border-top: none; }
.pwx-ro-row dt { font-size: 12px; font-weight: 600; color: var(--pwx-sub); }
.pwx-ro-row dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.pwx-ro-text { margin: 4px 0; font-size: 14px; }
.pwx-ro-na { color: var(--pwx-muted); font-size: 13px; }
.pwx-ro-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.pwx-ro-scores > div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--pwx-sub); }
.pwx-ro-score { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 4px 8px; border-radius: 8px; font-weight: 700; font-size: 15px; color: #fff; background: hsl(var(--sh, 140) 60% 36%); }
.pwx-ro-wide { min-width: 52px; background: var(--pwx-accent); }
.pwx-ro-interf { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pwx-ro-interf li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.pwx-ro-sig { max-width: 100%; width: 260px; background: #fff; border: 1px solid var(--pwx-border); border-radius: 8px; }

.pwx-cl-savebar { position: sticky; top: 60px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); }
.pwx-note-badge, .pwx-cl-savebar .pwx-as-badge { font-size: 13px; }
.pwx-cl-savebar .pwx-nav-btn.next { background: var(--pwx-save); color: #fff; border-color: var(--pwx-save); }
.pwx-cl-savebar .pwx-nav-btn.next:hover { filter: brightness(.92); }
.pwx-dn4-total { padding: 10px 12px; border-radius: 10px; background: var(--pwx-accent-bg); font-size: 14px; }
.pwx-dn4-total small { display: block; color: var(--pwx-sub); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) { .pwx-as-prog span { transition: none; } }
#pwx-cancel-btn[data-armed] { color: var(--pwx-danger); border-color: var(--pwx-danger); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   Patient app shell (patient.js): header, content, bottom navigation
   ═══════════════════════════════════════════════════════════════════════════ */
.pwx-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--pwx-bg); color: var(--pwx-fg); font-family: var(--pwx-font); }
.pwx-topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: var(--pwx-hero); color: #fff;
}
.pwx-topbar-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--pwx-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.pwx-topbar-btn { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; flex-shrink: 0; }
.pwx-topbar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pwx-topbar-brand { font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.pwx-topbar-brand b { color: var(--pwx-accent); }
.pwx-topbar-title { font-size: 12px; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwx-notice { background: var(--pwx-accent-bg); color: var(--pwx-fg); padding: 10px 16px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--pwx-border); }
.pwx-content { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
.pwx-content > .pwx-panel, .pwx-content .pwx-panel.active { padding-left: 0; padding-right: 0; }
.pwx-content .pwx-portal { padding: 0; }
.pwx-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex;
  background: var(--pwx-card); border-top: 1px solid var(--pwx-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pwx-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 7px; color: var(--pwx-sub); text-decoration: none; font-size: 11px; font-weight: 600; }
.pwx-bottomnav a i { font-size: 19px; }
.pwx-bottomnav a.active { color: var(--pwx-accent); }
@media (min-width: 720px) { .pwx-bottomnav { max-width: 720px; margin: 0 auto; border-left: 1px solid var(--pwx-border); border-right: 1px solid var(--pwx-border); } }

.pwx-card { background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); padding: 16px; margin-bottom: 14px; }
.pwx-card .pwx-as-sub { margin-top: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwx-card a { color: var(--pwx-accent); }
.pwx-welcome { text-align: center; padding: 18px 8px 8px; }
.pwx-welcome-art { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; background: var(--pwx-accent-bg); color: var(--pwx-accent); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.pwx-welcome h1 { margin: 0 0 8px; font-size: 22px; text-wrap: balance; }
.pwx-welcome p { margin: 0 0 18px; color: var(--pwx-sub); font-size: 15px; }
.pwx-cta-secondary { background: var(--pwx-card); color: var(--pwx-accent); border: 1.5px solid var(--pwx-accent); }
.pwx-cta-secondary:hover { background: var(--pwx-accent-bg); box-shadow: none; }
.pwx-steps-list { margin: 0; padding-left: 20px; color: var(--pwx-sub); font-size: 14px; display: grid; gap: 8px; }
.pwx-steps-list b { color: var(--pwx-fg); }
.pwx-faq { margin: 0; padding-left: 18px; font-size: 14px; color: var(--pwx-sub); display: grid; gap: 8px; }
.pwx-faq b { color: var(--pwx-fg); }
.pwx-locs { display: grid; gap: 10px; margin-top: 10px; }
.pwx-loc { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--pwx-bg); font-size: 14px; }
.pwx-loc span { color: var(--pwx-sub); font-size: 13px; }
.pwx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pwx-actions .pwx-appt-btn { text-decoration: none; }
.pwx-appt-danger { color: #b91c1c; border-color: #fca5a5; }
.pwx-appt-hero h2 { margin: 6px 0 0; font-size: 22px; }
.pwx-appt-bigtime { margin: 2px 0 10px; font-size: 18px; font-weight: 700; color: var(--pwx-accent); }
.pwx-appt-open { cursor: pointer; }
.pwx-appt-open:hover .pwx-appt-date { color: var(--pwx-accent); }
.pwx-cta-btn.is-saved { background: #16a34a; }
.pwx-card a.pwx-cta-btn { color: #fff; }
.pwx-card a.pwx-cta-btn.pwx-cta-secondary { color: var(--pwx-accent); }
.pwx-card a.pwx-appt-btn { color: var(--pwx-fg); }
.pwx-card a.pwx-appt-btn.primary { color: #fff; }

/* ── Theme toggle (hero in the widget, header in the app) ─────────────── */
.pwx-theme-btn { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pwx-theme-btn:hover { background: rgba(255,255,255,.2); }
.pwx-hero { position: relative; }
.pwx-hero .pwx-theme-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.pwx-topbar .pwx-theme-btn { margin-left: 0; }
.pwx-wizard-wrap[data-theme="dark"] .pwx-sig, .pwx-app[data-theme="dark"] .pwx-sig { background: #fff; }

/* ── Logo (image with wordmark fallback) ─────────────────────────────────── */
.pwx-logo { display: inline-flex; align-items: center; min-width: 0; }
.pwx-logo .pwx-logo-img { height: 34px; width: auto; max-width: 180px; display: block; }
.pwx-logo .pwx-wordmark { display: none; font-weight: 800; font-size: 18px; letter-spacing: .02em; color: #fff; }
.pwx-logo .pwx-wordmark b { color: var(--pwx-accent); }
.pwx-logo.is-text .pwx-logo-img { display: none; }
.pwx-logo.is-text .pwx-wordmark { display: inline; }
.pwx-logo-hero { margin-right: 12px; }
.pwx-logo-hero .pwx-logo-img { height: 40px; }
.pwx-hero .pwx-hero-sub { font-size: 13px; }
.pwx-topbar .pwx-logo-top .pwx-logo-img { height: 28px; }
.pwx-topbar-text { gap: 2px; }
.pwx-subbar > span, .pwx-subbar .pwx-link-btn { display: inline-flex; align-items: center; margin: 0; line-height: 1.3; }
.pwx-subbar .pwx-link-btn { padding: 6px 4px; }
/* Website widget: fluid, slim header without logo */
.pwx-wizard-wrap[data-rest] { min-height: 0; width: 100%; max-width: 100%; }
.pwx-hero-slim { padding: 14px 20px; min-height: 0; }
.pwx-hero-slim .pwx-hero-title { font-size: 16px; font-weight: 700; margin: 0; }

/* ── Form step validation (pre-consultation form) ───────────────────────── */
.pwx-form-field.err textarea,
.pwx-form-field.err input[type="date"] { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,.12); }
.pwx-form-field.err > label, .pwx-form-field.err > .pwx-flabel { color: #e53e3e; }
.pwx-check.err { outline: 2px solid #e53e3e; outline-offset: 4px; border-radius: 6px; }
.pwx-check > span { flex: 1 1 0; min-width: 0; }
.pwx-check .pwx-field-err { flex-basis: 100%; margin-top: 4px; }
.pwx-sig.err { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,.12); }
.pwx-field-err { margin: 6px 0 0; }

/* ── Neatness pass (v3.5): spacing and alignment on the patient app ──────── */
.pwx-content { padding: 20px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }
.pwx-content > .pwx-card + .pwx-card, .pwx-content > .pwx-portal .pwx-card + .pwx-card { margin-top: 14px; }
.pwx-portal > .pwx-panel-title { font-size: 20px; margin: 2px 0 2px; }
.pwx-portal > .pwx-panel-sub { margin-bottom: 14px; }
.pwx-section-title, .pwx-portal h3 { margin: 18px 0 10px; }
/* Booking reference pill: the host reset zeroed its padding */
.pwx-wizard-wrap .pwx-booking-ref, .pwx-app .pwx-booking-ref { padding: 10px 20px; margin: 4px 0 22px; }
/* Form status next to the form button reads as a soft badge */
.pwx-appt footer { gap: 10px 12px; margin-top: 14px; }
.pwx-appt-formstate { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pwx-appt-formstate.pwx-warn { background: var(--pwx-warn-bg); }
.pwx-appt-formstate.pwx-ok { background: var(--pwx-ok-bg); }
/* Wizard panels: consistent inner padding and spacing between heading and content */
.pwx-panel-sub { margin-bottom: 14px; }
.pwx-nav { margin-top: 22px; }
.pwx-steps { padding: 14px 20px; }
/* Summary rows on the details step line up with the form fields beneath them */
.pwx-sum-row { padding: 12px 14px; }
.pwx-sum-label { margin-bottom: 2px; }
/* Pre-consultation form: breathing room between fields, heading clear of the top bar */
.pwx-as-body { display: flex; flex-direction: column; gap: 16px; }
.pwx-as-head { margin-top: 2px; }
.pwx-as-count { margin: 6px 0 16px; }
.pwx-row2 { gap: 14px; }
/* Bottom navigation: label sits slightly closer to its icon */
.pwx-bottomnav a { gap: 3px; padding-top: 8px; }

/* ── Week view for the date & time step (v3.6) ────────────────────────────
   Seven day columns with the free times listed under each day, like a
   timetable. On a narrow container the columns become a row of day tabs with
   the chosen day's times underneath. */
.pwx-wizard-wrap, .pwx-app { container-type: inline-size; }
.pwx-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.pwx-panel-head .pwx-panel-sub { margin-bottom: 0; }
.pwx-booking-for {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 13px; font-weight: 600; color: var(--pwx-fg);
  background: var(--pwx-accent-bg); border: 1px solid var(--pwx-border); border-radius: 99px; padding: 6px 12px 6px 10px;
}
.pwx-booking-for i { color: var(--pwx-accent); }
.pwx-change-link { font-weight: 600; color: var(--pwx-accent) !important; text-decoration: underline !important; font-size: 12px; }
.pwx-price-pill {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  background: var(--pwx-bg); border: 1px solid var(--pwx-border);
  font-size: 12px; font-weight: 700; color: var(--pwx-fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pwx-cond-card .pwx-price-pill { margin-top: 8px; }
.pwx-cond-card.sel .pwx-price-pill { background: var(--pwx-card); }

.pwx-week { border: 1px solid var(--pwx-border); border-radius: var(--pwx-radius); background: var(--pwx-card); overflow: hidden; }
.pwx-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--pwx-accent); color: #fff; }
.pwx-week-range { font-size: 14px; font-weight: 700; letter-spacing: .01em; text-align: center; }
.pwx-week-range i { margin-right: 6px; opacity: .85; }
.pwx-week-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px;
  background: rgba(255,255,255,.14); border: none; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.pwx-week-btn:hover:not(:disabled) { background: rgba(255,255,255,.26); }
.pwx-week-btn:disabled { opacity: .35; cursor: default; }

.pwx-week-grid { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pwx-week-col { border-right: 1px solid var(--pwx-border); min-width: 0; }
.pwx-week-col:last-child { border-right: none; }
.pwx-week-head { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--pwx-border); background: var(--pwx-bg); }
.pwx-week-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pwx-muted); }
.pwx-week-date { font-size: 13px; font-weight: 700; color: var(--pwx-fg); }
.pwx-week-col.today .pwx-week-dow, .pwx-week-col.today .pwx-week-date { color: var(--pwx-accent); }
.pwx-week-slots { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; min-height: 120px; }
.pwx-week-col.empty .pwx-week-slots { align-items: center; justify-content: center; }
.pwx-week-none { font-size: 11px; color: var(--pwx-muted); text-align: center; line-height: 1.3; }
.pwx-week-skel { display: block; height: 32px; border-radius: 6px; background: var(--pwx-bg); animation: pwx-skel 1.1s ease-in-out infinite; }
@keyframes pwx-skel { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.pwx-week-slots .pwx-slot-chip { width: 100%; padding: 8px 4px; font-size: 13px; }

.pwx-week-mobile { display: block; }
.pwx-day-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px 8px 0; }
.pwx-day-tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px 6px;
  border: 1.5px solid var(--pwx-border); border-radius: 8px; background: var(--pwx-card); color: var(--pwx-fg);
  font: inherit; cursor: pointer; min-width: 0;
}
.pwx-day-tab.empty { color: var(--pwx-muted); background: var(--pwx-bg); }
.pwx-day-tab.sel { border-color: var(--pwx-accent); background: var(--pwx-accent); color: #fff; }
.pwx-day-tab.sel .pwx-day-dow, .pwx-day-tab.sel .pwx-day-count { color: rgba(255,255,255,.85); }
.pwx-day-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pwx-muted); }
.pwx-day-num { font-size: 16px; font-weight: 700; line-height: 1.1; }
.pwx-day-count { font-size: 9px; font-weight: 600; color: var(--pwx-muted); white-space: nowrap; }
.pwx-day-list { padding: 12px 10px 14px; }
.pwx-day-list .pwx-slots-label { margin-bottom: 8px; }
.pwx-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.pwx-slot-chip { padding: 9px 6px; text-align: center; }
.pwx-slots-hint, .pwx-slots-empty, .pwx-slots-loading { padding: 14px 8px; }
.pwx-week-picked { margin: 12px 0 0; font-size: 14px; color: var(--pwx-fg); }
.pwx-week-picked i { color: var(--pwx-ok, #15803d); margin-right: 6px; }

@container (min-width: 620px) {
  .pwx-week-grid { display: grid; }
  .pwx-week-mobile { display: none; }
  .pwx-week-range { font-size: 15px; }
  .pwx-week-btn { font-size: 13px; padding: 0 12px; }
}
@media (max-width: 400px) {
  .pwx-day-count { display: none; }
  .pwx-day-tab { padding: 6px 1px 5px; }
}
@container (max-width: 619px) {
  .pwx-week-btn span { display: none; }
  .pwx-week-btn { width: 34px; padding: 0; justify-content: center; }
  .pwx-week-range { font-size: 13px; }
}
.pwx-cond-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--pwx-sub); }
.pwx-cond-meta:empty { display: none; }
.pwx-cond-meta i { margin-right: 3px; color: var(--pwx-accent); }
.pwx-cond-card .pwx-price-pill { margin-top: 0; }
.pwx-dur { font-weight: 600; color: var(--pwx-sub); }

/* ── Treatment cards without icons (v3.7.1): text only, left aligned ──────── */
.pwx-cond-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pwx-cond-card { text-align: left; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.pwx-cond-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background .15s; }
.pwx-cond-card.sel::before { background: var(--pwx-accent); }
.pwx-cond-card:focus-visible { outline: 2px solid var(--pwx-accent); outline-offset: 2px; }
.pwx-cond-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pwx-cond-desc { font-size: 12px; color: var(--pwx-sub); line-height: 1.35; margin: 0; }
.pwx-cond-meta { justify-content: flex-start; margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--pwx-sub); }
.pwx-cond-meta .pwx-price-pill { font-size: 12px; }
@media (max-width: 480px) { .pwx-cond-grid { grid-template-columns: 1fr; gap: 8px; } .pwx-cond-card { padding: 12px 14px 10px; } }

/* ── Website widget: one rounded card with a light border (v3.8) ─────────── */
.pwx-wizard-wrap[data-rest] {
  border: 1px solid var(--pwx-border); border-radius: 16px; overflow: hidden;
  background: var(--pwx-bg); box-shadow: 0 1px 2px rgba(32,41,63,.04), 0 6px 20px rgba(32,41,63,.06);
}
.pwx-wizard-wrap[data-rest] .pwx-hero { border-radius: 15px 15px 0 0; }
.pwx-wizard-wrap[data-rest] .pwx-steps { border-bottom: 1px solid var(--pwx-border); }
/* Inner panel sits as its own rounded card inside the frame */
.pwx-wizard-wrap[data-rest] #pwx-panel-wrap { padding: 16px; }
.pwx-wizard-wrap[data-rest] #pwx-panel-wrap > .pwx-panel { background: var(--pwx-card); border: 1px solid var(--pwx-border); border-radius: 12px; padding: 20px 20px 22px; }
@media (max-width: 480px) { .pwx-wizard-wrap[data-rest] #pwx-panel-wrap { padding: 10px; } .pwx-wizard-wrap[data-rest] #pwx-panel-wrap > .pwx-panel { padding: 16px 14px 18px; } }

/* "Not sure, or booked before?" group under the condition list */
.pwx-cond-other { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--pwx-border); }
.pwx-cond-other-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--pwx-sub); text-transform: uppercase; letter-spacing: .04em; }
.pwx-cond-grid-other { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pwx-cond-grid-other .pwx-cond-card { background: var(--pwx-bg); }
.pwx-cond-grid-other .pwx-cond-card.sel { background: var(--pwx-accent-bg); }
.pwx-cond-grid { margin-bottom: 0; }

/* ── Booking summary strip on the date step (v3.9.1) ─────────────────────── */
.pwx-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--pwx-bg); border: 1px solid var(--pwx-border); border-radius: 10px;
}
.pwx-fact { display: flex; flex-direction: column; gap: 1px; padding: 2px 18px 2px 0; margin-right: 18px; border-right: 1px solid var(--pwx-border); min-width: 0; }
.pwx-fact:last-of-type { border-right: none; margin-right: 0; }
.pwx-fact-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pwx-muted); }
.pwx-fact-v { font-size: 14px; font-weight: 700; color: var(--pwx-fg); white-space: nowrap; }
.pwx-fact-sub { font-weight: 600; color: var(--pwx-sub); font-size: 12px; margin-left: 4px; }
.pwx-fact-change { margin-left: auto; font-size: 12px; }
.pwx-panel-head { display: none; }
@container (max-width: 619px) {
  .pwx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 10px 12px; }
  .pwx-fact { padding: 0; margin: 0; border-right: none; }
  .pwx-fact-v { font-size: 13px; white-space: normal; }
  .pwx-fact-change { grid-column: 1 / -1; margin-left: 0; }
}

/* ── Booking summary without icons (v3.9.2): one bordered list, label | value ── */
.pwx-sum-rows { gap: 0; border: 1px solid var(--pwx-border); border-radius: 10px; overflow: hidden; background: var(--pwx-card); }
.pwx-sum-row { border: none; border-radius: 0; border-bottom: 1px solid var(--pwx-border); padding: 10px 14px; background: transparent; }
.pwx-sum-row:last-child { border-bottom: none; }
.pwx-sum-row > div:not(.pwx-sum-ico) { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.pwx-sum-row .pwx-sum-label { flex: 0 0 120px; font-size: 11px; }
.pwx-sum-row .pwx-sum-val { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pwx-sum-row .pwx-sum-note { background: none; padding: 0; margin: 0; font-weight: 400; }
@media (max-width: 480px) {
  .pwx-sum-row > div:not(.pwx-sum-ico) { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pwx-sum-row .pwx-sum-label { flex: none; }
}