/* ═══════════════════════════════════════════════════════════════
   MINDBUBBLE — addictions.css
   Styles for the "Addiction Support" tab. Uses existing --mb-*
   tokens to match the app. STATUS: stage 2 — not linked in yet.
   ═══════════════════════════════════════════════════════════════ */

.ax-wrap { padding-bottom: 40px; }

/* internal tab bar */
.ax-tabs {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin: 4px 0 18px;
}
.ax-tab {
  flex: 1 1 auto; min-width: 92px;
  border: 1px solid var(--mb-border, #e4e0ec);
  background: var(--mb-surface, #fff);
  color: var(--mb-text, #555);
  border-radius: var(--mb-radius, 14px);
  padding: 11px 10px;
  font-size: 14px; font-weight: 700;
  font-family: var(--mb-font-ui, inherit);
  cursor: pointer;
  transition: all .15s;
}
.ax-tab:hover { border-color: var(--mb-lavender, #8b86c9); }
.ax-tab-on {
  background: var(--mb-lavender, #8b86c9);
  border-color: var(--mb-lavender, #8b86c9);
  color: #fff;
}
.ax-tab-icon { font-size: 16px; }

.ax-panel { animation: axFade .2s ease; }
@keyframes axFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ax-h2 {
  font-family: var(--mb-font-display, inherit);
  font-size: 22px; color: var(--mb-ink, #2a2740);
  margin: 2px 0 8px;
}
.ax-intro { color: var(--mb-text, #4a4760); font-size: 15px; line-height: 1.55; margin: 0 0 16px; }

/* urgent / crisis callout */
.ax-urgent {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--mb-coral-lt, #ffe9e4);
  border: 1px solid var(--mb-coral, #e8806f);
  border-radius: var(--mb-radius, 16px);
  padding: 13px 15px; margin-bottom: 18px;
}
.ax-urgent-icon { font-size: 17px; line-height: 1.4; }
.ax-urgent p { margin: 0; font-size: 14px; color: var(--mb-text, #4a4760); line-height: 1.5; }

.ax-block { margin-bottom: 20px; }
.ax-h3 {
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mb-muted, #8a86a0);
  margin: 0 0 10px;
}
.ax-list, .ax-steps { margin: 0; padding-left: 20px; }
.ax-list li, .ax-steps li {
  color: var(--mb-text, #4a4760); font-size: 14.5px; line-height: 1.5; margin-bottom: 7px;
}
.ax-group-body { color: var(--mb-text, #4a4760); font-size: 14px; line-height: 1.5; margin: 0 0 10px; }

/* service cards */
.ax-services { display: flex; flex-direction: column; gap: 10px; }
.ax-service {
  background: var(--mb-surface, #fff);
  border: 1px solid var(--mb-border, #e4e0ec);
  border-radius: var(--mb-radius, 14px);
  padding: 13px 14px;
}
.ax-service-name { font-weight: 700; color: var(--mb-ink, #2a2740); font-size: 15px; margin-bottom: 3px; }
.ax-service-note { font-size: 13.5px; color: var(--mb-text, #4a4760); line-height: 1.45; margin-bottom: 10px; }
.ax-service-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-act {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 11px; border-radius: 9px;
}
.ax-act-call { color: #fff; background: var(--mb-teal, #0a7c72); }
.ax-act-web  { color: var(--mb-lavender, #6b66b0); background: var(--mb-lav-lt, #eceaf8); }
.ax-act-sms  { color: var(--mb-muted, #8a86a0); background: var(--mb-subtle, #f1eff7); }
.ax-act-call:hover, .ax-act-web:hover { filter: brightness(.96); }

.ax-foot { margin-top: 20px; font-size: 12px; color: var(--mb-muted, #8a86a0); line-height: 1.5; }

[data-theme="dark"] .ax-tab,
[data-theme="dark"] .ax-service { background: var(--mb-surface, #1e1c2a); }