/* Engagement cards — storefront shortcodes (theme-isolated, mobile + desktop) */

.dcp-engage-root,
.dcp-engage-root *,
.dcp-engage-root *::before,
.dcp-engage-root *::after {
  box-sizing: border-box;
}

.dcp-engage-root {
  --dcp-engage-primary: var(--dc-color-primary, #1e4d44);
  --dcp-engage-primary-dark: var(--dc-color-primary-dark, #143a33);
  --dcp-engage-accent: var(--dc-color-accent, #c77b5c);
  --dcp-engage-accent-dark: var(--dc-color-accent-dark, #a86548);
  --dcp-engage-cream: var(--dc-color-light, #f7f4ef);
  --dcp-engage-cream-deep: var(--dc-color-surface, #efe8dc);
  --dcp-engage-ink: var(--dc-color-text, #1d2420);
  --dcp-engage-muted: var(--dc-color-muted, #6b7a73);
  --dcp-engage-border: var(--dc-color-border, #e2e8e4);
  --dcp-engage-success: var(--dc-color-success, #3f7a52);
  --dcp-engage-success-soft: #e8f4ec;
  --dcp-engage-warn: var(--dc-color-warning, #b5672f);
  --dcp-engage-warn-soft: #fdf3ec;
  --dcp-engage-radius: var(--dc-radius-md, 16px);
  --dcp-engage-radius-sm: var(--dc-radius-sm, 12px);
  --dcp-engage-shadow: 0 12px 32px rgba(20, 40, 33, 0.08);
  font-family: var(--dc-font-body, var(--dc-font-family, inherit));
  color: var(--dcp-engage-ink);
  line-height: 1.7;
  max-width: 100%;
  width: 100%;
}

.dcp-engage-root,
.dcp-engage-root * {
  font-family: var(--dc-font-body, var(--dc-font-family, inherit));
}

.dcp-engage-root h1,
.dcp-engage-root h2,
.dcp-engage-root h3,
.dcp-engage-root h4,
.dcp-engage-root p,
.dcp-engage-root strong,
.dcp-engage-root span,
.dcp-engage-root li {
  text-transform: none;
  letter-spacing: normal;
}

.dcp-engage-fit-card a,
.dcp-engage-consult-card a,
.dcp-engage-routine-card a {
  text-decoration: none;
}

.dcp-engage-ico-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.dcp-engage-reason-mark .dcp-engage-ico-svg {
  width: 15px;
  height: 15px;
}

/* Shared card head */
.dcp-engage-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 48%),
    var(--dcp-engage-primary);
  color: #fff;
}

.dcp-engage-card-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dcp-engage-card-ico .dcp-engage-ico-svg {
  width: 18px;
  height: 18px;
}

.dcp-engage-card-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  font-family: var(--dc-font-heading, var(--dc-font-family, inherit));
}

/* Buttons */
.dcp-engage-root .dcp-engage-btn,
.dcp-engage-root .dcp-engage-btn:visited {
  color: #fff !important;
  background: var(--dcp-engage-primary) !important;
}

.dcp-engage-root .dcp-engage-btn-accent,
.dcp-engage-root .dcp-engage-btn-accent:visited {
  color: #fff !important;
  background: var(--dcp-engage-accent) !important;
}

.dcp-engage-root .dcp-engage-btn:hover,
.dcp-engage-root .dcp-engage-btn:focus,
.dcp-engage-root .dcp-engage-btn:active,
.dcp-engage-root .dcp-engage-btn:visited {
  text-decoration: none;
}

.dcp-engage-root .dcp-engage-btn:hover,
.dcp-engage-root .dcp-engage-btn:focus {
  color: #fff !important;
  background: var(--dcp-engage-primary-dark) !important;
}

.dcp-engage-root .dcp-engage-btn-accent:hover,
.dcp-engage-root .dcp-engage-btn-accent:focus {
  color: #fff !important;
  background: var(--dcp-engage-accent-dark) !important;
}

.dcp-engage-root .dcp-engage-btn-outline,
.dcp-engage-root .dcp-engage-btn-outline:visited {
  color: var(--dcp-engage-ink) !important;
  background: #fff !important;
}

.dcp-engage-root .dcp-engage-btn-outline:hover,
.dcp-engage-root .dcp-engage-btn-outline:focus {
  color: var(--dcp-engage-ink) !important;
  background: var(--dcp-engage-cream) !important;
}

.dcp-engage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  text-align: center;
  background: var(--dcp-engage-primary);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  border: none;
  cursor: pointer;
  font-family: var(--dc-font-button, var(--dc-font-family, inherit));
  transition: background 0.15s ease, transform 0.12s ease;
}

.dcp-engage-btn-accent {
  background: var(--dcp-engage-accent);
}

.dcp-engage-btn-outline {
  background: #fff;
  border: 1.5px solid var(--dcp-engage-border);
  color: var(--dcp-engage-ink);
}

.dcp-engage-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dcp-engage-btn + .dcp-engage-btn,
.dcp-engage-actions .dcp-engage-btn + .dcp-engage-btn {
  margin-top: 0;
}

.dcp-engage-fit-body > .dcp-engage-btn + .dcp-engage-btn,
.dcp-engage-fit-body > .dcp-engage-btn + a.dcp-engage-btn,
.dcp-engage-fit-body > a.dcp-engage-btn + a.dcp-engage-btn,
.dcp-engage-fit-body > .dcp-routine-add-root + a.dcp-engage-btn,
.dcp-engage-fit-body > button.dcp-engage-btn + a.dcp-engage-btn {
  margin-top: 8px;
}

/* ── Product fit + routine shells ── */

.dcp-engage-fit-card,
.dcp-engage-routine-card,
.dcp-engage-consult-card {
  border: 1px solid var(--dcp-engage-border);
  border-radius: var(--dcp-engage-radius);
  box-shadow: var(--dcp-engage-shadow);
  overflow: hidden;
  background: #fff;
  width: 100%;
}

.dcp-engage-fit-body {
  padding: 16px;
  background: #fff;
}

.dcp-engage-preview-locked {
  position: relative;
  border-radius: var(--dcp-engage-radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}

.dcp-engage-preview-content {
  filter: blur(3.2px);
  pointer-events: none;
  user-select: none;
}

.dcp-engage-lock-overlay,
.dcp-engage-blur-lock {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.dcp-engage-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dcp-engage-ink);
  background: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--dcp-engage-border);
  box-shadow: 0 6px 18px rgba(20, 40, 33, 0.08);
}

.dcp-engage-lock-ico {
  display: flex;
  color: var(--dcp-engage-primary);
}

.dcp-engage-lock-ico .dcp-engage-ico-svg {
  width: 14px;
  height: 14px;
}

.dcp-engage-guest-msg {
  font-size: 13px;
  color: var(--dcp-engage-muted);
  margin: 0 0 14px;
}

.dcp-engage-guest-msg strong {
  display: block;
  color: var(--dcp-engage-ink);
  margin-bottom: 4px;
  font-size: 13.5px;
}

.dcp-engage-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dcp-engage-primary-dark);
  background: var(--dcp-engage-cream);
  border: 1px solid var(--dcp-engage-border);
  padding: 6px 11px;
  border-radius: 999px;
  margin: 0 0 12px;
}

.dcp-engage-muted {
  font-size: 13px;
  color: var(--dcp-engage-muted);
  margin: 0 0 4px;
}

.dcp-engage-muted-sm {
  font-size: 12.5px;
  margin: 0 0 14px;
}

.dcp-engage-progress-track {
  height: 8px;
  border-radius: 99px;
  background: var(--dcp-engage-cream-deep);
  overflow: hidden;
  margin: 8px 0 12px;
}

.dcp-engage-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dcp-engage-accent), var(--dcp-engage-primary));
  width: 0;
  border-radius: inherit;
  transition: width 0.35s ease;
}

.dcp-engage-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--dcp-engage-radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.dcp-engage-verdict.is-match {
  background: var(--dcp-engage-success-soft);
  border: 1px solid #c9e3d1;
}

.dcp-engage-verdict.is-blocked {
  background: var(--dcp-engage-warn-soft);
  border: 1px solid #f0dcc8;
}

.dcp-engage-verdict.is-low {
  background: var(--dcp-engage-warn-soft);
  border: 1px solid #f0dcc8;
}

.dcp-engage-verdict.is-moderate {
  background: var(--dcp-engage-success-soft);
  border: 1px solid #d5e0c8;
}

.dcp-engage-verdict-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.dcp-engage-verdict.is-match .dcp-engage-verdict-ico {
  color: var(--dcp-engage-success);
}

.dcp-engage-verdict.is-blocked .dcp-engage-verdict-ico {
  color: var(--dcp-engage-warn);
}

.dcp-engage-verdict strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.dcp-engage-verdict.is-match strong {
  color: var(--dcp-engage-success);
}

.dcp-engage-verdict.is-blocked strong {
  color: var(--dcp-engage-warn);
}

.dcp-engage-verdict-sub {
  display: block;
  font-size: 12px;
  color: var(--dcp-engage-muted);
  margin-top: 3px;
}

/* Fit score ring */
.dcp-engage-score {
  --dcp-score: 0;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle closest-side, #fff 72%, transparent 73%),
    conic-gradient(var(--dcp-engage-success) calc(var(--dcp-score) * 1%), #d7e8dc 0);
  box-shadow: inset 0 0 0 1px rgba(63, 122, 82, 0.12);
}

.dcp-engage-score-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--dcp-engage-success);
  line-height: 1;
}

.dcp-engage-reason-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dcp-engage-reason-list li {
  font-size: 12.5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--dcp-engage-ink);
  line-height: 1.55;
}

.dcp-engage-reason-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dcp-engage-success);
  font-weight: 800;
}

.dcp-engage-fit-card[data-state="blocked"] .dcp-engage-reason-mark {
  color: var(--dcp-engage-warn);
}

/* ── Routine add ── */

.dcp-engage-routine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.dcp-engage-routine-chips .dcp-engage-profile-chip {
  margin-bottom: 0;
}

.dcp-engage-routine-card .dcp-engage-lead,
.dcp-engage-lead {
  font-size: 13px;
  color: var(--dcp-engage-muted);
  margin: 0 0 14px;
  line-height: 1.7;
}

.dcp-engage-routine-status {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--dcp-engage-success);
  text-align: center;
}

.dcp-engage-routine-status.is-error {
  color: var(--dcp-engage-warn);
}

.dcp-engage-routine-status a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.dcp-engage-root .dcp-routine-add-btn:disabled {
  opacity: 0.75;
  cursor: wait;
}

/* ── Consultant card ── */

.dcp-engage-consult-top {
  position: relative;
  background:
    linear-gradient(145deg, var(--dcp-engage-cream) 0%, #fff 70%);
  padding: 18px 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--dcp-engage-border);
}

.dcp-engage-consult-badge {
  margin-inline-start: auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dcp-engage-primary);
  background: rgba(30, 77, 68, 0.08);
  flex-shrink: 0;
}

.dcp-engage-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dcp-engage-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(20, 40, 33, 0.14);
}

.dcp-engage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dcp-engage-consult-meta {
  min-width: 0;
  flex: 1;
}

.dcp-engage-consult-name {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1.35;
}

.dcp-engage-consult-role {
  font-size: 12px;
  color: var(--dcp-engage-muted);
}

.dcp-engage-online-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dcp-engage-success);
  margin-top: 6px;
}

.dcp-engage-online-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dcp-engage-success);
  box-shadow: 0 0 0 3px rgba(63, 122, 82, 0.18);
}

.dcp-engage-consult-body {
  padding: 16px;
}

.dcp-engage-blur-wrap {
  position: relative;
  margin-bottom: 14px;
}

.dcp-engage-sample-msg {
  background: var(--dcp-engage-cream);
  border: 1px solid var(--dcp-engage-border);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--dcp-engage-ink);
  line-height: 1.7;
}

.dcp-engage-sample-msg.is-blurred {
  filter: blur(2.6px);
  user-select: none;
}

.dcp-engage-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dcp-engage-border);
  gap: 8px;
}

.dcp-engage-stat {
  text-align: center;
  min-width: 0;
  padding: 0 4px;
}

.dcp-engage-stat strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--dcp-engage-primary-dark);
  line-height: 1.2;
}

.dcp-engage-stat span {
  display: block;
  font-size: 10.5px;
  color: var(--dcp-engage-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* ── Responsive ── */

@media (max-width: 600px) {
  .dcp-engage-card-head {
    padding: 13px 14px;
    gap: 10px;
  }

  .dcp-engage-card-title {
    font-size: 13.5px;
  }

  .dcp-engage-fit-body,
  .dcp-engage-consult-body {
    padding: 14px;
  }

  .dcp-engage-consult-top {
    padding: 16px 14px 14px;
  }

  .dcp-engage-consult-badge {
    display: none;
  }

  .dcp-engage-avatar {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .dcp-engage-score {
    width: 48px;
    height: 48px;
  }

  .dcp-engage-stat-row {
    gap: 4px;
  }

  .dcp-engage-stat strong {
    font-size: 13px;
  }

  .dcp-engage-stat span {
    font-size: 10px;
  }
}

@media (min-width: 901px) {
  .dcp-engage-fit-body,
  .dcp-engage-consult-body {
    padding: 18px 20px 20px;
  }

  .dcp-engage-card-head {
    padding: 15px 18px;
  }

  .dcp-engage-card-title {
    font-size: 14.5px;
  }

  .dcp-engage-consult-top {
    padding: 20px 20px 16px;
  }

  .dcp-engage-btn {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcp-engage-btn,
  .dcp-engage-progress-fill {
    transition: none;
  }
}