/* static/css/tour.css */

/* Theme knobs — adjust to your palette */
:root{
  --help-bg: #fdb833;     /* primary background (e.g., green) */
  --help-fg: #ffffff;     /* icon color */
  --help-ring: #FDB83359;
  --help-bg-hover: #E3AB02;
}

/* Make .btn-help look on-brand even with Bootstrap's .btn */
.btn.btn-help, .btn-help{
  position: relative; z-index: 10;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9999px;
  padding: 0; line-height: 1; font-weight: 800; font-size: 16px;
  background: var(--help-bg) !important;
  color: var(--help-fg) !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--help-ring);
  cursor: pointer; user-select: none;
}
.btn.btn-help:hover, .btn-help:hover{ background: var(--help-bg-hover) !important }
.btn.btn-help:focus, .btn-help:focus{
  outline: 2px solid var(--help-ring); outline-offset: 2px;
}

/* If your template has a dark header, add this optional variant */
.header-dark .btn-help{
  --help-bg:#facc15;      /* amber-400 */
  --help-fg:#111827;      /* near-black for contrast */
  --help-ring: rgba(250,204,21,.35);
  --help-bg-hover:#eab308;
}

/* Keep the polished Intro.js look */
.introjs-tooltip{
  border-radius:14px !important;
  box-shadow:0 14px 35px rgba(2,6,23,.14),0 3px 10px rgba(2,6,23,.06) !important;
  padding:12px 14px !important;
}
.introjs-tooltip-title{ font-weight:800 !important; margin-bottom:6px !important }
.introjs-button{ border-radius:10px !important; padding:6px 12px !important }