/* Skin OpenAI-style per i coachmark di onboarding (opt-in via [data-tg-theme="soft"]).
   Non tocca il look canonico di TabGuide: agisce solo quando il tema è attivo. */

.tg-tooltip[data-tg-theme="soft"],
.tg-welcome[data-tg-theme="soft"] {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.tg-tooltip[data-tg-theme="soft"] .tg-title,
.tg-welcome[data-tg-theme="soft"] .tg-title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.tg-tooltip[data-tg-theme="soft"] .tg-desc,
.tg-welcome[data-tg-theme="soft"] .tg-desc {
  color: #475569 !important;
  font-weight: 400 !important;
}

.tg-tooltip[data-tg-theme="soft"] .tg-btn,
.tg-welcome[data-tg-theme="soft"] .tg-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  transition: background .15s ease, border-color .15s ease, transform .1s ease !important;
}
/* Primary CTA = tg-btn-next (the "Avanti" / "Fine" / "Inizia" button) */
.tg-tooltip[data-tg-theme="soft"] .tg-btn-next,
.tg-welcome[data-tg-theme="soft"] .tg-btn-next {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
}
.tg-tooltip[data-tg-theme="soft"] .tg-btn:hover,
.tg-welcome[data-tg-theme="soft"] .tg-btn:hover {
  background: rgba(15, 23, 42, 0.04);
}

.tg-overlay[data-tg-theme="soft"] .tg-mask-fill { fill: rgba(15, 23, 42, 0.45) !important; }

.tg-tooltip[data-tg-theme="soft"]::after { border-color: #ffffff transparent transparent transparent; }

/* CTA "Guarda come si fa" iniettato dentro il coachmark soft da onboarding-coach.js (Task 8). */
.tg-tooltip[data-tg-theme="soft"] .tg-tutorial-cta,
.tg-welcome[data-tg-theme="soft"] .tg-tutorial-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid rgba(15,23,42,0.10);
  font-size: 13px; font-weight: 600; cursor: pointer; background: #f8fafc;
}
.tg-tooltip[data-tg-theme="soft"] .tg-tutorial-cta:hover,
.tg-welcome[data-tg-theme="soft"] .tg-tutorial-cta:hover { background: #f1f5f9; }

/* Mini-player overlay — tutorial video/content card (Task 8). */
.tg-tutorial-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center;
}
.tg-tutorial-card {
  background: #fff; border-radius: 16px; padding: 18px; width: min(560px, 92vw);
  box-shadow: 0 20px 60px rgba(15,23,42,0.25);
}
.tg-tutorial-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tg-tutorial-close { border: none; background: none; font-size: 22px; cursor: pointer; color: #64748b; }
.tg-tutorial-more { display: inline-block; margin-top: 12px; font-weight: 600; color: #0f172a; text-decoration: none; }