/* Mobile-first: design for 375px first, progressively enhance via min-width. */

.engage-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  max-width: 100%;
  box-sizing: border-box;
}

.engage-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.engage-tier-badge {
  background: var(--tier-color, #6c757d);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

.engage-xp { display: flex; align-items: baseline; gap: 0.25rem; }
.engage-xp__value { font-size: 1.5rem; font-weight: 700; color: #111; }
.engage-xp__label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }

.engage-panel__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.engage-stat {
  text-align: center;
  padding: 0.5rem;
  background: #f9fafb;
  border-radius: 0.375rem;
  min-width: 0;
}

.engage-stat__value { font-size: 1.125rem; font-weight: 600; }
.engage-stat__label { font-size: 0.75rem; color: #6b7280; margin-top: 0.125rem; }

.engage-progress {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 0.25rem;
}

.engage-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  border-radius: 999px;
}

.engage-progress__text { font-size: 0.75rem; color: #6b7280; }

.engage-milestone__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.engage-rank {
  background: #fef3c7;
  color: #92400e;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.engage-onboarding {
  background: #ecfdf5;
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
}

.engage-onboarding__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #065f46;
}

.engage-panel__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.engage-badge-chip {
  background: #f3f4f6;
  color: #374151;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.engage-panel__empty {
  text-align: center;
  padding: 1.5rem 0.75rem;
  color: #6b7280;
}

/* Funnel stage colours */
.engage-stat__value--cold       { color: #6b7280; }
.engage-stat__value--activated  { color: #3b82f6; }
.engage-stat__value--engaged    { color: #10b981; }
.engage-stat__value--power      { color: #f59e0b; }
.engage-stat__value--at-risk    { color: #ef4444; }
.engage-stat__value--churning   { color: #dc2626; }

/* Just-earned banner (booking confirmation page) */
.engage-just-earned {
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.engage-just-earned__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.engage-just-earned__sparkle { font-size: 1.5rem; }
.engage-just-earned__desc {
  font-size: 0.875rem;
  color: #92400e;
  margin-top: 0.125rem;
}

/* >= 480px: room to breathe */
@media (min-width: 480px) {
  .engage-panel { padding: 1.25rem; }
  .engage-xp__value { font-size: 1.75rem; }
}

/* >= 769px: tablets and up */
@media (min-width: 769px) {
  .engage-panel__row { gap: 0.75rem; }
  .engage-stat { padding: 0.75rem; }
  .engage-stat__value { font-size: 1.25rem; }
}