/* ==========================================================================
   Campus Forms — Frontend Styles
   ========================================================================== */

/* ---------- Page Layout ---------- */

.cp-forms-page { max-width: 1000px; margin: 0 auto; padding: 20px; }
.cp-forms-page-header { margin-bottom: 24px; }
.cp-forms-page-header h1 { margin: 0 0 4px; font-size: 28px; font-weight: 700; color: #111827; }
.cp-forms-page-subtitle { color: #6b7280; font-size: 15px; margin: 0; }

.cp-forms-toolbar { margin-bottom: 20px; }
.cp-forms-search-form { display: flex; gap: 8px; max-width: 400px; }
.cp-forms-search-input { flex: 1; height: 40px; border: 1px solid #d1d5db; border-radius: 8px; padding: 0 14px; font-size: 14px; }
.cp-forms-search-input:focus { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

/* ---------- Forms Grid ---------- */

.cp-forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.cp-forms-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: all 0.2s; display: flex; flex-direction: column; border: 1px solid #e5e7eb; }
.cp-forms-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.cp-forms-card-closed { opacity: 0.6; }

.cp-forms-card-icon { margin-bottom: 12px; }
.cp-forms-card-icon .dashicons { font-size: 32px; width: 32px; height: 32px; color: #1e40af; background: #eff6ff; padding: 10px; border-radius: 10px; }

.cp-forms-card-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #111827; }
.cp-forms-card-desc { margin: 0 0 12px; color: #6b7280; font-size: 14px; line-height: 1.5; flex: 1; }
.cp-forms-card-meta { margin-bottom: 16px; font-size: 13px; color: #9ca3af; }

.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all 0.15s; }
.cp-btn-primary { background: #1e40af; color: #fff; }
.cp-btn-primary:hover { background: #1e3a8a; color: #fff; }
.cp-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.cp-btn-secondary:hover { background: #e5e7eb; }
.cp-btn-disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.cp-btn-sm { padding: 6px 12px; font-size: 13px; }
.cp-btn-danger { background: #dc2626; color: #fff; }
.cp-btn-danger:hover { background: #b91c1c; }

/* ---------- Empty States ---------- */

.cp-forms-empty-state, .cp-forms-not-found, .cp-forms-closed, .cp-forms-login-required, .cp-forms-limit-reached {
  text-align: center; padding: 60px 20px;
}
.cp-forms-empty-state .dashicons, .cp-forms-not-found .dashicons, .cp-forms-closed .dashicons, .cp-forms-login-required .dashicons, .cp-forms-limit-reached .dashicons {
  font-size: 48px; width: 48px; height: 48px; color: #d1d5db; margin-bottom: 16px; display: block;
}
.cp-forms-empty-state h2, .cp-forms-not-found h2, .cp-forms-closed h2, .cp-forms-login-required h2, .cp-forms-limit-reached h2 {
  margin: 0 0 8px; color: #374151;
}
.cp-forms-empty-state p, .cp-forms-not-found p, .cp-forms-closed p, .cp-forms-login-required p, .cp-forms-limit-reached p {
  color: #6b7280;
}

/* ---------- Pagination ---------- */

.cp-forms-pagination { text-align: center; margin-top: 24px; }
.cp-forms-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 8px; text-decoration: none; color: #374151; border: 1px solid #d1d5db; font-size: 14px; }
.cp-forms-pagination .page-numbers.current { background: #1e40af; color: #fff; border-color: #1e40af; }
.cp-forms-pagination .page-numbers:hover:not(.current) { background: #f3f4f6; }

/* ---------- Form Wrapper ---------- */

.cp-form-wrapper {
  --cp-form-bg: var(--form-bg, #ffffff);
  --cp-form-text: var(--form-text, #111827);
  --cp-form-muted: var(--form-muted, #6b7280);
  --cp-form-border: var(--form-border, #e5e7eb);
  --cp-form-radius: var(--form-radius, 12px);
  --cp-form-shadow: var(--form-shadow, 0 1px 3px rgba(0,0,0,0.08));
  --cp-form-accent: var(--form-accent, #1e40af);
  --cp-control-bg: var(--control-bg, #ffffff);
  --cp-control-border: var(--control-border, #d1d5db);
  --cp-control-radius: var(--control-radius, 8px);
  max-width: 720px;
  margin: 0 auto;
}
.cp-form-header { margin-bottom: 24px; height: auto; overflow: visible; }
.cp-form-body { }
.cp-form-title { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: var(--cp-form-text); }
.cp-form-description { color: var(--cp-form-muted); font-size: 15px; margin: 0; line-height: 1.6; }

.cp-form { background: var(--cp-form-bg); border-radius: var(--cp-form-radius); padding: 32px; box-shadow: var(--cp-form-shadow); border: 1px solid var(--cp-form-border); color: var(--cp-form-text); }

/* ---------- Form Fields ---------- */

.cp-form-fields { display: grid; grid-template-columns: repeat(var(--cp-grid-cols-desktop, 12), 1fr); gap: var(--cp-grid-gap, 20px); }

.cp-field { margin-bottom: 0; min-width: 0; }
.cp-field-full { grid-column: span 12; }
.cp-field-half { grid-column: span 6; }
.cp-field-third { grid-column: span 4; }
.cp-field-two-thirds { grid-column: span 8; }
.cp-field-quarter { grid-column: span 3; }
.cp-field-three-quarters { grid-column: span 9; }

.cp-field-label { display: block; font-size: 14px; font-weight: 600; color: var(--cp-form-text); margin-bottom: 6px; }
.cp-field-required { color: #ef4444; }
.cp-field-desc { font-size: 12px; color: var(--cp-form-muted); margin: 4px 0 0; }

.cp-input, .cp-select, .cp-textarea {
  width: 100%; height: 40px; border: 1px solid var(--cp-control-border); border-radius: var(--cp-control-radius); padding: 0 12px; font-size: 14px; color: var(--cp-form-text); background: var(--cp-control-bg); transition: all 0.15s;
}
.cp-input:focus, .cp-select:focus, .cp-textarea:focus {
  outline: none; border-color: var(--cp-form-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.cp-btn-primary { background: var(--cp-form-accent); }

/* ---------- Flexible Forms Semantic Surface + Depth Consumption ---------- */

.cp-form-wrapper.cp-form-flexible .cp-form {
  background: var(--cp-surface-1, var(--cp-form-bg));
  color: var(--cp-text-on-surface, var(--cp-form-text));
  border: 1px solid var(--cp-surface-border, var(--cp-form-border));
  box-shadow: var(--cp-depth-shell, var(--cp-form-shadow));
}

.cp-form-wrapper.cp-form-flexible .cp-form-title,
.cp-form-wrapper.cp-form-flexible .cp-field-label {
  color: var(--cp-text-on-surface, var(--cp-form-text));
}

.cp-form-wrapper.cp-form-flexible .cp-form-description,
.cp-form-wrapper.cp-form-flexible .cp-field-desc {
  color: var(--cp-text-on-surface-muted, var(--cp-form-muted));
}

.cp-form-wrapper.cp-form-flexible .cp-input,
.cp-form-wrapper.cp-form-flexible .cp-select,
.cp-form-wrapper.cp-form-flexible .cp-textarea {
  color: var(--cp-text-on-surface, var(--cp-form-text));
  background: var(--cp-control-bg, var(--cp-surface-1, #ffffff));
  border-color: var(--cp-control-border, var(--cp-surface-border, #d1d5db));
  box-shadow: var(--cp-depth-control, none);
}

.cp-form-wrapper.cp-form-flexible .cp-input:hover,
.cp-form-wrapper.cp-form-flexible .cp-select:hover,
.cp-form-wrapper.cp-form-flexible .cp-textarea:hover {
  border-color: var(--cp-state-hover, var(--cp-form-accent));
}

.cp-form-wrapper.cp-form-flexible .cp-input:active,
.cp-form-wrapper.cp-form-flexible .cp-select:active,
.cp-form-wrapper.cp-form-flexible .cp-textarea:active {
  border-color: var(--cp-state-active, var(--cp-form-accent));
}

.cp-form-wrapper.cp-form-flexible .cp-input:focus,
.cp-form-wrapper.cp-form-flexible .cp-select:focus,
.cp-form-wrapper.cp-form-flexible .cp-textarea:focus {
  border-color: var(--cp-state-focus, var(--cp-form-accent));
  box-shadow: 0 0 0 3px var(--cp-state-focus-ring, rgba(59,130,246,0.16)), var(--cp-depth-control, none);
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary {
  background: var(--cp-form-accent);
  color: var(--cp-text-on-accent, #ffffff);
  box-shadow: var(--cp-depth-cta, none);
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary:hover {
  background: color-mix(in srgb, var(--cp-form-accent) 90%, #000000);
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary:active {
  background: color-mix(in srgb, var(--cp-form-accent) 80%, #000000);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-form-accent) 40%, transparent);
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary:focus-visible {
  outline: 2px solid var(--cp-state-focus, var(--cp-form-accent));
  outline-offset: 2px;
}

.cp-form-wrapper.cp-form-flexible .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible .cp-textarea.is-invalid {
  border-color: var(--cp-state-error, #dc2626);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-state-error, #dc2626) 16%, transparent);
}

.cp-form-wrapper.cp-form-flexible .cp-field-required,
.cp-form-wrapper.cp-form-flexible .cp-field-error,
.cp-form-wrapper.cp-form-flexible .cp-file-error {
  color: var(--cp-state-error, #dc2626);
}

.cp-form-wrapper.cp-form-flexible .cp-file-error {
  background: var(--cp-state-error-bg, color-mix(in srgb, #dc2626 9%, #ffffff));
  border-color: color-mix(in srgb, var(--cp-state-error, #dc2626) 32%, var(--cp-surface-border, #e5e7eb));
}

.cp-form-wrapper.cp-form-flexible .cp-file-dropzone {
  border-color: var(--cp-surface-border, #d1d5db);
  background: var(--cp-surface-2, #fafbfc);
  box-shadow: var(--cp-depth-card, none);
}

.cp-form-wrapper.cp-form-flexible .cp-file-dropzone:hover {
  border-color: var(--cp-state-hover, #93c5fd);
  background: color-mix(in srgb, var(--cp-state-info-bg, #eff6ff) 75%, var(--cp-surface-2, #fafbfc));
}

.cp-form-wrapper.cp-form-flexible .cp-file-dropzone.is-drag-over {
  border-color: var(--cp-state-focus, var(--cp-form-accent));
  background: color-mix(in srgb, var(--cp-state-info-bg, #dbeafe) 78%, var(--cp-surface-2, #fafbfc));
}

.cp-form-wrapper.cp-form-flexible .cp-file-item {
  background: var(--cp-surface-2, #f9fafb);
  border-color: var(--cp-surface-border, #e5e7eb);
}

.cp-form-wrapper.cp-form-flexible .cp-file-item:hover {
  background: var(--cp-surface-3, #f3f4f6);
}

.cp-form-wrapper.cp-form-flexible .cp-input-prefix,
.cp-form-wrapper.cp-form-flexible .cp-input-suffix {
  background: var(--cp-surface-3, #f3f4f6);
  border-color: var(--cp-surface-border, #d1d5db);
  color: var(--cp-text-on-surface-muted, #374151);
}

.cp-form-wrapper.cp-form-flexible .cp-signature-canvas {
  border-color: var(--cp-surface-border, #d1d5db);
  background: var(--cp-surface-1, #ffffff);
  box-shadow: var(--cp-depth-control, none);
}

.cp-form-wrapper.cp-form-flexible .cp-sig-legal {
  background: var(--cp-state-warn-bg, #fef3c7);
  border-color: color-mix(in srgb, var(--cp-state-warn, #d97706) 32%, var(--cp-surface-border, #fcd34d));
  color: color-mix(in srgb, var(--cp-state-warn, #d97706) 74%, #111827);
}

.cp-form-wrapper.cp-form-flexible .cp-sig-tab.active {
  color: var(--cp-state-focus, var(--cp-form-accent));
  border-bottom-color: var(--cp-state-focus, var(--cp-form-accent));
}

@media (prefers-reduced-motion: reduce) {
  .cp-form-wrapper.cp-form-flexible .cp-input,
  .cp-form-wrapper.cp-form-flexible .cp-select,
  .cp-form-wrapper.cp-form-flexible .cp-textarea,
  .cp-form-wrapper.cp-form-flexible .cp-btn,
  .cp-form-wrapper.cp-form-flexible .cp-file-dropzone,
  .cp-form-wrapper.cp-form-flexible .cp-file-item,
  .cp-form-flexible .cp-form .cp-field,
  .cp-form-flexible .cp-form .cp-field-group,
  .cp-form-flexible .cp-disclosure-transition,
  .cp-form-flexible .cp-step-transition {
    transition: none;
  }
  .cp-form-flexible .cp-disclosure-enter,
  .cp-form-flexible .cp-disclosure-enter.cp-disclosure-enter-active,
  .cp-form-flexible .cp-disclosure-exit,
  .cp-form-flexible .cp-disclosure-exit.cp-disclosure-exit-active,
  .cp-form-flexible .cp-step-enter,
  .cp-form-flexible .cp-step-enter-active,
  .cp-form-flexible .cp-step-forward.cp-step-enter,
  .cp-form-flexible .cp-step-backward.cp-step-enter,
  .cp-form-flexible .cp-step-forward.cp-step-exit,
  .cp-form-flexible .cp-step-backward.cp-step-exit {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .cp-form-fields { grid-template-columns: repeat(var(--cp-grid-cols-tablet, 8), 1fr); }
}

/* Flexible forms: 12-col 1:1 with full layout_v2 placement until mobile stack */
.cp-form-flexible .cp-form-fields {
  --cp-form-row-height: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(var(--cp-form-row-height), auto);
  gap: var(--cp-grid-gap, 12px);
}
.cp-form-flexible {
  --cp-val-error: #dc2626;
  --cp-val-error-bg: #fef2f2;
  --cp-val-error-border: #fecaca;
  --cp-val-success: #047857;
  --cp-val-success-bg: #ecfdf5;
  --cp-val-success-border: #a7f3d0;
  --cp-val-disabled-bg: #f3f4f6;
  --cp-val-disabled-border: #e5e7eb;
  --cp-val-disabled-text: #6b7280;
}

/* Smart Focus Mode */
.cp-form-flexible .cp-form .cp-field {
  transition: opacity 0.2s ease, transform 0.24s ease, filter 0.24s ease;
}
.cp-form-flexible .cp-form .cp-field-group {
  transition: border-color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease, opacity 0.2s ease;
}
.cp-form-flexible .cp-form.cp-focus-mode-on .cp-field.cp-focus-sibling-dim {
  opacity: 0.52;
  filter: saturate(0.82);
}
.cp-form-flexible .cp-form.cp-focus-mode-on .cp-field.cp-focus-active,
.cp-form-flexible .cp-form.cp-focus-mode-on .cp-field.cp-focus-has-active {
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}
.cp-form-flexible .cp-form.cp-focus-mode-on .cp-field-group:not(.cp-focus-active-group) {
  opacity: 0.84;
}
.cp-form-flexible .cp-form.cp-focus-mode-on .cp-field-group.cp-focus-active-group {
  opacity: 1;
  border-color: color-mix(in srgb, var(--cp-form-accent, #3b82f6) 35%, #d1d5db);
  box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--cp-form-accent, #3b82f6) 52%, transparent);
  transform: translateY(-1px);
}

/* Progressive disclosure (conditional sections + steps) */
.cp-form-flexible .cp-disclosure-transition {
  overflow: hidden;
  transform-origin: top center;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, transform 0.3s ease;
  will-change: max-height, opacity, transform;
}
.cp-form-flexible .cp-disclosure-enter {
  max-height: 0;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
.cp-form-flexible .cp-disclosure-enter.cp-disclosure-enter-active {
  max-height: var(--cp-disclosure-max-h, 1200px);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.cp-form-flexible .cp-disclosure-exit {
  max-height: var(--cp-disclosure-max-h, 1200px);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.cp-form-flexible .cp-disclosure-exit.cp-disclosure-exit-active {
  max-height: 0;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  pointer-events: none;
}
.cp-form-flexible .cp-disclosure-hidden {
  display: none;
}

.cp-form-flexible .cp-step-transition {
  transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.cp-form-flexible .cp-step-enter {
  opacity: 0;
  pointer-events: none;
}
.cp-form-flexible .cp-step-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
.cp-form-flexible .cp-step-forward.cp-step-enter {
  transform: translate3d(20px, 0, 0);
}
.cp-form-flexible .cp-step-backward.cp-step-enter {
  transform: translate3d(-20px, 0, 0);
}
.cp-form-flexible .cp-step-forward.cp-step-exit {
  transform: translate3d(-12px, 0, 0);
}
.cp-form-flexible .cp-step-backward.cp-step-exit {
  transform: translate3d(12px, 0, 0);
}
.cp-form-flexible .cp-step-exit.cp-step-exit-active {
  opacity: 0;
}

/* Element compactness modes */
.cp-form-flexible.cp-compact-tight .cp-form-fields {
  --cp-form-row-height: 0px;
  gap: 0;
}
.cp-form-flexible.cp-compact-tight .cp-field { margin: 0; grid-row: auto !important; }
.cp-form-flexible.cp-compact-tight .cp-form-header { margin-bottom: 14px; }
.cp-form-flexible.cp-compact-tight .cp-form-title { margin: 0 0 4px; font-size: 24px; }
.cp-form-flexible.cp-compact-tight .cp-form-description { font-size: 14px; line-height: 1.4; }
.cp-form-flexible.cp-compact-tight .cp-form { padding: 20px; }
.cp-form-flexible.cp-compact-tight .cp-field-label { margin-bottom: 0; font-size: 12px; line-height: 1.15; }
.cp-form-flexible.cp-compact-tight .cp-field-desc { margin: 0; font-size: 10px; line-height: 1.15; }
.cp-form-flexible.cp-compact-tight .cp-input,
.cp-form-flexible.cp-compact-tight .cp-select { height: 30px; padding: 0 6px; font-size: 12px; }
.cp-form-flexible.cp-compact-tight .cp-textarea { min-height: 60px; padding: 4px 6px; font-size: 12px; }

.cp-form-flexible.cp-compact-normal .cp-form-fields {
  --cp-form-row-height: 20px;
  gap: var(--cp-grid-gap, 12px);
}

.cp-form-flexible.cp-compact-wide .cp-form-fields {
  --cp-form-row-height: 30px;
  gap: max(var(--cp-grid-gap, 20px), 20px);
}
.cp-form-flexible.cp-compact-wide .cp-field-label { margin-bottom: 8px; }
.cp-form-flexible.cp-compact-wide .cp-field-desc { margin-top: 6px; }
.cp-form-flexible.cp-compact-wide .cp-form { padding: 36px; }

/* Global label placement modes */
.cp-form-wrapper.cp-label-no-label .cp-field-label { display: none !important; }

.cp-form-wrapper.cp-label-bottom .cp-field {
  display: flex;
  flex-direction: column;
}
.cp-form-wrapper.cp-label-bottom .cp-field > .cp-field-label { order: 90; margin: 6px 0 0; }
.cp-form-wrapper.cp-label-bottom .cp-field > .cp-field-desc { order: 91; }
.cp-form-wrapper.cp-label-bottom .cp-field > .cp-field-error { order: 92; }
.cp-form-wrapper.cp-label-bottom .cp-field > :not(.cp-field-label):not(.cp-field-desc):not(.cp-field-error) { order: 10; }

.cp-form-wrapper.cp-label-left .cp-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-form-wrapper.cp-label-left .cp-field > .cp-field-label {
  order: 5;
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-form-wrapper.cp-label-left .cp-field > .cp-field-desc,
.cp-form-wrapper.cp-label-left .cp-field > .cp-field-error {
  flex: 0 0 100%;
}
.cp-form-wrapper.cp-label-left .cp-field > :not(.cp-field-label):not(.cp-field-desc):not(.cp-field-error) {
  order: 10;
  flex: 1 1 260px;
}

/* Inside label mode (applies only to eligible simple input fields). */
.cp-form-wrapper.cp-label-inside .cp-field.cp-label-inside-eligible > .cp-field-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Per-field label placement override (overrides form default for this field only). */
.cp-field.cp-label-placement-no-label > .cp-field-label { display: none !important; }
.cp-field.cp-label-placement-bottom {
  display: flex;
  flex-direction: column;
}
.cp-field.cp-label-placement-bottom > .cp-field-label { order: 90; margin: 6px 0 0; }
.cp-field.cp-label-placement-bottom > .cp-field-desc { order: 91; }
.cp-field.cp-label-placement-bottom > .cp-field-error { order: 92; }
.cp-field.cp-label-placement-bottom > :not(.cp-field-label):not(.cp-field-desc):not(.cp-field-error) { order: 10; }
.cp-field.cp-label-placement-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-field.cp-label-placement-left > .cp-field-label {
  order: 5;
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-field.cp-label-placement-left > .cp-field-desc,
.cp-field.cp-label-placement-left > .cp-field-error { flex: 0 0 100%; }
.cp-field.cp-label-placement-left > :not(.cp-field-label):not(.cp-field-desc):not(.cp-field-error) {
  order: 10;
  flex: 1 1 260px;
}
.cp-field.cp-label-placement-inside > .cp-field-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Vertically resized fields: control fills cell for real visual change */
.cp-form-flexible .cp-field[data-row-span] {
  display: flex;
  flex-direction: column;
}
.cp-form-flexible .cp-field[data-row-span] .cp-textarea {
  flex: 1;
  min-height: 80px;
}
.cp-form-flexible .cp-field[data-row-span] .cp-richtext-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 80px;
}
.cp-form-flexible .cp-field[data-row-span] .cp-richtext-editor {
  flex: 1;
  min-height: 80px;
}
.cp-form-flexible .cp-field[data-row-span] .cp-file-dropzone {
  flex: 1;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cp-form-flexible .cp-field[data-row-span] .cp-signature-field {
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}
.cp-form-flexible .cp-field[data-row-span] .cp-sig-panel {
  flex: 1;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
.cp-form-flexible .cp-field[data-row-span] .cp-signature-canvas {
  flex: 1;
  min-height: 100px;
  width: 100%;
}
.cp-form-flexible .cp-field[data-row-span].cp-field-type-address .cp-address-fields {
  flex: 1;
  min-height: 80px;
}

@media (max-width: 768px) {
  .cp-form-flexible .cp-form-fields { grid-template-columns: 1fr; }
  .cp-form-flexible .cp-field { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

@media (max-width: 640px) {
  .cp-form-fields { grid-template-columns: repeat(var(--cp-grid-cols-mobile, 4), 1fr); }
  .cp-field:not(.cp-field-no-mobile-stack)[data-stack-mobile="1"] { grid-column: 1 / -1 !important; }
}

.cp-review-page-row td,
.cp-review-page-label,
.cp-review-page-heading {
  font-weight: 700;
  color: #1f2937;
}
.cp-review-page-heading {
  margin: 12px 0 8px;
}
.cp-textarea { height: auto; padding: 10px 12px; min-height: 100px; resize: vertical; }
.cp-input.is-invalid, .cp-textarea.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }

/* ---------- Radio / Checkbox ---------- */

.cp-radio-group, .cp-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.cp-radio-label, .cp-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; cursor: pointer; padding: 6px 0; }
.cp-radio-label input, .cp-checkbox-label input { width: 18px; height: 18px; accent-color: #1e40af; }

/* ---------- File Upload ---------- */

.cp-file-upload { width: 100%; }
.cp-file-dropzone { border: 2px dashed #d1d5db; border-radius: 10px; padding: 28px 24px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; background: #fafbfc; }
.cp-file-dropzone:hover { border-color: #93c5fd; background: #eff6ff; }
.cp-file-dropzone.is-drag-over { border-color: #1e40af; background: #dbeafe; border-style: solid; }
.cp-file-dropzone .dashicons { font-size: 36px; width: 36px; height: 36px; color: #93c5fd; display: block; margin: 0 auto 8px; }
.cp-file-dropzone p { margin: 4px 0 0; color: #6b7280; font-size: 14px; }
.cp-file-browse-link { color: #3b82f6; cursor: pointer; font-weight: 500; text-decoration: underline; }
.cp-file-constraints { margin: 6px 0 0 !important; font-size: 12px !important; color: #9ca3af !important; }
.cp-file-input { display: none; }
.cp-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cp-file-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; transition: background 0.15s; }
.cp-file-item:hover { background: #f3f4f6; }
.cp-file-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; border: 1px solid #e5e7eb; }
.cp-file-icon { font-size: 20px !important; width: 20px !important; height: 20px !important; color: #6b7280; flex-shrink: 0; }
.cp-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; font-weight: 500; }
.cp-file-size { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.cp-file-remove { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 4px; transition: all 0.15s; }
.cp-file-remove:hover { color: #ef4444; background: #fef2f2; }
.cp-file-status { font-size: 13px; font-weight: 500; margin-top: 8px; }
.cp-file-error { color: #ef4444; font-size: 12px; margin-top: 4px; padding: 6px 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; }
.cp-file-display-list { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
  .cp-file-dropzone { padding: 20px 16px; }
  .cp-file-item { flex-wrap: wrap; }
  .cp-file-name { width: 100%; }
}

/* ---------- Signature ---------- */

.cp-signature-field { width: 100%; }
.cp-signature-canvas { border: 1px solid #d1d5db; border-radius: 8px; width: 100%; cursor: crosshair; touch-action: none; background: #fff; }

/* Signature legal disclaimer */
.cp-sig-legal { padding: 10px 14px; margin-bottom: 10px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; font-size: 13px; color: #92400e; line-height: 1.5; }

/* Signature mode tabs */
.cp-sig-tabs { display: flex; gap: 0; margin-bottom: 10px; border-bottom: 2px solid #e5e7eb; }
.cp-sig-tab { padding: 8px 18px; border: none; background: none; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.cp-sig-tab:hover { color: #374151; }
.cp-sig-tab.active { color: #1e40af; border-bottom-color: #1e40af; }

/* Signature canvas wrap */
.cp-sig-canvas-wrap { position: relative; }

/* Guide line */
.cp-sig-guideline { position: absolute; bottom: 24px; left: 20px; right: 20px; border-bottom: 1px dashed #d1d5db; pointer-events: none; }
.cp-sig-guideline span { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #9ca3af; white-space: nowrap; }

/* Signature actions */
.cp-sig-actions { margin-top: 6px; display: flex; gap: 6px; }
.cp-sig-actions .cp-btn-sm { padding: 4px 14px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 5px; background: #f9fafb; color: #374151; cursor: pointer; transition: background .15s; }
.cp-sig-actions .cp-btn-sm:hover { background: #f3f4f6; }

/* Type mode */
.cp-sig-type-input { width: 100%; height: 40px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 12px; font-size: 14px; margin-bottom: 8px; }
.cp-sig-font-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-sig-font-btn { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 18px; color: #111827; transition: all .15s; }
.cp-sig-font-btn.active { border-color: #1e40af; background: #eff6ff; }
.cp-sig-font-btn:hover { border-color: #93c5fd; }
.cp-sig-type-preview { border: 1px solid #d1d5db; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; }

/* Upload mode */
.cp-sig-upload-zone { border: 2px dashed #d1d5db; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.cp-sig-upload-zone:hover { border-color: #93c5fd; background: #f0f9ff; }
.cp-sig-upload-zone .dashicons { font-size: 28px; width: 28px; height: 28px; color: #93c5fd; }
.cp-sig-upload-zone p { margin: 6px 0 0; font-size: 13px; color: #6b7280; }
.cp-sig-upload-zone .cp-sig-upload-input { display: none; }
.cp-sig-upload-preview { margin-top: 8px; text-align: center; }
.cp-sig-upload-preview img { max-width: 100%; max-height: 150px; border: 1px solid #e5e7eb; border-radius: 6px; }

/* Printed name */
.cp-sig-printed-wrap { margin-top: 10px; }
.cp-sig-printed-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; }
.cp-sig-printed-input { width: 100%; max-width: 400px; height: 38px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 12px; font-size: 14px; }

/* Date/time stamp */
.cp-sig-timestamp { margin-top: 6px; font-size: 12px; color: #6b7280; }

@media (max-width: 480px) {
  .cp-sig-tabs { flex-wrap: wrap; }
  .cp-sig-tab { flex: 1; text-align: center; padding: 8px 12px; }
  .cp-sig-font-picker { gap: 4px; }
  .cp-sig-font-btn { padding: 4px 10px; font-size: 15px; }
}

/* ---------- Repeater ---------- */

.cp-repeater { width: 100%; }
.cp-repeater-rows { display: flex; flex-direction: column; gap: 10px; }
.cp-repeater-template { display: none; }

.cp-repeater-row { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }

.cp-repeater-row-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.cp-repeater-row-drag { cursor: grab; color: #9ca3af; font-size: 16px; width: 16px; height: 16px; }
.cp-repeater-row-drag:active { cursor: grabbing; }
.cp-repeater-row-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #374151; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.cp-repeater-row-label { font-size: 13px; font-weight: 500; color: #374151; }
.cp-repeater-row-spacer { flex: 1; }
.cp-repeater-collapse, .cp-repeater-dup, .cp-repeater-remove { border: none; background: none; color: #9ca3af; cursor: pointer; padding: 2px; font-size: 16px; line-height: 1; transition: color .15s; }
.cp-repeater-collapse:hover, .cp-repeater-dup:hover { color: #374151; }
.cp-repeater-remove:hover { color: #ef4444; }
.cp-repeater-remove.cp-btn-disabled { opacity: 0.4; pointer-events: none; }

.cp-repeater-row-body { padding: 12px; }
.cp-repeater-row-fields { display: flex; flex-wrap: wrap; gap: 10px; }

.cp-repeater-sf { min-width: 0; box-sizing: border-box; }
.cp-repeater-sf-label { display: block; font-size: 12px; font-weight: 500; color: #374151; margin-bottom: 3px; }
.cp-repeater-sf-input { width: 100%; height: 34px; border: 1px solid #d1d5db; border-radius: 5px; padding: 0 10px; font-size: 13px; box-sizing: border-box; }
select.cp-repeater-sf-input { padding: 0 8px; }
.cp-repeater-sf-check { display: flex; align-items: center; gap: 6px; font-size: 13px; height: 34px; cursor: pointer; }

.cp-repeater-add { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 600px) {
  .cp-repeater-sf { width: 100% !important; }
  .cp-repeater-row-header { flex-wrap: wrap; }
}

/* ---------- Heading / Paragraph ---------- */

.cp-field-heading { margin: 8px 0 4px; }
.cp-field-heading h2, .cp-field-heading h3, .cp-field-heading h4, .cp-field-heading h5 { margin: 0; font-weight: 700; color: inherit; }
.cp-field-heading h2 { font-size: 24px; }
.cp-field-heading h3 { font-size: 20px; }
.cp-field-heading h4 { font-size: 17px; }
.cp-field-heading h5 { font-size: 15px; }
.cp-field-heading--default { border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
.cp-field-heading--underlined { border-bottom: 2px solid #2563eb; padding-bottom: 8px; }
.cp-field-heading--accent-bar { border-left: 4px solid #2563eb; padding-left: 12px; }
.cp-field-heading--boxed { background: #f3f4f6; padding: 10px 14px; border-radius: 6px; }
.cp-field-heading--margin-none { margin-top: 0; margin-bottom: 0; }
.cp-field-heading--margin-small { margin-top: 4px; margin-bottom: 4px; }
.cp-field-heading--margin-medium { margin-top: 12px; margin-bottom: 8px; }
.cp-field-heading--margin-large { margin-top: 20px; margin-bottom: 12px; }
.cp-field-heading .dashicons { font-size: 20px; width: 20px; height: 20px; color: #2563eb; }
.cp-field-heading-desc { color: #6b7280; font-size: 14px; margin: 4px 0 0; }

.cp-field-paragraph { color: #374151; font-size: 15px; line-height: 1.7; }
.cp-field-paragraph .alignleft { text-align: left; }
.cp-field-paragraph .aligncenter { text-align: center; }
.cp-field-paragraph .alignright { text-align: right; }
.cp-field-paragraph .alignjustify { text-align: justify; }
.cp-field-paragraph .cp-rt-default { }
.cp-field-paragraph .cp-rt-callout { background: #eff6ff; border-left: 4px solid #2563eb; padding: 12px 16px; border-radius: 0 6px 6px 0; color: #1e40af; }
.cp-field-paragraph .cp-rt-muted { color: #9ca3af; font-style: italic; }
.cp-field-paragraph .cp-rt-highlighted { background: #fef9c3; padding: 10px 14px; border-radius: 6px; color: #92400e; }
.cp-field-paragraph .cp-rt-maxw-readable { max-width: 680px; }
.cp-field-paragraph .cp-rt-info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; color: #1e3a8a; }
.cp-field-paragraph .cp-rt-success-box { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 10px 12px; color: #065f46; }
.cp-field-paragraph .cp-rt-warning-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; color: #92400e; }
.cp-field-paragraph .cp-rt-danger-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 12px; color: #991b1b; }
.cp-field-paragraph .cp-rt-note-outline { border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px; background: #fff; }
.cp-field-paragraph .cp-rt-subtle-pill { background: #f3f4f6; border-radius: 999px; padding: 8px 14px; display: inline-block; }
.cp-field-paragraph .cp-rt-card-shadow { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.cp-field-paragraph .cp-rt-dashed-box { border: 2px dashed #9ca3af; border-radius: 8px; padding: 10px 12px; background: #f9fafb; }
.cp-field-paragraph .cp-rt-left-accent-indigo { border-left: 4px solid #4f46e5; padding-left: 12px; }
.cp-field-paragraph .cp-rt-left-accent-green { border-left: 4px solid #10b981; padding-left: 12px; }
.cp-field-paragraph .cp-rt-left-accent-amber { border-left: 4px solid #f59e0b; padding-left: 12px; }
.cp-field-paragraph .cp-rt-left-accent-red { border-left: 4px solid #ef4444; padding-left: 12px; }
.cp-field-paragraph .cp-rt-quote-elevated { font-style: italic; border-left: 3px solid #9ca3af; background: #f9fafb; padding: 10px 14px; border-radius: 0 8px 8px 0; }
.cp-field-paragraph .cp-rt-uppercase-lead { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.cp-field-paragraph .cp-rt-smallcaps-lead { font-variant: small-caps; letter-spacing: 0.04em; }
.cp-field-paragraph .cp-rt-compact-text { line-height: 1.35; }
.cp-field-paragraph .cp-rt-spacious-text { line-height: 2; }
.cp-field-paragraph .cp-rt-serif-text { font-family: Georgia, "Times New Roman", serif; }
.cp-field-paragraph .cp-rt-mono-text { font-family: Consolas, "Courier New", monospace; font-size: 0.95em; }
.cp-field-paragraph .cp-rt-center-narrow { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Full Name ---------- */

.cp-name-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-name-part { display: flex; flex-direction: column; flex: 1; min-width: 100px; }
.cp-name-prefix { flex: 0 0 100px; min-width: 100px; }
.cp-name-prefix select { height: 40px; }
.cp-name-middle-initial { flex: 0 0 65px; min-width: 65px; }
.cp-name-middle-full { flex: 1; min-width: 100px; }
.cp-name-suffix { flex: 0 0 90px; min-width: 90px; }
.cp-name-suffix select { height: 40px; }
.cp-name-preferred { flex: 1; min-width: 120px; }
.cp-name-maiden { flex: 1; min-width: 120px; }
.cp-name-credentials { flex: 0 0 140px; min-width: 140px; }
.cp-name-pronunciation { flex: 1; min-width: 120px; }
.cp-name-sublabel { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.cp-name-extra-row { margin-top: 6px; }
.cp-name-input[readonly] { background: #f3f4f6; cursor: not-allowed; }

/* ---------- Address ---------- */

.cp-address-fields { display: flex; flex-direction: column; gap: 10px; }
.cp-address-row { display: flex; gap: 10px; }
.cp-address-city-state input:first-child { flex: 2; }
.cp-address-city-state input:last-child { flex: 1; }
.cp-address-zcp-country input:first-child { flex: 1; }
.cp-address-zcp-country input:last-child { flex: 1; }

/* ---------- Currency (legacy compat; consolidated into Number) ---------- */

.cp-currency-wrap { display: flex; align-items: center; position: relative; }
.cp-currency-symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; font-weight: 600; font-size: 14px; z-index: 1; pointer-events: none; }
.cp-currency-input { padding-left: 28px !important; }
.cp-currency-input::-webkit-inner-spin-button, .cp-currency-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cp-currency-input { -moz-appearance: textfield; }

/* ---------- Date Range ---------- */

.cp-date-range { display: flex; align-items: flex-start; gap: 12px; }
.cp-date-range.cp-date-range-stacked { flex-direction: column; gap: 12px; }
.cp-date-range-part { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cp-date-range-input-wrap { display: flex; align-items: center; gap: 6px; }
.cp-date-range-input-wrap .cp-input { flex: 1; min-width: 0; }
.cp-date-range-sublabel { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.cp-date-range-separator { color: #9ca3af; font-size: 18px; font-weight: 600; margin-top: 8px; }
.cp-date-range-stacked .cp-date-range-separator { margin-top: 0; }
.cp-dr-today-btn { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #f9fafb; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.cp-dr-today-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.cp-dr-duration { margin-top: 6px; font-size: 13px; color: #6b7280; font-weight: 500; }
.cp-dr-duration-text { color: #1e40af; }
.cp-dr-themed { transition: border-color 0.2s; }
.cp-dr-preset-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 10px; border: 1px solid; }
.cp-dr-preset-badge .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }
.cp-dr-helper { margin-top: 6px; font-size: 12px; font-style: italic; opacity: 0.8; }

/* ---------- Date Range Calendar ---------- */

.cp-dr-cal {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  max-width: 340px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cp-dr-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cp-dr-cal-header button {
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
  padding: 0;
}
.cp-dr-cal-header button:hover { background: #f3f4f6; border-color: #d1d5db; }
.cp-dr-cal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dr-accent, #2563eb);
  user-select: none;
}
.cp-dr-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}
.cp-dr-cal-weekdays span {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}
.cp-dr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cp-dr-cal-day {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.1s;
  user-select: none;
  color: #374151;
  position: relative;
}
.cp-dr-cal-day:hover:not(.cp-dr-cal-disabled):not(.cp-dr-cal-outside):not(.cp-dr-cal-start):not(.cp-dr-cal-end) {
  background: #f3f4f6;
  transform: scale(1.08);
}
.cp-dr-cal-outside { visibility: hidden; pointer-events: none; }
.cp-dr-cal-disabled { color: #d1d5db; cursor: not-allowed; text-decoration: line-through; }
.cp-dr-cal-disabled:hover { background: transparent; transform: none; }
.cp-dr-cal-today { font-weight: 700; }
.cp-dr-cal-today::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dr-accent, #2563eb);
}
.cp-dr-cal-start,
.cp-dr-cal-end {
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.cp-dr-cal-in-range { border-radius: 4px; }
.cp-dr-cal-hover-range { border-radius: 4px; }
.cp-dr-cal-today-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  border: 1px solid;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cp-dr-cal-today-btn:hover { opacity: 0.85; }
.cp-dr-cal-selected {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
}
.cp-dr-cal-duration {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}

/* ---------- Yes / No Toggle — Buttons ---------- */

.cp-yn-buttons { display: flex; gap: 10px; }
.cp-yn-stacked { flex-direction: column; }
.cp-yn-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px;
  border: 2px solid color-mix(in srgb, var(--yn-color) 25%, transparent);
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;
  color: var(--yn-color); background: #fff; transition: all 0.15s; min-width: 80px;
  justify-content: center; user-select: none;
}
.cp-yn-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-yn-btn .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
.cp-yn-btn:hover { border-color: var(--yn-color); background: color-mix(in srgb, var(--yn-color) 6%, #fff); }
.cp-yn-btn.cp-yn-selected { background: color-mix(in srgb, var(--yn-color) 12%, #fff); border-color: var(--yn-color); box-shadow: 0 0 0 1px var(--yn-color); }

/* Sizes */
.cp-yn-sm .cp-yn-btn { padding: 6px 16px; font-size: 13px; min-width: 60px; }
.cp-yn-sm .cp-yn-btn .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }
.cp-yn-lg .cp-yn-btn { padding: 14px 36px; font-size: 16px; min-width: 100px; }
.cp-yn-lg .cp-yn-btn .dashicons { font-size: 20px; width: 20px; height: 20px; line-height: 20px; }

/* ---------- Yes / No Toggle — Toggle Switch ---------- */

.cp-yn-toggle { display: inline-flex; align-items: center; gap: 10px; }
.cp-yn-toggle-lbl { font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.2s; user-select: none; }
.cp-yn-toggle-track {
  width: 52px; height: 28px; border-radius: 14px; position: relative; cursor: pointer;
  transition: background 0.25s; flex-shrink: 0;
}
.cp-yn-toggle-knob {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; position: absolute;
  top: 3px; transition: left 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Sizes */
.cp-yn-sm .cp-yn-toggle-track { width: 42px; height: 22px; border-radius: 11px; }
.cp-yn-sm .cp-yn-toggle-knob { width: 16px; height: 16px; top: 3px; }
.cp-yn-sm.cp-yn-toggle .cp-yn-toggle-lbl { font-size: 13px; }
.cp-yn-sm .cp-yn-toggle-track.cp-yn-on .cp-yn-toggle-knob { left: 23px !important; }
.cp-yn-lg .cp-yn-toggle-track { width: 62px; height: 34px; border-radius: 17px; }
.cp-yn-lg .cp-yn-toggle-knob { width: 28px; height: 28px; top: 3px; }
.cp-yn-lg.cp-yn-toggle .cp-yn-toggle-lbl { font-size: 16px; }
.cp-yn-lg .cp-yn-toggle-track.cp-yn-on .cp-yn-toggle-knob { left: 31px !important; }

/* ---------- Yes / No Toggle — Pill ---------- */

.cp-yn-pill { display: inline-flex; border-radius: 8px; overflow: hidden; border: 2px solid #e5e7eb; }
.cp-yn-pill-half {
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 24px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
  background: #fff; color: #6b7280; user-select: none;
}
.cp-yn-pill-half .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
.cp-yn-pill-half:hover { background: #f3f4f6; }
.cp-yn-pill-half.cp-yn-active { color: #fff; }
.cp-yn-pill-half.cp-yn-active:hover { filter: brightness(1.05); }

/* Sizes */
.cp-yn-sm .cp-yn-pill-half { padding: 6px 16px; font-size: 13px; }
.cp-yn-sm .cp-yn-pill-half .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }
.cp-yn-lg .cp-yn-pill-half { padding: 14px 32px; font-size: 16px; }
.cp-yn-lg .cp-yn-pill-half .dashicons { font-size: 20px; width: 20px; height: 20px; line-height: 20px; }

/* ---------- Yes / No Badge (Submission Display) ---------- */

.cp-yn-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff;
}
.cp-yn-badge .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }

/* Legacy compat */
.cp-yesno-toggle { display: flex; gap: 12px; }
.cp-yesno-option { display: flex; align-items: center; cursor: pointer; }
.cp-yesno-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-yesno-label { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 2px solid #d1d5db; color: #6b7280; background: #fff; transition: all 0.15s; min-width: 80px; }
.cp-yesno-option input[type="radio"]:checked + .cp-yesno-yes { background: #d1fae5; color: #065f46; border-color: #34d399; }
.cp-yesno-option input[type="radio"]:checked + .cp-yesno-no { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.cp-yesno-label:hover { border-color: #93c5fd; }

/* ---------- Star Rating ---------- */

.cp-rating-field { display: flex; align-items: center; gap: 4px; position: relative; }
.cp-rating-star { cursor: pointer; transition: transform 0.15s; display: inline-flex; }
.cp-rating-star:hover { transform: scale(1.15); }
.cp-rating-star .dashicons { font-size: 24px; width: 24px; height: 24px; color: var(--rt-inactive, #d1d5db); transition: color 0.15s; }
.cp-rating-star.is-active .dashicons { color: var(--rt-active, #f59e0b); }
.cp-rating-text { font-size: 13px; color: #6b7280; margin-left: 8px; font-weight: 500; }

/* Size variants */
.cp-rt-small .cp-rating-star .dashicons,
.cp-rt-small .cp-rt-base,
.cp-rt-small .cp-rt-fill { font-size: 18px !important; width: 18px !important; height: 18px !important; }
.cp-rt-small .cp-rt-icon-wrap { width: 18px; height: 18px; }
.cp-rt-medium .cp-rating-star .dashicons,
.cp-rt-medium .cp-rt-base,
.cp-rt-medium .cp-rt-fill { font-size: 24px !important; width: 24px !important; height: 24px !important; }
.cp-rt-medium .cp-rt-icon-wrap { width: 24px; height: 24px; }
.cp-rt-large .cp-rating-star .dashicons,
.cp-rt-large .cp-rt-base,
.cp-rt-large .cp-rt-fill { font-size: 32px !important; width: 32px !important; height: 32px !important; }
.cp-rt-large .cp-rt-icon-wrap { width: 32px; height: 32px; }

/* Half-star wrapper */
.cp-rt-icon-wrap {
  position: relative; display: inline-flex; width: 24px; height: 24px; cursor: pointer;
  transition: transform 0.15s;
}
.cp-rt-icon-wrap:hover { transform: scale(1.15); }
.cp-rt-base {
  font-size: 24px; width: 24px; height: 24px; position: absolute; left: 0; top: 0;
  color: var(--rt-inactive, #d1d5db); transition: color 0.15s;
}
.cp-rt-fill {
  font-size: 24px; width: 24px; height: 24px; position: absolute; left: 0; top: 0;
  color: var(--rt-active, #f59e0b); transition: color 0.15s;
}
.cp-rt-half-fill { clip-path: inset(0 50% 0 0); }
.cp-rt-zone {
  position: absolute; top: 0; height: 100%; z-index: 2; cursor: pointer;
}
.cp-rt-zone-left { left: 0; width: 50%; }
.cp-rt-zone-right { right: 0; width: 50%; }

/* Hover tooltip */
.cp-rt-tooltip {
  position: absolute; top: -28px; left: 0; background: #1f2937; color: #fff;
  padding: 3px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap;
  pointer-events: none; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Submission display badge */
.cp-rt-badge { display: inline-flex; align-items: center; gap: 1px; }
.cp-rt-badge .dashicons { line-height: 14px; }

/* ---------- Likert Scale ---------- */

.cp-likert-wrap { overflow-x: auto; }
.cp-likert-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.cp-likert-table th, .cp-likert-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
.cp-likert-table th { color: #6b7280; font-weight: 600; background: #f9fafb; border-top: 1px solid #e5e7eb; }
.cp-likert-row-label { text-align: left !important; font-weight: 500; color: #374151; }
.cp-likert-cell input[type="radio"] { width: 18px; height: 18px; accent-color: var(--lk-accent, #1e40af); cursor: pointer; }
.cp-likert-table tbody tr:hover { background: #f9fafb; }

/* Likert: Score number row */
.cp-lk-score-num { font-size: 10px !important; color: #9ca3af !important; padding: 2px 4px !important; font-weight: 400 !important; background: transparent !important; border-top: none !important; }

/* Likert: Striped */
.cp-lk-striped .cp-likert-table tbody tr:nth-child(even) { background: #f9fafb; }

/* Likert: Compact */
.cp-lk-compact .cp-likert-table th, .cp-lk-compact .cp-likert-table td { padding: 6px 8px; font-size: 12px; }

/* Likert: Cards style */
.cp-lk-cards { display: flex; flex-direction: column; gap: 12px; }
.cp-lk-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; background: #fff; transition: border-color 0.15s; }
.cp-lk-card-stmt { font-weight: 600; color: #374151; margin-bottom: 12px; font-size: 14px; }
.cp-lk-card-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-lk-card-opt { display: inline-flex; align-items: center; padding: 8px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; transition: all 0.15s; background: #fff; }
.cp-lk-card-opt:hover { border-color: var(--lk-accent, #1e40af); color: var(--lk-accent, #1e40af); }
.cp-lk-card-opt input[type="radio"] { display: none; }
.cp-lk-card-opt.cp-lk-active { background: var(--lk-accent, #1e40af); color: #fff; border-color: var(--lk-accent, #1e40af); }
.cp-lk-compact .cp-lk-card { padding: 10px; }
.cp-lk-compact .cp-lk-card-opt { padding: 5px 10px; font-size: 12px; }
.cp-lk-compact .cp-lk-card-stmt { font-size: 13px; margin-bottom: 8px; }

/* Likert: Buttons style */
.cp-lk-buttons .cp-likert-cell { padding: 4px !important; }
.cp-lk-btn { display: inline-block; padding: 6px 12px; border: 2px solid #e5e7eb; border-radius: 6px; font-size: 12px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.15s; background: #fff; text-align: center; min-width: 50px; }
.cp-lk-btn:hover { border-color: var(--lk-accent, #1e40af); color: var(--lk-accent, #1e40af); }
.cp-lk-btn input[type="radio"] { display: none; }
.cp-lk-btn.cp-lk-active { background: var(--lk-accent, #1e40af); color: #fff; border-color: var(--lk-accent, #1e40af); }
.cp-lk-compact .cp-lk-btn { padding: 4px 8px; font-size: 11px; min-width: 40px; }

/* Likert: N/A column */
.cp-lk-cards .cp-lk-card-opt:last-child { border-style: dashed; }
.cp-lk-buttons td:last-child .cp-lk-btn { border-style: dashed; }

/* ---------- Policy Consent ---------- */

.cp-consent-field { --pc-accent: #1e40af; }
.cp-consent-text { line-height: 1.5; }
.cp-consent-link { color: var(--pc-accent, #1e40af); font-weight: 500; text-decoration: underline; }
.cp-consent-link:hover { opacity: 0.8; }
.cp-pc-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #374151; }
.cp-pc-label input[type="checkbox"] { accent-color: var(--pc-accent, #1e40af); cursor: pointer; }
.cp-pc-icon { color: var(--pc-accent, #1e40af); }

/* Policy Link: Outlined Button */
.cp-pc-link-btn { display: inline-block; padding: 6px 18px; border: 2px solid var(--pc-accent, #1e40af); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--pc-accent, #1e40af); text-decoration: none; transition: all 0.2s; }
.cp-pc-link-btn:hover { background: var(--pc-accent, #1e40af); color: #fff; }

/* Policy Link: Icon Button */
.cp-pc-link-icon-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 18px; border: 2px solid var(--pc-accent, #1e40af); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--pc-accent, #1e40af); text-decoration: none; transition: all 0.2s; }
.cp-pc-link-icon-btn .dashicons { font-size: 14px; width: 14px; height: 14px; }
.cp-pc-link-icon-btn:hover { background: var(--pc-accent, #1e40af); color: #fff; }

/* Style: Minimal */
.cp-pc-minimal { padding: 0; border: none; background: none; border-radius: 0; }
.cp-pc-minimal .cp-pc-label { font-size: 14px; }

/* Style: Card */
.cp-pc-card { border: 1px solid #e5e7eb; border-left: 4px solid var(--pc-accent, #1e40af); border-radius: 10px; padding: 20px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.cp-pc-card-content { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cp-pc-card-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--pc-accent, #1e40af) 10%, transparent); flex-shrink: 0; }
.cp-pc-card-icon .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--pc-accent, #1e40af); }
.cp-pc-card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: 48px; }

/* Style: Banner */
.cp-pc-banner { border: 1px solid color-mix(in srgb, var(--pc-accent, #1e40af) 20%, transparent); border-radius: 12px; padding: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--pc-accent, #1e40af) 5%, transparent), color-mix(in srgb, var(--pc-accent, #1e40af) 10%, transparent)); }
.cp-pc-banner-inner { display: flex; align-items: flex-start; gap: 18px; }
.cp-pc-banner-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pc-accent, #1e40af); color: #fff; flex-shrink: 0; }
.cp-pc-banner-icon .dashicons { font-size: 26px; width: 26px; height: 26px; }
.cp-pc-banner-body { flex: 1; }
.cp-pc-banner-text { font-size: 15px; font-weight: 600; color: #1f2937; line-height: 1.5; margin-bottom: 14px; }
.cp-pc-banner-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Style: Legal */
.cp-pc-legal { border: 2px solid #d1d5db; border-radius: 10px; overflow: hidden; padding: 0; background: none; }
.cp-pc-legal-header { padding: 12px 18px; background: #f3f4f6; border-bottom: 1px solid #d1d5db; display: flex; align-items: center; gap: 8px; }
.cp-pc-legal-header .cp-pc-icon { font-size: 16px; width: 16px; height: 16px; }
.cp-pc-legal-title { font-weight: 700; color: #374151; font-size: 15px; }
.cp-pc-legal-body { padding: 18px; font-size: 14px; color: #4b5563; line-height: 1.7; max-height: 140px; overflow-y: auto; background: #fffef5; }
.cp-pc-legal-footer { padding: 14px 18px; border-top: 1px solid #d1d5db; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f9fafb; }

/* Style: Highlighted */
.cp-pc-highlighted { border-left: 4px solid var(--pc-accent, #1e40af); background: color-mix(in srgb, var(--pc-accent, #1e40af) 5%, white); border-radius: 10px; padding: 18px 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.cp-pc-hl-content { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.cp-pc-hl-content .cp-pc-icon { font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.cp-pc-hl-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: 30px; }

/* Consent responsive */
@media (max-width: 600px) {
  .cp-pc-banner-inner { flex-direction: column; }
  .cp-pc-card-actions, .cp-pc-hl-actions { margin-left: 0; }
  .cp-pc-banner-actions, .cp-pc-legal-footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- Toggle Switch ---------- */

.cp-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cp-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cp-toggle { position: relative; display: inline-flex; align-items: center; border-radius: 9999px; background: #d1d5db; transition: background 0.25s; flex-shrink: 0; cursor: pointer; }
.cp-toggle-knob { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.25s; }
.cp-toggle-on-text, .cp-toggle-off-text { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; user-select: none; position: absolute; top: 50%; transform: translateY(-50%); }
.cp-toggle-on-text { left: 6px; color: #fff; opacity: 0; transition: opacity 0.2s; }
.cp-toggle-off-text { right: 6px; color: #6b7280; opacity: 1; transition: opacity 0.2s; }

.cp-toggle-small { width: 36px; height: 20px; }
.cp-toggle-small .cp-toggle-knob { width: 16px; height: 16px; top: 2px; left: 2px; transform: translateX(0); }
.cp-toggle-medium { width: 44px; height: 24px; }
.cp-toggle-medium .cp-toggle-knob { width: 20px; height: 20px; top: 2px; left: 2px; transform: translateX(0); }
.cp-toggle-large { width: 52px; height: 28px; }
.cp-toggle-large .cp-toggle-knob { width: 24px; height: 24px; top: 2px; left: 2px; transform: translateX(0); }

.cp-toggle-input:checked + .cp-toggle { background: #1e40af; }
.cp-toggle-input:checked + .cp-toggle-small .cp-toggle-knob { transform: translateX(16px); }
.cp-toggle-input:checked + .cp-toggle-medium .cp-toggle-knob { transform: translateX(20px); }
.cp-toggle-input:checked + .cp-toggle-large .cp-toggle-knob { transform: translateX(24px); }
.cp-toggle-input:checked + .cp-toggle .cp-toggle-on-text { opacity: 1; }
.cp-toggle-input:checked + .cp-toggle .cp-toggle-off-text { opacity: 0; }
.cp-toggle-input:focus-visible + .cp-toggle { box-shadow: 0 0 0 3px rgba(59,130,246,0.3); }
.cp-toggle-on { background: #1e40af; }
.cp-toggle-on .cp-toggle-knob { transform: translateX(20px); }
.cp-toggle-on.cp-toggle-small .cp-toggle-knob { transform: translateX(16px); }
.cp-toggle-on.cp-toggle-large .cp-toggle-knob { transform: translateX(24px); }
.cp-toggle-on .cp-toggle-on-text { opacity: 1; }
.cp-toggle-on .cp-toggle-off-text { opacity: 0; }

/* ---------- Checkbox Size Variants ---------- */

.cp-cb-size-small .cp-cb-text { font-size: 13px; }
.cp-cb-size-small input[type="checkbox"] { width: 16px; height: 16px; }
.cp-cb-size-medium .cp-cb-text { font-size: 14px; }
.cp-cb-size-medium input[type="checkbox"] { width: 18px; height: 18px; }
.cp-cb-size-large .cp-cb-text { font-size: 16px; }
.cp-cb-size-large input[type="checkbox"] { width: 22px; height: 22px; }

/* ---------- Confirmation Dialog ---------- */

.cp-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100000; }
.cp-confirm-dialog { background: #fff; border-radius: 12px; padding: 24px 28px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.15); text-align: center; }
.cp-confirm-dialog p { font-size: 15px; color: #374151; margin: 0 0 20px; line-height: 1.5; }
.cp-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.cp-confirm-cancel { padding: 8px 20px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.cp-confirm-cancel:hover { background: #f3f4f6; }
.cp-confirm-ok { padding: 8px 20px; border: none; border-radius: 6px; background: #1e40af; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.cp-confirm-ok:hover { background: #1e3a8a; }

/* ---------- Calculated ---------- */

.cp-calculated-field { --calc-accent: #1e40af; }
.cp-calc-display-value { transition: color 0.3s; }
.cp-calc-formula-hint { font-size: 12px; color: #9ca3af; font-style: italic; margin-top: 6px; }
.cp-calc-zone-label { display: none; padding: 2px 10px; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 600; margin-top: 6px; }

/* Calc: Inline */
.cp-calc-inline { padding: 0; }
.cp-calc-inline-value { font-size: 18px; font-weight: 700; color: #1f2937; }

/* Calc: Card */
.cp-calc-card { border: 1px solid #e5e7eb; border-left: 4px solid var(--calc-accent, #1e40af); border-radius: 10px; padding: 20px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.cp-calc-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cp-calc-card-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--calc-accent, #1e40af) 10%, transparent); }
.cp-calc-card-icon .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--calc-accent, #1e40af); }
.cp-calc-card-label { font-size: 14px; color: #6b7280; }
.cp-calc-card-value { font-size: 32px; font-weight: 700; color: #1f2937; text-align: center; margin-bottom: 6px; }

/* Calc: Badge */
.cp-calc-badge { display: inline-block; }
.cp-calc-badge-pill { display: inline-block; padding: 10px 24px; background: var(--calc-accent, #1e40af); color: #fff; border-radius: 24px; font-weight: 700; font-size: 20px; }

/* Calc: Progress */
.cp-calc-progress { padding: 0; }
.cp-calc-progress-track { background: #e5e7eb; border-radius: 12px; height: 28px; overflow: hidden; position: relative; }
.cp-calc-progress-fill { background: var(--calc-accent, #1e40af); height: 100%; width: 0%; border-radius: 12px; transition: width 0.4s ease; }
.cp-calc-progress-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 700; color: #374151; }

/* Calc: Highlight */
.cp-calc-highlight { border-left: 4px solid var(--calc-accent, #1e40af); background: color-mix(in srgb, var(--calc-accent, #1e40af) 5%, white); border-radius: 10px; padding: 18px 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.cp-calc-hl-content { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-calc-icon { font-size: 20px; width: 20px; height: 20px; color: var(--calc-accent, #1e40af); }
.cp-calc-hl-label { font-size: 13px; color: #6b7280; }
.cp-calc-hl-value { font-size: 28px; font-weight: 700; color: #1f2937; }

/* Calc responsive */
@media (max-width: 600px) {
  .cp-calc-card-value, .cp-calc-hl-value { font-size: 24px; }
  .cp-calc-badge-pill { font-size: 16px; padding: 8px 18px; }
}

/* ---------- Password Field ---------- */

.cp-pw-wrap { --pw-accent: #1e40af; }
.cp-pw-input-wrap { position: relative; }
.cp-pw-input-wrap .cp-input { padding-right: 42px; }
.cp-pw-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 38px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: color 0.15s; border-radius: 0 7px 7px 0; }
.cp-pw-toggle:hover { color: #374151; background: #f3f4f6; }
.cp-pw-toggle .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* Strength bar (minimal, card, inline_req) */
.cp-pw-bar-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cp-pw-bar { flex: 1; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.cp-pw-bar-fill { height: 100%; width: 0%; border-radius: 3px; transition: width 0.3s ease, background 0.3s ease; }
.cp-pw-strength-label { font-size: 12px; font-weight: 600; white-space: nowrap; transition: color 0.3s ease; }

/* Meter bar segments */
.cp-pw-meter-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cp-pw-segments { display: flex; gap: 4px; flex: 1; }
.cp-pw-segments span { flex: 1; height: 6px; background: #e5e7eb; border-radius: 3px; transition: background 0.3s ease; }

/* Requirements checklist */
.cp-pw-reqs { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; flex-direction: column; gap: 4px; }
.cp-pw-reqs li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9ca3af; transition: color 0.2s; }
.cp-pw-reqs li .dashicons { font-size: 14px; width: 14px; height: 14px; }
.cp-pw-reqs li.cp-pw-req--pass { color: #22c55e; }
.cp-pw-reqs li.cp-pw-req--pass .dashicons { color: #22c55e; }

/* Requirement pills (meter_bar style) */
.cp-pw-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-pw-pill { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; font-weight: 500; border-radius: 20px; background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb; transition: all 0.2s; }
.cp-pw-pill.cp-pw-pill--pass { background: color-mix(in srgb, var(--pw-accent) 10%, transparent); color: var(--pw-accent); border-color: var(--pw-accent); }

/* Confirm password */
.cp-pw-confirm-wrap { margin-top: 14px; }
.cp-pw-confirm-wrap .cp-field-label { font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 4px; display: block; }
.cp-pw-match { font-size: 12px; margin-top: 4px; display: none; }
.cp-pw-match .dashicons { font-size: 14px; width: 14px; height: 14px; vertical-align: middle; margin-right: 2px; }
.cp-pw-match.cp-pw-match--pass { color: #22c55e; }
.cp-pw-match.cp-pw-match--fail { color: #ef4444; }

/* Generate button */
.cp-pw-gen-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 16px; font-size: 13px; font-weight: 500; border: 1px solid var(--pw-accent); color: var(--pw-accent); background: transparent; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.cp-pw-gen-btn:hover { background: color-mix(in srgb, var(--pw-accent) 8%, transparent); }
.cp-pw-gen-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Card style */
.cp-pw-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }

/* Inline requirements style */
.cp-pw-inline_req { padding: 0; }

/* Meter bar style */
.cp-pw-meter_bar { padding: 0; }

/* Minimal style */
.cp-pw-minimal { padding: 0; }

/* Password responsive */
@media (max-width: 600px) {
  .cp-pw-pills { gap: 4px; }
  .cp-pw-pill { font-size: 11px; padding: 2px 8px; }
  .cp-pw-reqs li { font-size: 12px; }
  .cp-pw-card { padding: 14px; }
}

/* ---------- Color Picker ---------- */

/* Legacy compat */
.cp-color-field { display: flex; align-items: center; gap: 10px; }
.cp-color-input { width: 50px; height: 40px; padding: 2px; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; }
.cp-color-hex { font-size: 14px; color: #6b7280; font-family: monospace; }

/* ---------- Color Picker Field ---------- */

.cp-cp-wrap { position: relative; }
.cp-cp-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Swatch shapes */
.cp-cp-swatch { width: 40px; height: 40px; cursor: pointer; transition: box-shadow 0.15s; border: 2px solid #e5e7eb; flex-shrink: 0; }
.cp-cp-swatch:hover { box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.cp-cp-swatch--circle { border-radius: 50%; }
.cp-cp-swatch--square { border-radius: 4px; }
.cp-cp-swatch--rounded { border-radius: 10px; }

/* Swatch style */
.cp-cp-swatch-row { display: flex; align-items: center; gap: 10px; }
.cp-cp-text { width: 140px; height: 36px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 10px; font-family: monospace; font-size: 13px; color: #374151; }
.cp-cp-text:focus { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.cp-cp-display { font-family: monospace; font-size: 14px; color: #374151; }

/* Copy button */
.cp-cp-copy { background: none; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; cursor: pointer; color: #6b7280; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.cp-cp-copy:hover { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.cp-cp-copy .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Card style */
.cp-cp-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.cp-cp-card-inner { display: flex; align-items: center; gap: 16px; }
.cp-cp-card-info { display: flex; flex-direction: column; gap: 2px; }
.cp-cp-card-info .cp-cp-display-main { font-size: 16px; font-weight: 600; color: #1f2937; }
.cp-cp-card-info .cp-cp-display-alt { font-size: 12px; color: #6b7280; }
.cp-cp-card-info .cp-cp-alpha-label { font-size: 12px; color: #6b7280; }
.cp-cp-card .cp-cp-text { width: 100%; margin-top: 10px; }

/* Alpha row */
.cp-cp-alpha-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #6b7280; }
.cp-cp-alpha-row input[type="range"] { flex: 1; }
.cp-cp-alpha-val { font-weight: 600; width: 36px; text-align: right; }

/* Palette style */
.cp-cp-palette-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-cp-pal-swatch { width: 32px; height: 32px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; position: relative; }
.cp-cp-pal-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.cp-cp-pal-swatch.cp-cp-pal-selected { border-color: #1f2937; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f2937; }
.cp-cp-pal-swatch.cp-cp-pal-selected::after { content: "\2713"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.cp-cp-pal-custom { width: 32px; height: 32px; border-radius: 6px; cursor: pointer; border: 2px dashed #d1d5db; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: all 0.15s; }
.cp-cp-pal-custom:hover { border-color: #3b82f6; color: #3b82f6; }
.cp-cp-pal-custom .dashicons { font-size: 14px; width: 14px; height: 14px; }
.cp-cp-pal-info { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Full spectrum style */
.cp-cp-full { padding: 0; }
.cp-cp-spectrum { width: 100%; height: 160px; border-radius: 8px; position: relative; cursor: crosshair; border: 1px solid #e5e7eb; }
.cp-cp-hue-slider { width: 100%; margin-top: 8px; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 6px; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); outline: none; }
.cp-cp-hue-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #374151; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cp-cp-hue-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #374151; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cp-cp-full-info { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cp-cp-full-info .cp-cp-text { flex: 1; }

/* Color picker responsive */
@media (max-width: 600px) {
  .cp-cp-pal-swatch { width: 28px; height: 28px; }
  .cp-cp-card-inner { flex-wrap: wrap; }
  .cp-cp-spectrum { height: 120px; }
}

/* ---------- Range Slider ---------- */

.cp-slider-field { width: 100%; }
.cp-slider-input { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: #e5e7eb; border-radius: 4px; outline: none; cursor: pointer; }
.cp-slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #1e40af; border-radius: 50%; cursor: pointer; }
.cp-slider-input::-moz-range-thumb { width: 20px; height: 20px; background: #1e40af; border-radius: 50%; cursor: pointer; border: none; }
.cp-slider-info { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #9ca3af; }
.cp-slider-value { font-weight: 600; color: #1e40af; font-size: 14px; }

/* ---------- GDPR Consent ---------- */

.cp-gd-wrap { --gd-accent: #059669; }

/* Card style */
.cp-gd-card > .cp-gd-inner { border: 1px solid #e5e7eb; border-left: 4px solid var(--gd-accent); border-radius: 10px; padding: 16px 20px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* Banner style */
.cp-gd-banner > .cp-gd-inner { background: linear-gradient(135deg, color-mix(in srgb, var(--gd-accent) 5%, transparent), color-mix(in srgb, var(--gd-accent) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--gd-accent) 20%, transparent); border-radius: 12px; padding: 20px 24px; }

/* Legal style */
.cp-gd-legal > .cp-gd-inner { border: 2px solid #d1d5db; border-radius: 10px; overflow: hidden; }
.cp-gd-legal .cp-gd-header { padding: 10px 16px; background: #f3f4f6; border-bottom: 1px solid #d1d5db; }
.cp-gd-legal .cp-gd-items { padding: 12px 16px; max-height: 280px; overflow-y: auto; }
.cp-gd-legal .cp-gd-select-all { padding: 8px 16px; }
.cp-gd-legal .cp-gd-withdrawal { padding: 8px 16px; }

/* Highlighted style */
.cp-gd-highlighted > .cp-gd-inner { border-left: 4px solid var(--gd-accent); background: color-mix(in srgb, var(--gd-accent) 5%, transparent); border-radius: 10px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Header */
.cp-gd-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: #1f2937; }
.cp-gd-icon-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gd-accent); color: #fff; flex-shrink: 0; }
.cp-gd-icon-badge .dashicons { font-size: 20px; width: 20px; height: 20px; }

/* Select All row */
.cp-gd-select-all { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 8px; }
.cp-gd-select-all-label { font-size: 14px; font-weight: 600; color: #1f2937; }

/* Item rows */
.cp-gd-items { display: flex; flex-direction: column; }
.cp-gd-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.cp-gd-item + .cp-gd-item { border-top: 1px solid #f3f4f6; }
.cp-gd-item-content { flex: 1; min-width: 0; }
.cp-gd-item-label { font-size: 14px; font-weight: 500; color: #1f2937; }
.cp-gd-item-asterisk { color: var(--gd-accent); font-weight: 600; }
.cp-gd-item-desc { font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.4; }
.cp-gd-item-link { margin-top: 4px; }
.cp-gd-link-text { color: var(--gd-accent); font-size: 12px; text-decoration: underline; }
.cp-gd-link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 14px; border: 1px solid var(--gd-accent); border-radius: 16px; font-size: 12px; color: var(--gd-accent); text-decoration: none; transition: background 0.15s; }
.cp-gd-link-btn:hover { background: color-mix(in srgb, var(--gd-accent) 8%, transparent); }
.cp-gd-link-icon .dashicons { font-size: 12px; width: 12px; height: 12px; }

/* Toggle switch */
.cp-gd-toggle { position: relative; display: inline-block; width: 40px; height: 22px; background: #d1d5db; border-radius: 11px; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
.cp-gd-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.cp-gd-toggle-on { background: var(--gd-accent); }
.cp-gd-toggle-on .cp-gd-toggle-knob { transform: translateX(18px); }
.cp-toggle-small { width: 32px; height: 18px; }
.cp-toggle-small .cp-gd-toggle-knob { width: 14px; height: 14px; }
.cp-toggle-small.cp-gd-toggle-on .cp-gd-toggle-knob { transform: translateX(14px); }
.cp-toggle-large { width: 48px; height: 26px; }
.cp-toggle-large .cp-gd-toggle-knob { width: 22px; height: 22px; }
.cp-toggle-large.cp-gd-toggle-on .cp-gd-toggle-knob { transform: translateX(22px); }

/* Withdrawal notice */
.cp-gd-withdrawal { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #9ca3af; font-style: italic; display: flex; align-items: flex-start; gap: 4px; }
.cp-gd-withdrawal .dashicons { font-size: 13px; width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

/* Checkbox sizing */
.cp-gd-item-cb, .cp-gd-cb-all { cursor: pointer; flex-shrink: 0; margin-top: 2px; }

@media (max-width: 480px) {
  .cp-gd-card > .cp-gd-inner,
  .cp-gd-banner > .cp-gd-inner,
  .cp-gd-highlighted > .cp-gd-inner { padding: 12px 14px; }
  .cp-gd-item-label { font-size: 13px; }
  .cp-gd-item-desc { font-size: 11px; }
  .cp-gd-header { font-size: 14px; }
}

/* ---------- Enterprise Range Slider ---------- */

.cp-rs-wrap { --rs-accent: #1e40af; position: relative; padding: 8px 0; }

/* Track */
.cp-rs-track { position: relative; height: 8px; background: #e5e7eb; border-radius: 4px; margin: 10px 0; }

/* Fill bar */
.cp-rs-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--rs-accent); border-radius: 4px; pointer-events: none; transition: width 0.05s, left 0.05s; }
.cp-rs-fill--gradient { background: linear-gradient(to right, rgba(255,255,255,0.3), var(--rs-accent)); }

/* Native range inputs */
.cp-rs-input { position: absolute; top: 50%; left: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; transform: translateY(-50%); height: 8px; z-index: 2; }
.cp-rs-input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--rs-accent); border: 3px solid #fff; border-radius: 50%; cursor: pointer; pointer-events: all; box-shadow: 0 1px 4px rgba(0,0,0,0.18); transition: transform 0.15s; }
.cp-rs-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cp-rs-input::-moz-range-thumb { width: 22px; height: 22px; background: var(--rs-accent); border: 3px solid #fff; border-radius: 50%; cursor: pointer; pointer-events: all; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.cp-rs-input::-moz-range-track { background: transparent; }

/* Tooltip badge */
.cp-rs-tooltcp-row { position: relative; height: 30px; margin-bottom: 2px; }
.cp-rs-badge { position: absolute; transform: translateX(-50%); background: var(--rs-accent); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; transition: left 0.05s; }
.cp-rs-badge::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--rs-accent); }

/* Info row */
.cp-rs-info { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; color: #9ca3af; }
.cp-rs-val { font-weight: 600; color: var(--rs-accent); font-size: 14px; }

/* Gradient style — larger thumb */
.cp-rs-gradient .cp-rs-input::-webkit-slider-thumb { width: 26px; height: 26px; box-shadow: 0 2px 8px rgba(0,0,0,0.22); }
.cp-rs-gradient .cp-rs-input::-moz-range-thumb { width: 26px; height: 26px; box-shadow: 0 2px 8px rgba(0,0,0,0.22); }

/* Ticks */
.cp-rs-ticks { position: relative; height: 28px; margin-top: 2px; }
.cp-rs-tick { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.cp-rs-tick-mark { display: block; width: 2px; height: 8px; background: #d1d5db; border-radius: 1px; }
.cp-rs-tick-label { font-size: 10px; color: #6b7280; margin-top: 2px; white-space: nowrap; }

/* Dual handle — ensure both inputs layered */
.cp-rs-wrap[data-dual="1"] .cp-rs-low { z-index: 3; }
.cp-rs-wrap[data-dual="1"] .cp-rs-high { z-index: 4; }

@media (max-width: 480px) {
  .cp-rs-badge { font-size: 10px; padding: 2px 5px; }
  .cp-rs-info { font-size: 11px; }
  .cp-rs-tick-label { font-size: 9px; }
}

/* ---------- Manager Lookup ---------- */

.cp-manager-lookup .cp-input,
.cp-manager-lookup .cp-ml-readonly { background: #f9fafb; cursor: default; }

.cp-manager-lookup--compact_card .cp-ml-card,
.cp-manager-lookup--minimal .cp-ml-minimal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.cp-manager-lookup--compact_card .cp-ml-card { flex-wrap: wrap; }
.cp-manager-lookup--minimal .cp-ml-minimal { flex-wrap: nowrap; }

.cp-ml-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-ml-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-ml-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ml-accent, #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.cp-ml-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-ml-name { font-weight: 600; color: #111827; font-size: 15px; }
.cp-ml-info .cp-ml-name { text-decoration: none; }
.cp-ml-info a.cp-ml-name:hover { color: var(--ml-accent, #6366f1); }
.cp-ml-title { font-size: 13px; color: #6b7280; }
.cp-ml-email, .cp-ml-phone { font-size: 12px; color: #6b7280; }
.cp-ml-email { color: var(--ml-accent, #6366f1); text-decoration: none; }
.cp-ml-email:hover { text-decoration: underline; }

.cp-manager-lookup--minimal .cp-ml-name { font-size: 14px; }

.cp-manager-lookup--override .cp-ml-override-msg { margin: 0 0 12px; color: #6b7280; font-size: 14px; }
.cp-manager-lookup--empty .cp-ml-empty-msg { margin: 8px 0 0; color: #6b7280; font-size: 13px; }

/* ---------- Current User ---------- */

.cp-current-user-field { background: #f9fafb; cursor: default; }
.cp-current-user-card {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-current-user-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cp-current-user-key {
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
  flex: 0 0 auto;
}
.cp-current-user-value {
  font-size: 13px;
  line-height: 1.4;
  color: #111827;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.cp-current-user-compact {
  margin: 0;
  padding: 8px 12px 8px 24px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 10px;
  color: #374151;
  font-size: 13px;
}
.cp-current-user-compact li { margin: 2px 0; }
.cp-current-user-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-current-user-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
}
.cp-current-user-table {
  width: 100%;
  border-collapse: collapse;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.cp-current-user-table td { border-bottom: 1px solid #e5e7eb; padding: 7px 10px; }
.cp-current-user-table tr:last-child td { border-bottom: 0; }
.cp-current-user-note {
  padding: 10px 12px;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 13px;
}

/* ---------- Page Break / Multi-Page ---------- */

.cp-form-pages {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.cp-form-page {
  display: grid;
  grid-template-columns: repeat(var(--cp-grid-cols-desktop, 12), 1fr);
  gap: var(--cp-grid-gap, 20px);
  align-content: start;
  width: 100%;
  min-width: 0;
}
@media (max-width: 1024px) {
  .cp-form-page { grid-template-columns: repeat(var(--cp-grid-cols-tablet, 8), 1fr); }
}
.cp-form-flexible .cp-form-page {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(var(--cp-form-row-height, 20px), auto);
  gap: var(--cp-grid-gap, 12px);
  transition: opacity 0.15s ease-out;
}
/* Force fields to flow from top—override inline grid-row from full-form layout */
.cp-form-page .cp-field {
  grid-row: auto !important;
}

.cp-page-break { width: 100%; padding: 0; }


.cp-page-next, .cp-page-prev { white-space: nowrap; }
.cp-page-indicator { display: flex; align-items: center; font-size: 13px; color: #6b7280; margin-left: auto; white-space: nowrap; }

/* ---------- Divider ---------- */

.cp-divider { border: none; margin: 16px 0; width: 100%; }
.cp-divider--labeled { display: flex; align-items: center; gap: 12px; }
.cp-divider-label { font-size: 13px; color: #6b7280; font-weight: 500; white-space: nowrap; }

/* ---------- Validation Error ---------- */

.cp-field-error { color: #ef4444; font-size: 12px; margin-top: 4px; font-weight: 500; }
/* Hide empty error container — exclamation icon only shows when there's actual error content */
.cp-form-flexible .cp-field-error:empty {
  display: none;
}
.cp-form-flexible .cp-field-error:not(:empty) {
  position: relative;
  margin-top: 8px;
  padding: 10px 12px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--cp-val-error-border);
  background: linear-gradient(135deg, var(--cp-val-error-bg) 0%, #fff 100%);
  color: #991b1b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.cp-form-flexible .cp-field-error::before {
  content: "!";
  position: absolute;
  left: 12px;
  top: 9px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--cp-val-error);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.cp-form-flexible .cp-field.has-error .cp-field-label { color: #991b1b; }
.cp-form-flexible .cp-input.is-invalid,
.cp-form-flexible .cp-select.is-invalid,
.cp-form-flexible .cp-textarea.is-invalid {
  border-color: var(--cp-val-error);
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.cp-form-flexible .cp-field.has-success .cp-field-label { color: var(--cp-val-success); }
.cp-form-flexible .cp-input.is-valid,
.cp-form-flexible .cp-select.is-valid,
.cp-form-flexible .cp-textarea.is-valid {
  border-color: var(--cp-val-success-border);
  background: linear-gradient(180deg, #fff 0%, var(--cp-val-success-bg) 100%);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.cp-form-flexible .cp-input:disabled,
.cp-form-flexible .cp-select:disabled,
.cp-form-flexible .cp-textarea:disabled,
.cp-form-flexible .cp-btn:disabled,
.cp-form-flexible button:disabled {
  opacity: 1;
  color: var(--cp-val-disabled-text);
  border-color: var(--cp-val-disabled-border);
  background: var(--cp-val-disabled-bg);
  cursor: not-allowed;
}
.cp-form-flexible .cp-radio-label input:disabled,
.cp-form-flexible .cp-checkbox-label input:disabled {
  filter: grayscale(0.2);
}

/* ---------- Form Footer ---------- */

.cp-form-footer { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e7eb; flex-wrap: wrap; }
.cp-form-submit { min-width: 160px; height: 44px; font-size: 16px; }
.cp-form-submit-loading { display: inline-flex; align-items: center; gap: 8px; }
.cp-form-save-draft { height: 44px; }
.cp-form-flexible .cp-form-submit {
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.cp-form-flexible .cp-form-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.22);
}
.cp-form-flexible .cp-form-submit.is-loading {
  filter: saturate(0.85);
  cursor: progress;
}
.cp-form-flexible .cp-form-submit.is-success {
  background: #059669;
}
.cp-form-flexible .cp-form-submit.is-error {
  background: #b91c1c;
}
.cp-form-flexible .cp-form-submit:disabled:not(.is-loading) {
  color: var(--cp-val-disabled-text);
  background: var(--cp-val-disabled-bg);
  border-color: var(--cp-val-disabled-border);
}
.cp-form-flexible .cp-submit-feedback {
  flex: 1 1 220px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  animation: ipFormConfFade 180ms ease-out;
}
.cp-form-flexible .cp-submit-feedback.is-loading {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.cp-form-flexible .cp-submit-feedback.is-success {
  background: var(--cp-val-success-bg);
  border-color: var(--cp-val-success-border);
  color: #065f46;
}
.cp-form-flexible .cp-submit-feedback.is-error {
  background: var(--cp-val-error-bg);
  border-color: var(--cp-val-error-border);
  color: #991b1b;
}

.cp-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: cp-spin 0.6s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ---------- Confirmation ---------- */

.cp-form-confirmation { padding: 24px; border-radius: 12px; text-align: center; }
.cp-form-confirmation.cp-conf-success { background: #d1fae5; border: 1px solid #a7f3d0; }
.cp-form-confirmation h3 { margin: 0 0 8px; color: #065f46; }
.cp-form-confirmation p { margin: 0; color: #047857; }
.cp-form-confirmation .cp-conf-body { max-width: 840px; margin: 0 auto; }
.cp-form-confirmation .cp-conf-body.cp-conf-align-left { text-align: left; }
.cp-form-confirmation .cp-conf-body.cp-conf-align-center { text-align: center; }
.cp-form-confirmation .cp-conf-title { margin: 0 0 10px; color: #065f46; font-size: 24px; }
.cp-form-confirmation .cp-conf-message { color: #047857; line-height: 1.6; }
.cp-form-confirmation .cp-conf-message .cp-rt-callout { background: #eff6ff; border-left: 4px solid #2563eb; padding: 12px 16px; border-radius: 0 6px 6px 0; color: #1e40af; }
.cp-form-confirmation .cp-conf-message .cp-rt-info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; color: #1e3a8a; }
.cp-form-confirmation .cp-conf-message .cp-rt-success-box { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 10px 12px; color: #065f46; }
.cp-form-confirmation .cp-conf-message .cp-rt-warning-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; color: #92400e; }
.cp-form-confirmation .cp-conf-reference { margin-top: 12px; color: #065f46; }
.cp-form-confirmation .cp-conf-redirect-timer { margin-top: 12px; color: #065f46; font-weight: 500; }
.cp-form-confirmation .cp-conf-timer-count { font-weight: 700; }
.cp-form-confirmation .cp-conf-download-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; background: #059669; color: #fff; transition: background 0.15s; }
.cp-form-confirmation .cp-conf-download-btn:hover { background: #047857; color: #fff; }
.cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-icon { font-size: 48px; width: 48px; height: 48px; color: #059669; margin-bottom: 12px; display: inline-block; }
.cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-subtext { margin: 0 0 16px; color: #047857; font-size: 15px; }
.cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; background: #059669; color: #fff; transition: background 0.15s; border: none; cursor: pointer; }
.cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn:hover { background: #047857; color: #fff; }
.cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-timer { margin-top: 12px; color: #047857; font-weight: 500; }
.cp-form-confirmation .cp-conf-print { margin-top: 12px; border: 1px solid #059669; background: #ecfdf5; color: #065f46; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.cp-form-confirmation .cp-conf-icon { font-size: 36px; width: 36px; height: 36px; color: #10b981; margin-bottom: 8px; }
.cp-form-confirmation .cp-conf-icon-image { width: 42px; height: 42px; object-fit: contain; margin-bottom: 8px; }
.cp-form-confirmation.cp-conf-success { animation: ipFormConfFade 220ms ease-out; }
.cp-form-confirmation:focus { outline: 2px solid #10b981; outline-offset: 2px; }
.cp-form-confirmation.cp-conf-celebrate { position: relative; overflow: hidden; }
.cp-form-confirmation .cp-conf-tab-active { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) inset; }
.cp-form-confirmation .cp-confetti-particle {
  position: absolute;
  top: -10px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.92;
  pointer-events: none;
  animation: ipConfettiFall 1.2s ease-out forwards;
  animation-delay: var(--cp-confetti-delay, 0s);
  transform: rotate(var(--cp-confetti-rot, 0deg));
}

@keyframes ipFormConfFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ipConfBounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-8px) scale(1.02); }
  65% { transform: translateY(2px) scale(0.995); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes ipConfScale {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ipConfettiFall {
  0% { opacity: 0; transform: translate3d(0, -6px, 0) rotate(var(--cp-confetti-rot, 0deg)); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 120px, 0) rotate(calc(var(--cp-confetti-rot, 0deg) + 120deg)); }
}

@media (max-width: 768px) {
  .cp-form-confirmation { padding: 18px; }
  .cp-form-confirmation .cp-conf-title { font-size: 20px; }
}

@media print {
  .cp-form-confirmation .cp-conf-print { display: none; }
}

/* ---------- Widget Styles ---------- */

.cp-forms-empty { text-align: center; padding: 20px; color: #9ca3af; }
.cp-forms-empty .dashicons { font-size: 28px; width: 28px; height: 28px; display: block; margin: 0 auto 8px; }

.cp-forms-widget-list { display: flex; flex-direction: column; }
.cp-forms-widget-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid #f3f4f6; transition: background 0.15s; }
.cp-forms-widget-item:hover { background: #f9fafb; }
.cp-forms-widget-item:last-child { border-bottom: none; }
.cp-forms-widget-icon { font-size: 20px; width: 20px; height: 20px; color: #1e40af; flex-shrink: 0; }
.cp-forms-widget-info { flex: 1; min-width: 0; }
.cp-forms-widget-info strong { display: block; font-size: 14px; color: #111827; }
.cp-forms-widget-desc { display: block; font-size: 12px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cp-forms-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.cp-forms-badge-new { background: #dbeafe; color: #1e40af; }
.cp-forms-badge-approved { background: #d1fae5; color: #065f46; }
.cp-forms-badge-rejected { background: #fee2e2; color: #991b1b; }
.cp-forms-badge-pending_review { background: #fff7ed; color: #9a3412; }

/* ---------- Input Group (prefix / suffix) ---------- */

.cp-input-group { display: flex; align-items: stretch; }
.cp-input-group .cp-input { flex: 1; border-radius: 0; min-width: 0; }
.cp-input-prefix, .cp-input-suffix { display: flex; align-items: center; padding: 0 12px; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; font-size: 14px; white-space: nowrap; user-select: none; }
.cp-input-prefix { border-right: 0; border-radius: 8px 0 0 8px; }
.cp-input-suffix { border-left: 0; border-radius: 0 8px 8px 0; }
.cp-input-group .cp-input:first-child { border-radius: 8px 0 0 8px; }
.cp-input-group .cp-input:last-child { border-radius: 0 8px 8px 0; }
.cp-input-prefix + .cp-input { border-left: 0; }
.cp-input-group .cp-input-suffix { border-left: 0; }

/* ---------- Number Group ---------- */

.cp-number-group .cp-input-prefix,
.cp-number-group .cp-input-suffix { font-weight: 600; }

/* ---------- Number Stepper ---------- */

.cp-number-stepper { display: flex; align-items: stretch; }
.cp-stepper-btn { width: 42px; border: 1px solid #d1d5db; background: #f9fafb; color: #374151; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; user-select: none; flex-shrink: 0; }
.cp-stepper-btn:hover { background: #e5e7eb; }
.cp-stepper-btn:active { background: #d1d5db; }
.cp-stepper-minus { border-radius: 8px 0 0 8px; border-right: 0; }
.cp-stepper-plus { border-radius: 0 8px 8px 0; border-left: 0; }
.cp-stepper-input { text-align: center; border-radius: 0; flex: 1; min-width: 0; }
.cp-number-stepper .cp-input-prefix { border-radius: 8px 0 0 8px; border-right: 0; font-weight: 600; }
.cp-number-stepper .cp-input-suffix { border-radius: 0 8px 8px 0; border-left: 0; font-weight: 600; }
.cp-number-stepper .cp-input-prefix ~ .cp-stepper-minus { border-radius: 0; }
.cp-number-stepper .cp-stepper-plus:last-child { border-radius: 0 8px 8px 0; }

/* ---------- Number Slider ---------- */

.cp-number-slider { width: 100%; }
.cp-number-slider-row { display: flex; align-items: center; gap: 10px; }
.cp-number-slider-label { font-weight: 600; color: #374151; font-size: 14px; white-space: nowrap; }
.cp-number-slider input[type="range"] { flex: 1; cursor: pointer; }

/* ---------- Range Indicator Bar ---------- */

.cp-range-bar { height: 6px; background: #e5e7eb; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.cp-range-fill { height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #1e40af); border-radius: 3px; transition: width 0.2s ease; }

/* ---------- Formula Hint ---------- */

.cp-field-formula-hint { font-size: 11px; color: #6b7280; margin-top: 4px; font-style: italic; }

/* ---------- Phone Field ---------- */

.cp-phone-field { display: flex; flex-direction: column; gap: 10px; }
.cp-phone-entry { }
.cp-phone-row { display: flex; gap: 8px; align-items: stretch; }
.cp-phone-type-select { min-width: 100px; max-width: 120px; border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 10px; font-size: 14px; background: #fff; color: #374151; }
.cp-phone-group { flex: 1; }
.cp-phone-group .cp-phone-input { flex: 1; min-width: 0; }
.cp-phone-flag { font-size: 18px; padding: 0 10px; display: flex; align-items: center; }
.cp-phone-ext-input { max-width: 80px; text-align: center; border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.cp-phone-remove-btn { background: none; border: 1px solid #fecaca; color: #ef4444; border-radius: 6px; font-size: 20px; cursor: pointer; padding: 4px 10px; line-height: 1; transition: all 0.15s; flex-shrink: 0; }
.cp-phone-remove-btn:hover { background: #fef2f2; border-color: #f87171; }
.cp-phone-add-btn { background: none; border: 1px dashed #93c5fd; color: #3b82f6; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.cp-phone-add-btn:hover { background: #eff6ff; border-color: #3b82f6; }
.cp-phone-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Email Group ---------- */

.cp-email-group .cp-input-prefix .dashicons { font-size: 18px; width: 18px; height: 18px; color: #6b7280; }
.cp-email-confirm-wrap { margin-top: 10px; }
.cp-email-confirm-wrap .cp-field-label { font-size: 13px; }

/* ---------- Character Counter ---------- */

.cp-char-counter { display: flex; justify-content: flex-end; font-size: 12px; color: #9ca3af; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cp-char-counter.is-near-limit { color: #f59e0b; }
.cp-char-counter.is-at-limit { color: #ef4444; font-weight: 600; }

/* ---------- Textarea Counters ---------- */

.cp-textarea-counters { display: flex; justify-content: flex-end; gap: 16px; margin-top: 4px; }
.cp-word-counter { font-size: 12px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.cp-word-counter.is-near-limit { color: #f59e0b; }
.cp-word-counter.is-at-limit { color: #ef4444; font-weight: 600; }

/* ---------- Textarea Read Only ---------- */

.cp-textarea-readonly { background: #f9fafb; color: #6b7280; cursor: default; }

/* ---------- Textarea Auto-Grow ---------- */

textarea[data-auto-grow] { overflow: hidden; resize: none; }

/* ---------- Rich Text Toolbar ---------- */

.cp-richtext-wrap { border-radius: 8px; overflow: hidden; }
.cp-richtext-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; background: #f3f4f6; border: 1px solid #d1d5db; border-bottom: none; border-radius: 8px 8px 0 0; }
.cp-rt-group { display: inline-flex; gap: 1px; align-items: center; }
.cp-rt-sep { width: 1px; height: 20px; background: #d1d5db; margin: 0 4px; flex-shrink: 0; }
.cp-rt-btn { border: none; background: none; padding: 5px 7px; border-radius: 4px; cursor: pointer; font-size: 14px; color: #374151; transition: all 0.12s; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; }
.cp-rt-btn:hover { background: #e5e7eb; }
.cp-rt-btn.is-active { background: #dbeafe; color: #1e40af; }
.cp-rt-btn .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
.cp-rt-heading-select { border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 6px; font-size: 13px; color: #374151; background: #fff; cursor: pointer; height: 28px; outline: none; }
.cp-rt-heading-select:focus { border-color: #93c5fd; }
.cp-richtext-editor { width: 100%; min-height: 100px; border: 1px solid #d1d5db; border-radius: 0 0 8px 8px; padding: 10px 12px; font-size: 14px; color: #111827; outline: none; overflow-y: auto; line-height: 1.6; }
.cp-richtext-editor:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.cp-richtext-editor ul, .cp-richtext-editor ol { margin: 4px 0 4px 20px; padding: 0; }
.cp-richtext-editor li { margin: 2px 0; }
.cp-richtext-editor blockquote { border-left: 3px solid #93c5fd; margin: 8px 0; padding: 4px 12px; color: #4b5563; background: #f9fafb; }
.cp-richtext-editor h1 { font-size: 1.8em; font-weight: 700; margin: 12px 0 6px; }
.cp-richtext-editor h2 { font-size: 1.4em; font-weight: 600; margin: 10px 0 5px; }
.cp-richtext-editor h3 { font-size: 1.15em; font-weight: 600; margin: 8px 0 4px; }
.cp-richtext-editor hr { border: none; border-top: 1px solid #d1d5db; margin: 12px 0; }
.cp-richtext-editor a { color: #1e40af; text-decoration: underline; }

/* ---------- URL Field ---------- */

.cp-url-field { display: flex; flex-direction: column; gap: 0; }
.cp-url-input-group { display: flex; align-items: stretch; }
.cp-url-icon { display: flex; align-items: center; padding: 0 12px; background: #f3f4f6; border: 1px solid #d1d5db; border-right: 0; border-radius: 8px 0 0 8px; color: #6b7280; }
.cp-url-icon .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
.cp-url-input { flex: 1; border-radius: 0 8px 8px 0 !important; }
.cp-url-linktext-wrap { margin-top: 10px; }
.cp-url-linktext-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; }
.cp-url-linktext { width: 100%; }
.cp-url-preview-card { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; font-size: 13px; color: #374151; }
.cp-url-favicon { width: 16px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.cp-url-domain { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-url-open { color: #3b82f6; font-size: 12px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.cp-url-open:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .cp-form-fields { grid-template-columns: 1fr; }
  .cp-field-half, .cp-field-third, .cp-field-two-thirds, .cp-field-quarter, .cp-field-three-quarters { grid-column: span 1; }
  .cp-forms-grid { grid-template-columns: 1fr; }
  .cp-form { padding: 20px; }
  .cp-form-footer { flex-direction: column; }
  .cp-form-submit, .cp-form-save-draft { width: 100%; }
  .cp-repeater-row-fields { flex-direction: column; }
  .cp-name-fields { flex-direction: column; }
  .cp-name-part { width: 100%; flex: 1 !important; }
  .cp-name-prefix, .cp-name-middle-initial, .cp-name-middle-full, .cp-name-suffix, .cp-name-credentials { flex: 1 !important; min-width: 0 !important; }
  .cp-address-city-state, .cp-address-zcp-country { flex-direction: column; }
  .cp-date-range { flex-direction: column; }
  .cp-date-range-separator { display: none; }
  .cp-phone-row { flex-wrap: wrap; }
  .cp-phone-type-select { width: 100%; max-width: 100%; }
  .cp-phone-group { width: 100%; }
  .cp-yesno-toggle { flex-direction: column; }
  .cp-likert-wrap { margin: 0 -20px; padding: 0 20px; }
}

/* ── Dropdown widget ── */
.cp-dd-widget { position: relative; }
.cp-dd-trigger {
  display: flex; align-items: center; padding: 0 36px 0 14px; height: 42px;
  border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
  cursor: pointer; position: relative; transition: border-color 0.15s;
}
.cp-dd-trigger:focus, .cp-dd-trigger:hover { border-color: #1e40af; outline: none; }
.cp-dd-ph { font-size: 14px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dd-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; width: 16px; height: 16px; color: #9ca3af; }
.cp-dd-panel {
  position: absolute; z-index: 50; left: 0; right: 0; top: 100%;
  border: 1px solid #d1d5db; border-top: 0; border-radius: 0 0 6px 6px;
  background: #fff; max-height: 260px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cp-dd-search-wrap { padding: 8px; border-bottom: 1px solid #f3f4f6; }
.cp-dd-search {
  width: 100%; height: 32px; border: 1px solid #e5e7eb; border-radius: 4px;
  padding: 0 8px; font-size: 13px; outline: none;
}
.cp-dd-search:focus { border-color: #1e40af; }
.cp-dd-group-header {
  padding: 6px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: #6b7280; background: #f9fafb;
  letter-spacing: 0.5px;
}
.cp-dd-option {
  padding: 8px 12px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; gap: 8px; transition: background 0.1s;
}
.cp-dd-option:hover { background: #f3f4f6; }
.cp-dd-option.cp-dd-selected { background: #eff6ff; }
.cp-dd-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1e40af; flex-shrink: 0; }
.cp-dd-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cp-dd-other-opt { border-top: 1px solid #f3f4f6; color: #6b7280; font-style: italic; }
.cp-dd-other-input { margin-top: 8px; }
.cp-dd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-dd-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 500;
  background: #1e40af; color: #fff;
}
.cp-dd-tag-remove {
  background: none; border: none; color: rgba(255,255,255,0.7);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px;
}
.cp-dd-tag-remove:hover { color: #fff; }

/* Checkbox Group — Layout modes */
.cp-cb-horizontal { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.cp-cb-horizontal .cp-checkbox-label { align-items: center; }
.cp-cb-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.cp-cb-desc { display: block; font-size: 12px; color: #9ca3af; margin-left: 26px; margin-top: 2px; }
.cp-cb-select-all {
  font-size: 13px; color: #1e40af; cursor: pointer; font-weight: 500;
  margin-bottom: 8px; user-select: none;
}
.cp-cb-select-all:hover { text-decoration: underline; }

/* Checkbox Group — Button Group mode */
.cp-cb-button-group { display: flex; flex-direction: column; gap: 0; }
.cp-cb-btngroup-inner {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden;
}
.cp-cb-btn {
  flex: 1 1 auto; padding: 10px 18px; font-size: 14px; font-weight: 500;
  background: #fff; border: none; border-right: 1px solid #d1d5db;
  cursor: pointer; color: #374151; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.cp-cb-btn:last-of-type { border-right: none; }
.cp-cb-btn:hover { background: #f3f4f6; }
.cp-cb-btn-active, .cp-cb-btn-active:hover { background: #1e40af; color: #fff; }
.cp-cb-other-input {
  width: 100%; height: 40px; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 0 12px; font-size: 14px; outline: none; box-sizing: border-box;
}
.cp-cb-other-input:focus { border-color: #1e40af; box-shadow: 0 0 0 3px rgba(30,64,175,0.08); }

/* Radio — Layout modes */
.cp-radio-group { display: flex; flex-direction: column; gap: 8px; }
.cp-radio-horizontal { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.cp-radio-label {
  display: flex; align-items: flex-start; gap: 8px; font-size: 14px;
  cursor: pointer; color: #374151; line-height: 1.4;
}
.cp-radio-label input[type="radio"] { width: 18px; height: 18px; accent-color: #1e40af; flex-shrink: 0; margin-top: 1px; }
.cp-radio-horizontal .cp-radio-label { align-items: center; }
.cp-radio-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.cp-radio-desc { display: block; font-size: 12px; color: #9ca3af; margin-left: 26px; margin-top: 2px; }

/* Radio — Button Group mode */
.cp-radio-button-group {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden;
}
.cp-radio-btn {
  flex: 1 1 auto; padding: 10px 18px; font-size: 14px; font-weight: 500;
  background: #fff; border: none; border-right: 1px solid #d1d5db;
  cursor: pointer; color: #374151; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.cp-radio-btn:last-of-type { border-right: none; }
.cp-radio-btn:hover { background: #f3f4f6; }
.cp-radio-btn-active, .cp-radio-btn-active:hover {
  background: #1e40af; color: #fff;
}
.cp-radio-other-input {
  width: 100%; height: 40px; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 0 12px; font-size: 14px; outline: none; box-sizing: border-box;
}
.cp-radio-other-input:focus { border-color: #1e40af; box-shadow: 0 0 0 3px rgba(30,64,175,0.08); }

/* ── Date field styles ── */
.cp-date-field-wrap {
  display: flex; align-items: center; gap: 8px;
}
.cp-date-field-wrap .cp-date-input { flex: 1; }
.cp-date-today-btn {
  padding: 7px 16px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #f9fafb; font-size: 13px; font-weight: 500; color: #374151;
  cursor: pointer; white-space: nowrap; transition: all .15s ease;
}
.cp-date-today-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.cp-date-today-btn:active { background: #e5e7eb; }

.cp-date-calc {
  margin-top: 6px; font-size: 13px; color: #6b7280; display: flex;
  align-items: center; gap: 4px; flex-wrap: wrap;
}
.cp-date-calc-item { display: inline-flex; align-items: center; gap: 4px; }
.cp-date-calc-item strong { color: #374151; font-weight: 600; }
.cp-date-calc-sep { color: #d1d5db; margin: 0 4px; }

.cp-date-error, .cp-time-error {
  color: #dc2626; font-size: 13px; margin-top: 4px;
}

.cp-date-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 13px; font-weight: 500;
}

/* ── Time field styles ── */
.cp-time-field-wrap {
  display: flex; align-items: center; gap: 8px;
}
.cp-time-field-wrap .cp-time-input { flex: 1; }
.cp-time-now-btn {
  padding: 7px 16px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #f9fafb; font-size: 13px; font-weight: 500; color: #374151;
  cursor: pointer; white-space: nowrap; transition: all .15s ease;
}
.cp-time-now-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.cp-time-now-btn:active { background: #e5e7eb; }

.cp-time-dur {
  margin-top: 6px; font-size: 13px; color: #6b7280;
}
.cp-time-dur-label strong { color: #374151; font-weight: 600; }

.cp-time-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 13px; font-weight: 500;
}

/* ---------- Spacer ---------- */

.cp-spacer { width: 100%; position: relative; box-sizing: border-box; }
.cp-spacer-line { display: flex; align-items: center; justify-content: center; }
.cp-spacer-line::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 0; }
.cp-spacer-line--solid::after { border-top: 1px solid #e5e7eb; }
.cp-spacer-line--dashed::after { border-top: 1px dashed #d1d5db; }
.cp-spacer-line--dotted::after { border-top: 1px dotted #d1d5db; }

/* ---------- Alert / Notice (Enterprise) ---------- */

.cp-alert {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.cp-alert-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
}
.cp-alert-icon {
  flex-shrink: 0;
  font-size: 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  line-height: 1;
}
.cp-alert-text {
  flex: 1;
  min-width: 0;
}
.cp-alert-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cp-alert-content {
  font-size: 14px;
  line-height: 1.6;
}
.cp-alert-content p { margin: 0 0 8px; }
.cp-alert-content p:last-child { margin-bottom: 0; }
.cp-alert-content a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cp-alert-content a:hover { text-decoration: none; }

.cp-alert-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.cp-alert-cta--link {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.cp-alert-cta--link:hover {
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
}
.cp-alert-cta--modal {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.cp-alert-cta--modal:hover {
  background: rgba(0, 0, 0, 0.12);
}
.cp-alert--info .cp-alert-cta { background: rgba(59, 130, 246, 0.2); color: #1e40af; }
.cp-alert--info .cp-alert-cta:hover { background: rgba(59, 130, 246, 0.3); }
.cp-alert--warning .cp-alert-cta { background: rgba(245, 158, 11, 0.2); color: #92400e; }
.cp-alert--warning .cp-alert-cta:hover { background: rgba(245, 158, 11, 0.3); }
.cp-alert--success .cp-alert-cta { background: rgba(16, 185, 129, 0.2); color: #065f46; }
.cp-alert--success .cp-alert-cta:hover { background: rgba(16, 185, 129, 0.3); }
.cp-alert--error .cp-alert-cta { background: rgba(239, 68, 68, 0.2); color: #991b1b; }
.cp-alert--error .cp-alert-cta:hover { background: rgba(239, 68, 68, 0.3); }
.cp-alert--neutral .cp-alert-cta { background: rgba(0, 0, 0, 0.08); color: #374151; }
.cp-alert--neutral .cp-alert-cta:hover { background: rgba(0, 0, 0, 0.12); }

.cp-alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 22px;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s;
}
.cp-alert-dismiss:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

.cp-alert-footer {
  padding: 10px 20px 14px 56px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
}
.cp-alert-dontshow { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cp-alert-dontshow-cb { margin: 0; }

.cp-alert--info { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); color: #1e40af; }
.cp-alert--info .cp-alert-icon { color: #2563eb; }
.cp-alert--warning { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); color: #92400e; }
.cp-alert--warning .cp-alert-icon { color: #d97706; }
.cp-alert--success { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #065f46; }
.cp-alert--success .cp-alert-icon { color: #059669; }
.cp-alert--error { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); color: #991b1b; }
.cp-alert--error .cp-alert-icon { color: #dc2626; }
.cp-alert--neutral { background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); color: #374151; }
.cp-alert--neutral .cp-alert-icon { color: #6b7280; }

.cp-alert--left-accent { border-left: 5px solid currentColor; border-radius: 0 12px 12px 0; }
.cp-alert--full-border { border: 2px solid currentColor; }
.cp-alert--borderless { border: none; }

.cp-alert--compact .cp-alert-body { padding: 12px 16px; }
.cp-alert--compact .cp-alert-footer { padding-left: 52px; }
.cp-alert--compact .cp-alert-title { font-size: 14px; }
.cp-alert--compact .cp-alert-content { font-size: 13px; }
.cp-alert--compact .cp-alert-cta { margin-top: 8px; padding: 6px 12px; font-size: 12px; }
.cp-alert--large .cp-alert-body { padding: 24px 28px; }
.cp-alert--large .cp-alert-footer { padding-left: 64px; }
.cp-alert--large .cp-alert-title { font-size: 17px; }
.cp-alert--large .cp-alert-content { font-size: 15px; }
.cp-alert--large .cp-alert-cta { margin-top: 14px; padding: 10px 20px; font-size: 14px; }

/* Alert animations */
.cp-alert--animate { opacity: 0; }
.cp-alert--animate-fade.cp-alert--visible { animation: ipAlertFade 0.4s ease forwards; }
.cp-alert--animate-slide.cp-alert--visible { animation: ipAlertSlide 0.45s ease forwards; }
@keyframes ipAlertFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ipAlertSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

body.cp-alert-modal-open { overflow: hidden; }

/* ==========================================================================
   Alert Modal — Enterprise Premium Design System
   ========================================================================== */

/* Container — instant show/hide, no opacity transition on parent */
.cp-alert-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  visibility: hidden;
  pointer-events: none;
}
.cp-alert-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop — fades in independently */
.cp-alert-modal-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.72) 0%, rgba(30, 41, 59, 0.68) 50%, rgba(15, 23, 42, 0.75) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cp-alert-modal.is-open .cp-alert-modal-backdrop {
  opacity: 1;
}

/* Content shell */
.cp-alert-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 10px 20px -5px rgba(0, 0, 0, 0.08),
    0 32px 64px -12px rgba(0, 0, 0, 0.2),
    0 64px 128px -24px rgba(0, 0, 0, 0.14);
}

/* Header — flex, typography scale */
.cp-alert-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  flex-shrink: 0;
  min-height: 72px;
}
.cp-alert-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #0f172a;
}
.cp-alert-modal-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  font-size: 22px;
  font-weight: 300;
  color: #64748b;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.cp-alert-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
  transform: scale(1.02);
}
.cp-alert-modal-close:active {
  transform: scale(0.98);
}

/* Body — premium prose, rich content ready */
.cp-alert-modal-body {
  padding: 0 28px 28px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.7;
  color: #334155;
  flex: 1;
  min-height: 0;
}
.cp-alert-modal-body p {
  margin: 0 0 14px;
}
.cp-alert-modal-body p:last-child { margin-bottom: 0; }
.cp-alert-modal-body a {
  color: #1e40af;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 64, 175, 0.3);
  transition: color 0.15s, border-color 0.15s;
}
.cp-alert-modal-body a:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.cp-alert-modal-body ul,
.cp-alert-modal-body ol {
  margin: 0 0 14px;
  padding-left: 1.5em;
}
.cp-alert-modal-body li { margin-bottom: 6px; }
.cp-alert-modal-body li:last-child { margin-bottom: 0; }
.cp-alert-modal-body strong { font-weight: 700; color: #1e293b; }
.cp-alert-modal-body blockquote {
  margin: 0 0 14px;
  padding: 12px 20px;
  border-left: 4px solid #cbd5e1;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 8px 8px 0;
  color: #475569;
  font-style: italic;
}
.cp-alert-modal-body hr {
  margin: 20px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

/* ==========================================================================
   1. EXECUTIVE — Boardroom: white, gold pinstripe border, serif title,
      centered elegance, warm neutrals, fine horizontal rules
   ========================================================================== */
.cp-alert-modal-content--default {
  max-width: 560px;
  border-radius: 2px;
  background: #fffefa;
  border: 2px solid #c9a84c;
  box-shadow:
    0 0 0 6px rgba(201, 168, 76, 0.08),
    0 20px 60px -20px rgba(0, 0, 0, 0.25);
}
.cp-alert-modal-content--default .cp-alert-modal-header {
  padding: 32px 36px 24px;
  background: transparent;
  border-bottom: 1px solid #c9a84c;
  text-align: center;
  justify-content: center;
  position: relative;
}
.cp-alert-modal-content--default .cp-alert-modal-header::before,
.cp-alert-modal-content--default .cp-alert-modal-header::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  height: 1px;
  background: #c9a84c;
}
.cp-alert-modal-content--default .cp-alert-modal-header::before { top: 12px; }
.cp-alert-modal-content--default .cp-alert-modal-header::after { bottom: -4px; opacity: 0.3; }
.cp-alert-modal-content--default .cp-alert-modal-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #3d2e00;
  text-align: center;
  width: 100%;
}
.cp-alert-modal-content--default .cp-alert-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 50%;
  background: transparent;
  color: #a38630;
  border: 1px solid #c9a84c;
}
.cp-alert-modal-content--default .cp-alert-modal-close:hover {
  background: #c9a84c;
  color: #fff;
}
.cp-alert-modal-content--default .cp-alert-modal-body {
  padding: 28px 36px 36px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.85;
  color: #44403c;
}
.cp-alert-modal-content--default .cp-alert-modal-body a {
  color: #92400e;
  border-bottom-color: #c9a84c;
}
.cp-alert-modal-content--default .cp-alert-modal-body blockquote {
  border-left-color: #c9a84c;
}

/* ==========================================================================
   2. EXECUTIVE BRIEFING — Classified memo: narrow, dark navy everything,
      monospace, redacted aesthetic, white on dark
   ========================================================================== */
.cp-alert-modal-content--compact {
  max-width: 420px;
  border-radius: 0;
  background: #0f172a;
  border: 1px solid #334155;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}
.cp-alert-modal-content--compact .cp-alert-modal-header {
  padding: 16px 20px;
  min-height: 48px;
  border-bottom: 1px solid #1e293b;
  background: #020617;
}
.cp-alert-modal-content--compact .cp-alert-modal-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #38bdf8;
}
.cp-alert-modal-content--compact .cp-alert-modal-close {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 0;
  background: transparent;
  color: #475569;
  border: 1px solid #334155;
}
.cp-alert-modal-content--compact .cp-alert-modal-close:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.cp-alert-modal-content--compact .cp-alert-modal-body {
  padding: 20px;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #94a3b8;
}
.cp-alert-modal-content--compact .cp-alert-modal-body p { color: #cbd5e1; }
.cp-alert-modal-content--compact .cp-alert-modal-body strong { color: #f1f5f9; }
.cp-alert-modal-content--compact .cp-alert-modal-body a {
  color: #38bdf8;
  border-bottom-color: rgba(56, 189, 248, 0.4);
}
.cp-alert-modal-content--compact .cp-alert-modal-body a:hover { color: #7dd3fc; }
.cp-alert-modal-content--compact .cp-alert-modal-body blockquote {
  border-left-color: #334155;
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
}
.cp-alert-modal-content--compact .cp-alert-modal-body hr {
  background: linear-gradient(90deg, transparent, #334155, transparent);
}

/* ==========================================================================
   3. COMMAND CENTER — Full-width dashboard: split two-tone layout,
      dark sidebar accent, light body, wide, feels like an app panel
   ========================================================================== */
.cp-alert-modal-content--full {
  max-width: 900px;
  max-height: 92vh;
  border-radius: 16px;
  background: #ffffff;
  border: none;
  overflow: hidden;
  flex-direction: row;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.3);
}
.cp-alert-modal-content--full .cp-alert-modal-header {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 240px;
  min-width: 240px;
  min-height: unset;
  padding: 36px 28px;
  background: linear-gradient(195deg, #0f172a 0%, #1e293b 100%);
  border-bottom: none;
  border-right: 1px solid #334155;
}
.cp-alert-modal-content--full .cp-alert-modal-title {
  color: #f8fafc;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.cp-alert-modal-content--full .cp-alert-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  font-size: 20px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
}
.cp-alert-modal-content--full .cp-alert-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}
.cp-alert-modal-content--full .cp-alert-modal-body {
  flex: 1;
  padding: 36px 40px;
  font-size: 15px;
  line-height: 1.75;
  color: #334155;
  background: #f8fafc;
  overflow-y: auto;
}

/* ==========================================================================
   4. GLASS PANE — Apple-style: pill shape, no header, frosted glass,
      extreme blur, floating text, no dividers, ultra minimal
   ========================================================================== */
.cp-alert-modal-content--minimal {
  max-width: 460px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 32px 80px -20px rgba(0, 0, 0, 0.12);
}
.cp-alert-modal-content--minimal .cp-alert-modal-header {
  border-bottom: none;
  padding: 36px 40px 0;
  min-height: unset;
  background: transparent;
}
.cp-alert-modal-content--minimal .cp-alert-modal-title {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.2;
}
.cp-alert-modal-content--minimal .cp-alert-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
  border: none;
}
.cp-alert-modal-content--minimal .cp-alert-modal-close:hover {
  background: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
.cp-alert-modal-content--minimal .cp-alert-modal-body {
  padding: 20px 40px 44px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.6);
}
.cp-alert-modal-content--minimal .cp-alert-modal-body strong { color: rgba(0, 0, 0, 0.8); }
.cp-alert-modal-content--minimal .cp-alert-modal-body a {
  color: #0071e3;
  border-bottom: none;
  font-weight: 500;
}
.cp-alert-modal-content--minimal .cp-alert-modal-body a:hover {
  color: #0077ed;
  text-decoration: underline;
}
.cp-alert-modal-content--minimal .cp-alert-modal-body blockquote {
  border-left-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   5. ADVISORY NOTICE — Full blue immersion: entire modal is blue,
      white text, gradient body, feels like an official document
   ========================================================================== */
.cp-alert-modal-content--info {
  max-width: 560px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 40%, #2563eb 100%);
  border: none;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.4) inset,
    0 24px 64px -16px rgba(30, 64, 175, 0.5);
}
.cp-alert-modal-content--info .cp-alert-modal-header {
  padding: 28px 32px;
  min-height: 72px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cp-alert-modal-content--info .cp-alert-modal-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.cp-alert-modal-content--info .cp-alert-modal-close {
  width: 36px;
  height: 36px;
  font-size: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  border: none;
}
.cp-alert-modal-content--info .cp-alert-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.cp-alert-modal-content--info .cp-alert-modal-body {
  padding: 28px 32px 36px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}
.cp-alert-modal-content--info .cp-alert-modal-body p { color: rgba(255, 255, 255, 0.88); }
.cp-alert-modal-content--info .cp-alert-modal-body strong { color: #ffffff; }
.cp-alert-modal-content--info .cp-alert-modal-body a {
  color: #93c5fd;
  border-bottom-color: rgba(147, 197, 253, 0.4);
}
.cp-alert-modal-content--info .cp-alert-modal-body a:hover { color: #bfdbfe; }
.cp-alert-modal-content--info .cp-alert-modal-body blockquote {
  border-left-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.cp-alert-modal-content--info .cp-alert-modal-body hr {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* ==========================================================================
   6. COMPLIANCE APPROVED — Certificate: double border, green seal banner
      across top, white center, formal and documented
   ========================================================================== */
.cp-alert-modal-content--success {
  max-width: 540px;
  border-radius: 0;
  background: #ffffff;
  border: 3px double #16a34a;
  box-shadow: 0 20px 60px -20px rgba(22, 163, 74, 0.25);
  padding: 6px;
}
.cp-alert-modal-content--success .cp-alert-modal-header {
  padding: 20px 28px;
  min-height: 68px;
  background: #15803d;
  border-bottom: none;
  text-align: center;
  justify-content: center;
  position: relative;
}
.cp-alert-modal-content--success .cp-alert-modal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #4ade80 0px, #4ade80 8px,
    #15803d 8px, #15803d 16px
  );
}
.cp-alert-modal-content--success .cp-alert-modal-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  width: 100%;
  text-align: center;
}
.cp-alert-modal-content--success .cp-alert-modal-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border: none;
}
.cp-alert-modal-content--success .cp-alert-modal-close:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.cp-alert-modal-content--success .cp-alert-modal-body {
  padding: 28px 32px 32px;
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 30%);
}
.cp-alert-modal-content--success .cp-alert-modal-body a {
  color: #15803d;
  border-bottom-color: #86efac;
}
.cp-alert-modal-content--success .cp-alert-modal-body strong { color: #14532d; }
.cp-alert-modal-content--success .cp-alert-modal-body blockquote {
  border-left-color: #86efac;
  background: #f0fdf4;
}

/* ==========================================================================
   7. ACTION REQUIRED — Danger zone: hazard stripes, red/black,
      aggressive, impossible to ignore
   ========================================================================== */
.cp-alert-modal-content--warning {
  max-width: 560px;
  border-radius: 4px;
  background: #1c1917;
  border: 3px solid #dc2626;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.3),
    0 0 40px rgba(220, 38, 38, 0.15),
    0 24px 64px -16px rgba(0, 0, 0, 0.5);
}
.cp-alert-modal-content--warning .cp-alert-modal-header {
  padding: 0;
  min-height: unset;
  background: repeating-linear-gradient(
    -45deg,
    #dc2626 0px, #dc2626 12px,
    #1c1917 12px, #1c1917 24px
  );
  height: 16px;
  border-bottom: 2px solid #dc2626;
}
.cp-alert-modal-content--warning .cp-alert-modal-title {
  position: absolute;
  left: 28px;
  top: 28px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ef4444;
}
.cp-alert-modal-content--warning .cp-alert-modal-close {
  position: absolute;
  top: 24px;
  right: 12px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
  z-index: 2;
}
.cp-alert-modal-content--warning .cp-alert-modal-close:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.cp-alert-modal-content--warning .cp-alert-modal-body {
  padding: 52px 28px 28px;
  font-size: 15px;
  line-height: 1.7;
  color: #d6d3d1;
}
.cp-alert-modal-content--warning .cp-alert-modal-body p { color: #e7e5e4; }
.cp-alert-modal-content--warning .cp-alert-modal-body strong { color: #fca5a5; font-weight: 800; }
.cp-alert-modal-content--warning .cp-alert-modal-body a {
  color: #f87171;
  border-bottom-color: rgba(248, 113, 113, 0.4);
  font-weight: 700;
}
.cp-alert-modal-content--warning .cp-alert-modal-body a:hover { color: #fca5a5; }
.cp-alert-modal-content--warning .cp-alert-modal-body blockquote {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  color: #fecaca;
}
.cp-alert-modal-content--warning .cp-alert-modal-body hr {
  background: linear-gradient(90deg, transparent, #dc2626, transparent);
}
.cp-alert-modal-content--warning .cp-alert-modal-body::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 24px;
  background: repeating-linear-gradient(
    90deg,
    #dc2626 0px, #dc2626 8px,
    transparent 8px, transparent 16px
  );
}

/* ---------- Image Block ---------- */

.cp-image-block { width: 100%; margin: 0; padding: 0; }
.cp-image-block--left { text-align: left; }
.cp-image-block--center { text-align: center; }
.cp-image-block--right { text-align: right; }
.cp-image-block--full { text-align: center; }
.cp-image-block--full .cp-image-block-img { width: 100%; }
.cp-image-block-wrap { position: relative; display: inline-block; max-width: 100%; }
.cp-image-block-img { max-width: 100%; height: auto; display: block; }
.cp-image-block-img--scale { object-fit: scale-down; }
.cp-image-block-img--cover { object-fit: cover; }
.cp-image-block-img--contain { object-fit: contain; }
.cp-image-block-img--rounded { border-radius: 8px; }
.cp-image-block-img--shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.cp-image-block-img--bordered { border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px; }
.cp-image-block-caption { font-size: 13px; color: #6b7280; margin-top: 6px; text-align: center; }
.cp-image-overlay { position: absolute; left: 0; right: 0; padding: 10px 14px; background: rgba(0,0,0,0.55); color: #fff; font-size: 14px; font-weight: 500; }
.cp-image-overlay--top { top: 0; }
.cp-image-overlay--center { top: 50%; transform: translateY(-50%); text-align: center; }
.cp-image-overlay--bottom { bottom: 0; }
.cp-image-lightbox { cursor: zoom-in; }
.cp-image-lightbox-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.cp-image-lightbox-modal img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }

/* ---------- HTML / Embed Block ---------- */

.cp-html-block { width: 100%; }
.cp-html-block--left { text-align: left; }
.cp-html-block--center { text-align: center; }
.cp-html-block iframe, .cp-html-block video, .cp-html-block embed { max-width: 100%; }
.cp-html-block--bg-light { background: #f3f4f6; }
.cp-html-block--bg-dark { background: #1e293b; color: #e2e8f0; }
.cp-html-block--bg-code { background: #1e1e2e; color: #cdd6f4; font-family: monospace; font-size: 13px; white-space: pre-wrap; }
.cp-html-block--pad-small { padding: 8px; }
.cp-html-block--pad-medium { padding: 16px; }
.cp-html-block--pad-large { padding: 24px; }
.cp-html-block--bordered { border: 1px solid #e5e7eb; border-radius: 6px; }
.cp-html-block--video .cp-html-block-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.cp-html-block--video .cp-html-block-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cp-html-block-sandbox { width: 100%; border: none; min-height: 100px; }

/* ---------- Field Group ---------- */

.cp-field-group { width: 100%; border-radius: 8px; padding: 0; margin: 4px 0; }
.cp-field-group--none { border: none; }
.cp-field-group--solid { border: 1px solid #e5e7eb; padding: 16px; }
.cp-field-group--dashed { border: 1px dashed #d1d5db; padding: 16px; }
.cp-field-group--left-accent { border-left: 4px solid #3b82f6; padding: 16px; background: #fafbff; }

.cp-field-group--bg-light-gray { background: #f9fafb; }
.cp-field-group--bg-light-blue { background: #eff6ff; }
.cp-field-group--bg-light-yellow { background: #fffbeb; }
.cp-field-group--bg-light-green { background: #ecfdf5; }

.cp-field-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cp-field-group--collapsible .cp-field-group-header { cursor: pointer; user-select: none; }
.cp-field-group--collapsible .cp-field-group-header:hover { opacity: 0.8; }
.cp-field-group-icon { font-size: 18px; width: 18px; height: 18px; color: #3b82f6; }
.cp-field-group-title { font-size: 16px; font-weight: 700; color: #111827; margin: 0; flex: 1; }
.cp-field-group-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; line-height: 1.4; }
.cp-field-group-toggle { font-size: 18px; width: 18px; height: 18px; color: #6b7280; transition: transform .2s; }
.cp-field-group-desc { font-size: 13px; color: #6b7280; margin: -8px 0 12px; }
.cp-field-group-body { }
.cp-field-group--readonly .cp-field-group-body input,
.cp-field-group--readonly .cp-field-group-body select,
.cp-field-group--readonly .cp-field-group-body textarea { pointer-events: none; opacity: 0.6; background: #f3f4f6; cursor: not-allowed; }
.cp-field-group--readonly .cp-field-group-body button:not(.cp-field-group-toggle) { pointer-events: none; opacity: 0.5; cursor: not-allowed; }
.cp-field-group-readonly-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 4px; background: #fef2f2; color: #dc2626; margin-left: auto; }

/* ---------- Column Layout ---------- */

.cp-column-layout { width: 100%; }
.cp-column { min-width: 0; }
.cp-column-layout--borders .cp-column + .cp-column { border-left: 1px solid #e5e7eb; padding-left: 16px; }
.cp-column-layout--stacked { grid-template-columns: 1fr !important; }
.cp-column-layout--stacked .cp-column + .cp-column { border-left: none !important; padding-left: 0 !important; }

/* ---------- Accordion ---------- */

.cp-accordion { width: 100%; border-radius: 8px; margin: 4px 0; overflow: hidden; }
.cp-accordion--bordered { border: 1px solid #e5e7eb; }
.cp-accordion--borderless { border: none; }
.cp-accordion--shadow { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

.cp-accordion-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; transition: background .15s; }
.cp-accordion-header:hover { background: #f9fafb; }
.cp-accordion-header:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
.cp-accordion-hdr--default .cp-accordion-header { background: #fff; }
.cp-accordion-hdr--filled .cp-accordion-header { background: #f3f4f6; }
.cp-accordion-hdr--outline .cp-accordion-header { background: #fff; border-bottom: 1px solid #e5e7eb; }

.cp-accordion-icon { font-size: 18px; width: 18px; height: 18px; color: #6b7280; flex-shrink: 0; }
.cp-accordion-title { flex: 1; font-size: 15px; font-weight: 600; color: #111827; }
.cp-accordion-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #e5e7eb; color: #374151; margin-left: auto; }
.cp-accordion-chevron { font-size: 18px; width: 18px; height: 18px; color: #9ca3af; flex-shrink: 0; transition: transform .2s; }
.cp-accordion-panel { padding: 16px; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--cp-grid-gap, 20px); }
.cp-accordion--no-animate .cp-accordion-panel { transition: none !important; }

/* ---------- Tabs ---------- */

.cp-tabs { width: 100%; margin: 4px 0; }
.cp-tabs-bar { display: flex; gap: 0; margin-bottom: 0; }
.cp-tabs-tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6b7280; background: none; border: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; }
.cp-tabs-tab:hover { color: #111827; }
.cp-tabs-tab .dashicons { font-size: 16px; width: 16px; height: 16px; vertical-align: -2px; }

.cp-tabs--underline .cp-tabs-bar { border-bottom: 2px solid #e5e7eb; }
.cp-tabs--underline .cp-tabs-tab { border-bottom: 2px solid transparent; margin-bottom: -2px; }
.cp-tabs--underline .cp-tabs-tab--active { color: #1e40af; border-bottom-color: #3b82f6; }

.cp-tabs--pills .cp-tabs-bar { gap: 6px; padding: 4px; background: #f3f4f6; border-radius: 8px; }
.cp-tabs--pills .cp-tabs-tab { border-radius: 6px; }
.cp-tabs--pills .cp-tabs-tab--active { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.cp-tabs--vertical { display: flex; gap: 0; }
.cp-tabs--vertical .cp-tabs-bar { flex-direction: column; border-bottom: none; border-right: 2px solid #e5e7eb; min-width: 160px; }
.cp-tabs--vertical .cp-tabs-tab { text-align: left; border-bottom: none; border-right: 2px solid transparent; margin-right: -2px; margin-bottom: 0; }
.cp-tabs--vertical .cp-tabs-tab--active { color: #1e40af; border-right-color: #3b82f6; }
.cp-tabs--vertical .cp-tabs-panel { flex: 1; }

.cp-tabs-panel { padding: 16px 0; }
.cp-tabs-panel--active { display: block; }
.cp-tabs--width-equal .cp-tabs-tab { flex: 1; text-align: center; }
.cp-tabs--width-fill .cp-tabs-bar { display: flex; }
.cp-tabs--width-fill .cp-tabs-tab { flex: 1; text-align: center; }
.cp-tabs--scrollable .cp-tabs-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cp-tabs--scrollable .cp-tabs-tab { white-space: nowrap; flex-shrink: 0; }
.cp-tabs--icons-above .cp-tabs-tab { flex-direction: column; align-items: center; }
.cp-tabs--icons-above .cp-tabs-tab .dashicons { margin-bottom: 4px; }

/* ---------- Step Indicator ---------- */

.cp-step-indicator { width: 100%; padding: 12px 0; }
.cp-step-indicator--top { order: -10; }
.cp-step-indicator--side { max-width: 280px; margin: 0 0 16px; }
.cp-step-indicator--floating { position: sticky; top: 10px; z-index: 10; background: var(--cp-form-bg, #fff); border: 1px solid var(--cp-form-border, #e5e7eb); border-radius: 10px; padding: 10px; }
.cp-step-indicator--sticky { position: sticky; top: 0; z-index: 10; background: #fff; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.cp-step-indicator-list { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 0; counter-reset: step; }
.cp-step-indicator-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; }
.cp-step-indicator-item + .cp-step-indicator-item::before { content: ''; position: absolute; top: 16px; right: 50%; left: calc(-50%); height: 2px; background: #e5e7eb; z-index: 0; }
.cp-step-indicator--dashed .cp-step-indicator-item + .cp-step-indicator-item::before { border-top: 2px dashed #d1d5db; background: none; }
.cp-step-indicator--arrow .cp-step-indicator-item + .cp-step-indicator-item::before { background: #e5e7eb; }
.cp-step-indicator-item.cp-step--completed + .cp-step-indicator-item::before,
.cp-step-indicator-item.cp-step--active + .cp-step-indicator-item::before { background: #3b82f6; }
.cp-step-indicator--dashed .cp-step-indicator-item.cp-step--completed + .cp-step-indicator-item::before { border-color: #3b82f6; }

.cp-step-circle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-size: 13px; font-weight: 600; z-index: 1; transition: all .2s; }
.cp-step--active .cp-step-circle { background: #3b82f6; color: #fff; box-shadow: 0 0 0 4px rgba(59,130,246,0.2); }
.cp-step--completed .cp-step-circle { background: #10b981; color: #fff; }
.cp-step--completed .cp-step-circle::after { content: '\2713'; }
.cp-step-label { font-size: 12px; color: #6b7280; font-weight: 500; text-align: center; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-step--active .cp-step-label { color: #1e40af; font-weight: 600; }
.cp-step--completed .cp-step-label { color: #065f46; }

.cp-step-indicator--dots .cp-step-circle { width: 12px; height: 12px; font-size: 0; }
.cp-step-indicator--dots .cp-step--active .cp-step-circle { width: 14px; height: 14px; }
.cp-step-indicator--dots .cp-step-label { display: none; }

.cp-step-indicator--bar .cp-step-indicator-list { gap: 4px; }
.cp-step-indicator--bar .cp-step-indicator-item + .cp-step-indicator-item::before { display: none; }
.cp-step-indicator--bar .cp-step-circle { display: none; }
.cp-step-indicator--bar .cp-step-indicator-item { background: #e5e7eb; height: 6px; border-radius: 3px; flex: 1; }
.cp-step-indicator--bar .cp-step-indicator-item.cp-step--active { background: #3b82f6; }
.cp-step-indicator--bar .cp-step-indicator-item.cp-step--completed { background: #10b981; }
.cp-step-indicator--bar .cp-step-label { display: none; }

.cp-step-indicator--breadcrumb .cp-step-indicator-list { justify-content: flex-start; gap: 4px; }
.cp-step-indicator--breadcrumb .cp-step-indicator-item + .cp-step-indicator-item::before { content: '/'; position: static; height: auto; background: none; color: #d1d5db; font-size: 14px; margin: 0 4px; }
.cp-step-indicator--breadcrumb .cp-step-circle { display: none; }
.cp-step-indicator--breadcrumb .cp-step-indicator-item { flex: unset; flex-direction: row; }
.cp-step-indicator--breadcrumb .cp-step-label { max-width: none; font-size: 13px; }

.cp-step-percentage { display: block; text-align: center; font-size: 12px; color: #9ca3af; margin-top: 6px; }

/* ---------- Review Panel ---------- */

.cp-review-panel { width: 100%; padding: 20px; background: #fafbff; border: 1px solid #e5e7eb; border-radius: 10px; }
.cp-review-panel-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.cp-review-panel-desc { font-size: 14px; color: #6b7280; margin: 0 0 16px; }
.cp-review-panel-content { }

.cp-review-table { width: 100%; border-collapse: collapse; }
.cp-review-table td { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 14px; vertical-align: top; }
.cp-review-label { font-weight: 600; color: #374151; width: 35%; }
.cp-review-value { color: #111827; }

.cp-review-card { display: inline-block; width: calc(50% - 8px); vertical-align: top; padding: 12px; margin: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.cp-review-card-label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.cp-review-card-value { font-size: 14px; color: #111827; }

.cp-review-list-item { padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
.cp-review-list-label { font-weight: 600; color: #374151; }
.cp-review-list-value { color: #111827; flex: 1; }

.cp-review-edit-btn { background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 8px; font-size: 12px; color: #3b82f6; cursor: pointer; white-space: nowrap; }
.cp-review-edit-btn:hover { background: #eff6ff; border-color: #3b82f6; }
.cp-review-empty { color: #9ca3af; font-style: italic; text-align: center; padding: 20px; }
.cp-review-cards { display: flex; flex-wrap: wrap; gap: 8px; }

.cp-review-panel-confirm { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #111827; cursor: pointer; }
.cp-review-panel-confirm input[type="checkbox"] { width: 18px; height: 18px; accent-color: #3b82f6; }
.cp-field--highlight { animation: ipFieldHighlight 2s ease; }
@keyframes ipFieldHighlight { 0% { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); } 100% { box-shadow: none; } }

@media (max-width: 768px) {
  .cp-column-layout.cp-column-layout--stack { grid-template-columns: 1fr !important; }
  .cp-column-layout.cp-column-layout--stacked { grid-template-columns: 1fr !important; }
  .cp-spacer-responsive { height: 50% !important; }
  .cp-tabs--vertical { flex-direction: column; }
  .cp-tabs--vertical .cp-tabs-bar { flex-direction: row; border-right: none; border-bottom: 2px solid #e5e7eb; min-width: unset; overflow-x: auto; }
  .cp-tabs--vertical .cp-tabs-tab { border-right: none; border-bottom: 2px solid transparent; margin-right: 0; margin-bottom: -2px; }
  .cp-review-card { width: 100%; }
  .cp-step-label { max-width: 60px; font-size: 11px; }
}

@media (max-width: 480px) {
  .cp-form-wrapper { padding: 0; }
  .cp-form { border-radius: 0; }
  .cp-radio-button-group { flex-direction: column; }
  .cp-radio-btn { border-right: none; border-bottom: 1px solid #d1d5db; }
  .cp-radio-btn:last-of-type { border-bottom: none; }
  .cp-cb-btngroup-inner { flex-direction: column; }
  .cp-cb-btn { border-right: none; border-bottom: 1px solid #d1d5db; }
  .cp-cb-btn:last-of-type { border-bottom: none; }
  .cp-date-field-wrap { flex-wrap: wrap; }
  .cp-time-field-wrap { flex-wrap: wrap; }
}

/* Command Center stacks on small screens */
@media (max-width: 700px) {
  .cp-alert-modal-content--full {
    flex-direction: column;
    max-width: 100%;
  }
  .cp-alert-modal-content--full .cp-alert-modal-header {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-right: none;
    border-bottom: 1px solid #334155;
  }
  .cp-alert-modal-content--full .cp-alert-modal-body {
    padding: 24px;
  }
}

/*
 * Field Appearance Styles
 *
 * Per-field appearance properties (border, background, shadow, padding, margin,
 * radius) are applied as inline styles on the .cp-field wrapper by the builder.
 * No class-level rules here use !important on those properties, so inline
 * values always win. Do not add !important to border, background, padding,
 * margin-bottom, box-shadow, or border-radius on .cp-field.
 */

/* ---------- GeoLocation ---------- */
.cp-geo-field { --geo-accent: #2563eb; }
.cp-geo-map-wrap { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.cp-geo-map { background: linear-gradient(135deg, #e0e7ef, #c7d2e0); min-height: 200px; }
.cp-geo-search-wrap { position: absolute; top: 10px; left: 10px; z-index: 2; width: calc(100% - 80px); max-width: 320px; }
.cp-geo-search-icon { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); font-size: 14px; color: #9ca3af; z-index: 1; }
.cp-geo-search { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid rgba(255,255,255,0.7); border-radius: 8px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.cp-geo-search:focus { border-color: var(--geo-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--geo-accent) 20%, transparent); }
.cp-geo-locate-btn { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.7); border-radius: 8px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); cursor: pointer; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 4px; transition: background 0.2s, transform 0.1s; }
.cp-geo-locate-btn:hover { background: #fff; }
.cp-geo-locate-btn:active { transform: scale(0.95); }
.cp-geo-locate-btn .dashicons { font-size: 16px; color: var(--geo-accent); }
.cp-geo-locating .dashicons { animation: ipGeoPulse 1s ease-in-out infinite; }
@keyframes ipGeoPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.cp-geo-info { margin-top: 8px; }
.cp-geo-coords-display { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f9fafb; border-radius: 8px; font-size: 12px; color: #6b7280; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; }
.cp-geo-coords-icon { font-size: 14px; color: var(--geo-accent); flex-shrink: 0; }
.cp-geo-address-display { margin-top: 4px; padding: 6px 12px; font-size: 12px; color: #374151; display: flex; align-items: flex-start; gap: 6px; }
.cp-geo-address-display .dashicons { font-size: 13px; color: #9ca3af; flex-shrink: 0; margin-top: 1px; }
.cp-geo-manual-inputs { display: flex; gap: 8px; margin-top: 6px; }
.cp-geo-manual-inputs .cp-input { flex: 1; font-size: 12px; }
.cp-geo-no-api { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: #9ca3af; font-size: 13px; gap: 8px; text-align: center; }
.cp-geo-no-api .dashicons { font-size: 32px; color: #d1d5db; }
.cp-geo-fence-warning { margin-top: 6px; padding: 8px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 12px; color: #b91c1c; display: flex; align-items: center; gap: 6px; }
.cp-geo-fence-warning .dashicons { font-size: 14px; flex-shrink: 0; }
@media (max-width: 480px) {
  .cp-geo-search-wrap { width: calc(100% - 20px); max-width: none; }
  .cp-geo-locate-btn { top: auto; bottom: 10px; right: 10px; }
  .cp-geo-manual-inputs { flex-direction: column; }
}

/* =========================================================================
   Employee Picker
   ========================================================================= */
.cp-field:has(.cp-emp-picker) {
  overflow: visible;
}
.cp-emp-picker {
  --ep-accent: #6366f1;
  position: relative;
}

/* Dropdown trigger */
.cp-emp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  font-size: 14px;
  color: #374151;
  min-height: 44px;
}
.cp-emp-trigger:hover {
  border-color: var(--ep-accent);
}
.cp-emp-trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.cp-emp-trigger-arrow {
  color: var(--ep-accent);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.cp-emp-trigger-arrow.cp-emp-arrow-up {
  transform: rotate(180deg);
}

/* Dropdown panel */
.cp-emp-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  z-index: 120;
  overflow: hidden;
  animation: cp-emp-dd-in .2s ease;
}
@keyframes cp-emp-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cp-emp-dd-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.cp-emp-dd-search-wrap .cp-emp-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ep-accent);
  font-size: 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 1;
}
.cp-emp-dd-search-wrap .cp-emp-search {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px 8px 36px;
}
.cp-emp-dropdown-panel .cp-emp-dept-tabs {
  padding: 6px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.cp-emp-dropdown-panel .cp-emp-results {
  position: static;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-height: 320px;
  display: block;
}

/* Searchable style — standard search */
.cp-emp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-emp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ep-accent);
  font-size: 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 1;
}
.cp-emp-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.cp-emp-search:focus {
  border-color: var(--ep-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-accent) 15%, transparent);
}

/* Department tabs */
.cp-emp-dept-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.cp-emp-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid transparent;
  transition: all .2s;
}
.cp-emp-tab:hover {
  background: #e5e7eb;
}
.cp-emp-tab-active {
  background: var(--ep-accent);
  color: #fff;
  border-color: var(--ep-accent);
}
.cp-emp-tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-emp-tab-active .cp-emp-tab-dot {
  background: #fff !important;
}

/* Results dropdown (searchable style) */
.cp-emp-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  z-index: 100;
  display: none;
  scrollbar-width: thin;
}
.cp-emp-results.cp-emp-open {
  display: block;
}

/* Result items — rich cards */
.cp-emp-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  border-bottom: 1px solid #f3f4f6;
  animation: cp-emp-item-in .2s ease both;
}
.cp-emp-result-item:last-child {
  border-bottom: none;
}
.cp-emp-result-item:hover,
.cp-emp-result-item.cp-emp-hl {
  background: color-mix(in srgb, var(--ep-accent) 6%, #fff);
}
.cp-emp-result-item:active {
  transform: scale(.99);
}
@keyframes cp-emp-item-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cp-emp-result-item:nth-child(1) { animation-delay: 0s; }
.cp-emp-result-item:nth-child(2) { animation-delay: .03s; }
.cp-emp-result-item:nth-child(3) { animation-delay: .06s; }
.cp-emp-result-item:nth-child(4) { animation-delay: .09s; }
.cp-emp-result-item:nth-child(5) { animation-delay: .12s; }

/* Result info */
.cp-emp-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.cp-emp-info strong {
  font-size: 14px;
  color: #1f2937;
}
.cp-emp-meta-title,
.cp-emp-meta {
  font-size: 12px;
  color: #6b7280;
}
.cp-emp-dept-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
  gap: 4px;
}
.cp-emp-detail {
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cp-emp-detail .dashicons {
  font-size: 12px;
  width: 12px;
  height: 12px;
}

/* Department-grouped results */
.cp-emp-group {
  border-bottom: 1px solid #f3f4f6;
}
.cp-emp-group:last-child {
  border-bottom: none;
}
.cp-emp-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 2;
}
.cp-emp-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-emp-group-count {
  margin-left: auto;
  background: #e5e7eb;
  color: #6b7280;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

/* Avatars */
.cp-emp-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e5e7eb;
}
.cp-emp-av-sm { width: 24px; height: 24px; font-size: 10px; }
.cp-emp-av-md { width: 32px; height: 32px; font-size: 12px; }
.cp-emp-av-lg { width: 40px; height: 40px; font-size: 14px; }
.cp-emp-av img,
.cp-emp-av .cp-emp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cp-emp-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ep-accent);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}

/* Skeleton loading */
.cp-emp-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.cp-emp-skel-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: cp-emp-shimmer 1.4s ease infinite;
  flex-shrink: 0;
}
.cp-emp-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-emp-skel-line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: cp-emp-shimmer 1.4s ease infinite;
}
.cp-emp-skel-name { width: 55%; height: 12px; }
.cp-emp-skel-title { width: 35%; }
@keyframes cp-emp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Selected area */
.cp-emp-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 0;
}

/* Selected — Chips */
.cp-emp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--ep-accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--ep-accent) 25%, transparent);
  border-radius: 20px;
  font-size: 13px;
  color: #1f2937;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.cp-emp-chip:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ep-accent) 20%, transparent);
}
.cp-emp-remove {
  cursor: pointer;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  transition: color .15s, transform .15s;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cp-emp-remove:hover {
  color: #ef4444;
  transform: scale(1.2);
}

/* Selected — Cards */
.cp-emp-sel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  position: relative;
  transition: box-shadow .2s, border-color .2s;
}
.cp-emp-sel-card:hover {
  border-color: color-mix(in srgb, var(--ep-accent) 30%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ep-accent) 10%, transparent);
}
.cp-emp-sel-card .cp-emp-remove {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 18px;
}
.cp-emp-sel-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

/* Selected — Inline */
.cp-emp-inline {
  font-size: 14px;
  color: #374151;
}

/* Animation for adding items */
.cp-emp-animate-in {
  animation: cp-emp-chcp-in .25s ease both;
}
@keyframes cp-emp-chcp-in {
  from { opacity: 0; transform: scale(.85) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Loading & Empty */
.cp-emp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #9ca3af;
  font-size: 13px;
}
.cp-emp-spin {
  animation: cp-emp-spin .8s linear infinite;
}
@keyframes cp-emp-spin { to { transform: rotate(360deg); } }
.cp-emp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}
.cp-emp-empty .dashicons {
  font-size: 28px;
  width: 28px;
  height: 28px;
  opacity: .4;
}

/* ---- Card Grid Style ---- */
.cp-emp-picker--card_grid .cp-emp-results {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px 0;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.cp-emp-picker--card_grid .cp-emp-search--compact,
.cp-emp-picker--card_grid .cp-emp-search-wrap--filter .cp-emp-search {
  border-width: 1px;
  border-radius: 8px;
  padding: 8px 10px 8px 36px;
  font-size: 13px;
}
.cp-emp-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  animation: cp-emp-item-in .25s ease both;
}
.cp-emp-card-item:hover {
  border-color: color-mix(in srgb, var(--ep-accent) 40%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ep-accent) 12%, transparent);
  transform: translateY(-2px);
}
.cp-emp-card-item .cp-emp-av {
  width: 52px;
  height: 52px;
  font-size: 18px;
}
.cp-emp-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.cp-emp-card-body strong {
  font-size: 13px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cp-emp-card-body .cp-emp-meta {
  font-size: 11px;
}
.cp-emp-card-body .cp-emp-dept-badge {
  font-size: 10px;
  padding: 1px 8px;
}
.cp-emp-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #fff;
  transition: background .2s, transform .2s;
}
.cp-emp-card-check .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}
.cp-emp-card-selected {
  border-color: var(--ep-accent);
  background: color-mix(in srgb, var(--ep-accent) 4%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-accent) 12%, transparent);
}
.cp-emp-card-selected .cp-emp-card-check {
  background: var(--ep-accent);
  transform: scale(1.1);
}

/* ---- Avatar Row Style ---- */
.cp-emp-picker--avatar_row .cp-emp-search-wrap--compact {
  margin-bottom: 8px;
}
.cp-emp-picker--avatar_row .cp-emp-search--compact {
  border-width: 1px;
  border-radius: 8px;
  padding: 6px 10px 6px 34px;
  font-size: 13px;
}
.cp-emp-picker--avatar_row .cp-emp-search-icon {
  left: 10px;
  font-size: 14px;
  width: 14px;
  height: 14px;
}
.cp-emp-picker--avatar_row .cp-emp-results {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.cp-emp-avatar-item {
  position: relative;
  cursor: pointer;
  transition: transform .2s;
  animation: cp-emp-item-in .2s ease both;
}
.cp-emp-avatar-item:hover {
  transform: scale(1.12);
  z-index: 2;
}
.cp-emp-avatar-item .cp-emp-av {
  width: 48px;
  height: 48px;
  font-size: 16px;
  border: 2px solid #e5e7eb;
  transition: border-color .2s, box-shadow .2s;
}
.cp-emp-avatar-item:hover .cp-emp-av {
  border-color: var(--ep-accent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ep-accent) 25%, transparent);
}
.cp-emp-avatar-selected .cp-emp-av {
  border-color: var(--ep-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-accent) 30%, transparent);
}
.cp-emp-avatar-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ep-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cp-emp-chcp-in .2s ease both;
}
.cp-emp-avatar-check .dashicons {
  font-size: 12px;
  width: 12px;
  height: 12px;
}
.cp-emp-avatar-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
  text-align: center;
}
.cp-emp-avatar-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.cp-emp-avatar-item:hover .cp-emp-avatar-tip {
  opacity: 1;
}
.cp-emp-avatar-tip em {
  font-style: normal;
  opacity: .7;
  font-size: 11px;
}

/* Responsive */
@media (max-width: 600px) {
  .cp-emp-dept-tabs {
    padding: 6px 0;
  }
  .cp-emp-result-item {
    padding: 8px 10px;
  }
  .cp-emp-sel-card {
    flex-direction: column;
    text-align: center;
  }
  .cp-emp-dropdown-panel {
    border-radius: 10px;
  }
  .cp-emp-trigger {
    padding: 8px 12px;
    font-size: 13px;
  }
  .cp-emp-picker--card_grid .cp-emp-results {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  .cp-emp-card-item {
    padding: 12px 8px;
  }
  .cp-emp-card-item .cp-emp-av {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .cp-emp-avatar-item .cp-emp-av {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* =========================================================================
   Department Picker
   ========================================================================= */
.cp-field:has(.cp-dept-picker) {
  overflow: visible;
}
.cp-dept-picker {
  --dp-accent: #6366f1;
  position: relative;
}
.cp-dept-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-dept-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dp-accent);
  font-size: 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 1;
}
.cp-dept-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.cp-dept-search:focus {
  border-color: var(--dp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 15%, transparent);
}
.cp-dept-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color .2s;
}
.cp-dept-trigger:hover { border-color: var(--dp-accent); }
.cp-dept-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dept-trigger-arrow { font-size: 18px; color: var(--dp-accent); transition: transform .25s; }
.cp-dept-trigger-arrow.cp-dept-arrow-up { transform: rotate(180deg); }
.cp-dept-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid var(--dp-accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 100;
  overflow: hidden;
}
.cp-dept-dd-search-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.cp-dept-dd-search-wrap .cp-dept-search-icon { left: 18px; }
.cp-dept-dd-search-wrap .cp-dept-search { border-width: 1px; padding: 8px 10px 8px 36px; border-radius: 8px; }
.cp-dept-results {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.cp-dept-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  border-bottom: 1px solid #f3f4f6;
  animation: cp-emp-item-in .2s ease both;
}
.cp-dept-result-item:last-child { border-bottom: none; }
.cp-dept-result-item:hover,
.cp-dept-result-item.cp-dept-hl { background: color-mix(in srgb, var(--dp-accent) 6%, #fff); }
.cp-dept-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-weight: 700; }
.cp-dept-badge-lg { width: 48px; height: 48px; font-size: 16px; }
.cp-dept-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.cp-dept-initials-sm { width: 24px; height: 24px; font-size: 10px; }
.cp-dept-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cp-dept-meta { font-size: 12px; color: #6b7280; }
.cp-dept-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 13px;
  animation: cp-emp-chcp-in .25s ease both;
}
.cp-dept-chip:hover { border-color: color-mix(in srgb, var(--dp-accent) 30%, transparent); }
.cp-dept-remove { cursor: pointer; color: #9ca3af; font-size: 16px; transition: color .15s; }
.cp-dept-remove:hover { color: #ef4444; }
.cp-dept-sel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  position: relative;
  animation: cp-emp-chcp-in .25s ease both;
}
.cp-dept-sel-card:hover { border-color: color-mix(in srgb, var(--dp-accent) 30%, transparent); }
.cp-dept-sel-card .cp-dept-remove { position: absolute; top: 10px; right: 12px; }
.cp-dept-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: #9ca3af; font-size: 13px; text-align: center; }
.cp-dept-empty .dashicons { font-size: 28px; width: 28px; height: 28px; opacity: .4; }
.cp-dept-skeleton { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f3f4f6; }
.cp-dept-skel-badge { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: ipEmpShimmer 1.4s ease infinite; }
.cp-dept-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cp-dept-skel-line { height: 10px; border-radius: 4px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: ipEmpShimmer 1.4s ease infinite; }
.cp-dept-skel-name { width: 55%; height: 12px; }

/* Card Grid */
.cp-dept-picker--card_grid .cp-dept-results {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px 0;
  max-height: none;
  overflow: visible;
}
.cp-dept-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  animation: cp-emp-item-in .25s ease both;
}
.cp-dept-card-item:hover {
  border-color: color-mix(in srgb, var(--dp-accent) 40%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--dp-accent) 12%, transparent);
  transform: translateY(-2px);
}
.cp-dept-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #fff;
  transition: background .2s, transform .2s;
}
.cp-dept-card-selected { border-color: var(--dp-accent); background: color-mix(in srgb, var(--dp-accent) 4%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 12%, transparent); }
.cp-dept-card-selected .cp-dept-card-check { background: var(--dp-accent); transform: scale(1.1); }

/* Avatar Row */
.cp-dept-picker--avatar_row .cp-dept-results {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  max-height: none;
  overflow: visible;
}
.cp-dept-avatar-item {
  position: relative;
  cursor: pointer;
  transition: transform .2s;
  animation: cp-emp-item-in .2s ease both;
}
.cp-dept-avatar-item:hover { transform: scale(1.12); z-index: 2; }
.cp-dept-avatar-item .cp-dept-badge { width: 48px; height: 48px; font-size: 16px; border: 2px solid #e5e7eb; transition: border-color .2s, box-shadow .2s; border-radius: 50%; }
.cp-dept-avatar-item:hover .cp-dept-badge { border-color: var(--dp-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--dp-accent) 25%, transparent); }
.cp-dept-avatar-selected .cp-dept-badge { border-color: var(--dp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 30%, transparent); }
.cp-dept-avatar-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dp-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-dept-avatar-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
}
.cp-dept-avatar-item:hover .cp-dept-avatar-tip { opacity: 1; }
.cp-dept-avatar-tip em { font-style: normal; opacity: .7; font-size: 11px; }
.cp-dept-avatar-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}

/* =========================================================================
   Course Picker
   ========================================================================= */
.cp-field:has(.cp-course-picker) {
  overflow: visible;
}
.cp-course-picker {
  --cp-accent: #6366f1;
  position: relative;
}
.cp-course-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-course-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-accent);
  font-size: 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 1;
}
.cp-course-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.cp-course-search:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 15%, transparent);
}
.cp-course-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color .2s;
}
.cp-course-trigger:hover { border-color: var(--cp-accent); }
.cp-course-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-course-trigger-arrow { font-size: 18px; color: var(--cp-accent); transition: transform .25s; }
.cp-course-trigger-arrow.cp-course-arrow-up { transform: rotate(180deg); }
.cp-course-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid var(--cp-accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 100;
  overflow: hidden;
}
.cp-course-dd-search-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.cp-course-dd-search-wrap .cp-course-search-icon { left: 18px; }
.cp-course-dd-search-wrap .cp-course-search { border-width: 1px; padding: 8px 10px 8px 36px; border-radius: 8px; }
.cp-course-results {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.cp-course-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  border-bottom: 1px solid #f3f4f6;
  animation: cp-emp-item-in .2s ease both;
}
.cp-course-result-item:last-child { border-bottom: none; }
.cp-course-result-item:hover,
.cp-course-result-item.cp-course-hl { background: color-mix(in srgb, var(--cp-accent) 6%, #fff); }
.cp-course-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cp-accent);
}
.cp-course-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cp-course-meta { font-size: 12px; color: #6b7280; }
.cp-course-meta .cp-lms-badge { margin-right: 4px; }
.cp-course-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-course-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 13px;
  animation: cp-emp-chcp-in .25s ease both;
}
.cp-course-chip:hover { border-color: color-mix(in srgb, var(--cp-accent) 30%, transparent); }
.cp-course-remove { cursor: pointer; color: #9ca3af; font-size: 16px; transition: color .15s; }
.cp-course-remove:hover { color: #ef4444; }
.cp-course-inline { font-size: 13px; color: #374151; }
.cp-course-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: #9ca3af; font-size: 13px; text-align: center; }
.cp-course-empty .dashicons { font-size: 28px; width: 28px; height: 28px; opacity: .4; color: var(--cp-accent); }
.cp-course-skeleton { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f3f4f6; }
.cp-course-skel-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: ipEmpShimmer 1.4s ease infinite; }
.cp-course-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cp-course-skel-line { height: 10px; border-radius: 4px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: ipEmpShimmer 1.4s ease infinite; }
.cp-course-skel-name { width: 55%; height: 12px; }

/* Card Grid */
.cp-course-picker--card_grid .cp-course-results {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px 0;
  max-height: none;
  overflow: visible;
}
.cp-course-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  animation: cp-emp-item-in .25s ease both;
}
.cp-course-card-item:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 40%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cp-accent) 12%, transparent);
  transform: translateY(-2px);
}
.cp-course-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #fff;
  transition: background .2s, transform .2s;
}
.cp-course-card-selected { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 4%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 12%, transparent); }
.cp-course-card-selected .cp-course-card-check { background: var(--cp-accent); transform: scale(1.1); }
.cp-course-card-item .cp-course-icon { font-size: 24px; width: 24px; height: 24px; }

/* =========================================================================
   Document Picker
   ========================================================================= */
.cp-field:has(.cp-doc-picker) { overflow: visible; }
.cp-doc-picker { --dr-accent: #6366f1; position: relative; }
.cp-doc-search-wrap { position: relative; display: flex; align-items: center; }
.cp-doc-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dr-accent); font-size: 16px; width: 16px; height: 16px; pointer-events: none; z-index: 1; }
.cp-doc-search { width: 100%; padding: 10px 12px 10px 38px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; outline: none; background: #fff; transition: border-color .2s, box-shadow .2s; }
.cp-doc-search:focus { border-color: var(--dr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-accent) 15%, transparent); }
.cp-doc-trigger { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; min-height: 44px; }
.cp-doc-trigger:hover { border-color: var(--dr-accent); }
.cp-doc-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-doc-trigger-arrow { color: var(--dr-accent); transition: transform .25s ease; }
.cp-doc-trigger-arrow.cp-doc-arrow-up { transform: rotate(180deg); }
.cp-doc-dropdown-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06); z-index: 120; overflow: hidden; }
.cp-doc-dropdown-panel .cp-doc-search-wrap { padding: 8px; border-bottom: 1px solid #f3f4f6; }
.cp-doc-dropdown-panel .cp-doc-search { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px 8px 36px; }
.cp-doc-dept-tabs { display: flex; gap: 6px; padding: 8px 0 4px; overflow-x: auto; scrollbar-width: thin; }
.cp-doc-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; background: #f3f4f6; color: #6b7280; border: 1px solid transparent; transition: all .2s; }
.cp-doc-tab:hover { background: #e5e7eb; }
.cp-doc-tab-active { background: var(--dr-accent); color: #fff; border-color: var(--dr-accent); }
.cp-doc-tab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cp-doc-tab-active .cp-doc-tab-dot { background: #fff !important; }
.cp-doc-results { position: absolute; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06); z-index: 100; display: none; scrollbar-width: thin; }
.cp-doc-results.cp-doc-open { display: block; }
.cp-doc-picker--card_grid .cp-doc-results { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: none; box-shadow: none; border-radius: 10px; margin-top: 8px; }
.cp-doc-picker--card_grid .cp-doc-results.cp-doc-open { display: grid; }
.cp-doc-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: background .15s; }
.cp-doc-result-item:last-child { border-bottom: none; }
.cp-doc-result-item:hover { background: color-mix(in srgb, var(--dr-accent) 6%, #fff); }
.cp-doc-card-item { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; cursor: pointer; position: relative; display: flex; gap: 8px; align-items: flex-start; background: #fff; transition: all .15s; }
.cp-doc-card-item:hover { border-color: #d1d5db; transform: translateY(-1px); }
.cp-doc-card-selected { border-color: var(--dr-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dr-accent) 18%, transparent); }
.cp-doc-card-check { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--dr-accent); color: #fff; display: none; align-items: center; justify-content: center; }
.cp-doc-card-selected .cp-doc-card-check { display: inline-flex; }
.cp-doc-card-check .dashicons { font-size: 12px; width: 12px; height: 12px; }
.cp-doc-icon { color: #9ca3af; font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.cp-doc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cp-doc-info strong { font-size: 14px; color: #1f2937; }
.cp-doc-meta { font-size: 12px; color: #6b7280; }
.cp-doc-empty { padding: 18px; text-align: center; color: #9ca3af; font-size: 13px; }
.cp-doc-empty .dashicons { font-size: 20px; width: 20px; height: 20px; margin-bottom: 6px; opacity: .6; }
.cp-doc-skeleton { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f3f4f6; }
.cp-doc-skel-icon { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: cp-doc-shimmer 1.4s ease infinite; flex-shrink: 0; }
.cp-doc-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cp-doc-skel-line { border-radius: 4px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: cp-doc-shimmer 1.4s ease infinite; }
.cp-doc-skel-name { width: 62%; height: 12px; }
.cp-doc-skel-meta { width: 46%; height: 10px; }
@keyframes cp-doc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cp-doc-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cp-doc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; background: #eef2ff; color: #374151; font-size: 12px; border: 1px solid #dbe3ff; }
.cp-doc-chcp-icon { color: #6b7280; font-size: 13px; width: 13px; height: 13px; }
.cp-doc-remove { margin-left: 2px; cursor: pointer; color: #6b7280; font-size: 14px; line-height: 1; }
.cp-doc-remove:hover { color: #111827; }
.cp-doc-sel-card { display: flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 8px 10px; }
.cp-doc-sel-info { min-width: 0; }
.cp-doc-inline { color: #6b7280; font-size: 13px; }

/* Save & Continue — resume invalid + resume banner */
.cp-form-resume-invalid-wrap { max-width: 560px; margin: 24px auto; padding: 0 16px; }
.cp-form-resume-invalid {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
}
.cp-form-resume-invalid .dashicons { font-size: 36px; width: 36px; height: 36px; color: #d97706; margin-bottom: 12px; }
.cp-form-resume-invalid__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #111827; }
.cp-form-resume-invalid__text { margin: 0 0 16px; color: #4b5563; font-size: 15px; line-height: 1.5; }
.cp-form-resume-invalid__actions { margin: 0; }
.cp-partial-resume-banner {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 14px;
  color: #166534;
}
.cp-partial-resume-banner__lead { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-partial-resume-expires { margin: 0; font-size: 13px; color: #374151; }
.cp-partial-email-wrap { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-partial-email-input {
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}
.cp-form-partial-feedback:not([hidden]) {
  margin-top: 10px;
  font-size: 14px;
  color: #059669;
  font-weight: 600;
}