/* LocSeg — tour Intro.js alinhado à marca (verde + branco, botões redondos) */
.introjs-overlay {
  z-index: 100600 !important;
  background: color-mix(in srgb, #0f172a, transparent 35%) !important;
}

.introjs-helperLayer,
.introjs-tooltipReferenceLayer,
.introjs-disableInteraction {
  z-index: 100601 !important;
}

.locsegIntroTooltip {
  min-width: 17.5rem;
  max-width: min(100vw - 2rem, 25rem);
}

/* Cartão principal — branco, borda e sombra com tom da marca */
.introjs-tooltip.locsegIntroTooltip {
  box-sizing: border-box !important;
  overflow: visible;
  background: #ffffff !important;
  color: #1f2937;
  border: 1px solid color-mix(in srgb, var(--accent-color, #00a859), transparent 70%) !important;
  border-radius: 1rem;
  box-shadow:
    0 4px 6px -1px color-mix(in srgb, var(--accent-color, #00a859), transparent 88%),
    0 16px 40px -8px color-mix(in srgb, var(--accent-color, #00a859), transparent 80%),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  font-family: var(--default-font, "Roboto", system-ui, sans-serif);
}

.introjs-tooltip.locsegIntroTooltip .introjs-tooltip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 1rem 1.1rem 0.35rem;
  background: linear-gradient(180deg, var(--accent-subtle, #ecfdf5) 0%, #ffffff 100%);
  border-radius: 1rem 1rem 0 0;
}

.introjs-tooltip.locsegIntroTooltip .introjs-tooltip-title {
  width: auto !important;
  flex: 1;
  min-width: 0;
  padding-right: 0.25rem;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: color-mix(in srgb, var(--accent-color, #00a859), #0a1628 50%);
  letter-spacing: -0.02em;
}

/* Pular — pill secundária (branco com borda verde suave) */
.introjs-tooltip.locsegIntroTooltip a.introjs-skipbutton,
.introjs-tooltip.locsegIntroTooltip .introjs-skipbutton {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 3.25rem;
  height: auto !important;
  line-height: 1.3 !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--accent-color, #00a859), transparent 35%);
  background: #fff;
  color: var(--accent-color, #00a859);
  text-shadow: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-color, #00a859), transparent 90%);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.introjs-tooltip.locsegIntroTooltip .introjs-skipbutton:hover {
  background: var(--accent-subtle, #ecfdf5);
  color: var(--accent-hover, #008a49);
  border-color: var(--accent-color, #00a859);
}

.introjs-tooltip.locsegIntroTooltip .introjs-tooltiptext {
  padding: 0.35rem 1.1rem 0.85rem;
  clear: both;
  box-sizing: border-box;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4b5563;
}

.introjs-tooltip.locsegIntroTooltip .introjs-tooltiptext p {
  margin: 0 0 0.4rem;
}
.introjs-tooltip.locsegIntroTooltip .introjs-tooltiptext p:last-child {
  margin-bottom: 0;
}

/* Rodapé com botões */
.introjs-tooltip.locsegIntroTooltip .introjs-tooltipbuttons {
  box-sizing: border-box;
  white-space: normal;
  text-align: right;
  border-top: 1px solid color-mix(in srgb, var(--accent-color, #00a859), transparent 85%);
  padding: 0.75rem 1rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  background: #fafefa;
  border-radius: 0 0 1rem 1rem;
}

/* Setas (highlight) alinhadas ao branco + borda clara do tooltip */
.introjs-tooltip.locsegIntroTooltip + .introjs-arrow,
.introjs-tooltip.locsegIntroTooltip .introjs-arrow {
  /* setas irmãs: intro costuma pôr fora; filtro geral abaixo */
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--accent-color, #00a859), transparent 75%));
}

/* Botões Anterior / Próximo / Concluir — pílulas */
.introjs-tooltip.locsegIntroTooltip a.introjs-button,
.introjs-tooltip.locsegIntroTooltip .introjs-button {
  box-sizing: border-box;
  white-space: nowrap;
  text-shadow: none;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  border-width: 1.5px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  zoom: 1;
}

/* Anterior = branco, borda verde */
.introjs-tooltip.locsegIntroTooltip a.introjs-prevbutton,
.introjs-tooltip.locsegIntroTooltip .introjs-prevbutton {
  float: none !important;
  background: #ffffff !important;
  color: var(--accent-color, #00a859) !important;
  border-color: color-mix(in srgb, var(--accent-color, #00a859), transparent 25%) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-color, #00a859), transparent 92%);
}

.introjs-tooltip.locsegIntroTooltip a.introjs-prevbutton:hover,
.introjs-tooltip.locsegIntroTooltip .introjs-prevbutton:hover {
  background: var(--accent-subtle, #ecfdf5) !important;
  color: var(--accent-hover, #008a49) !important;
  border-color: var(--accent-color, #00a859) !important;
}

/* Próximo e Concluir = verde preenchido */
.introjs-tooltip.locsegIntroTooltip a.introjs-nextbutton,
.introjs-tooltip.locsegIntroTooltip .introjs-nextbutton {
  float: none !important;
  background: var(--accent-color, #00a859) !important;
  color: #ffffff !important;
  border-color: var(--accent-color, #00a859) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color, #00a859), transparent 50%);
}

.introjs-tooltip.locsegIntroTooltip a.introjs-nextbutton:hover,
.introjs-tooltip.locsegIntroTooltip .introjs-nextbutton:hover {
  background: var(--accent-hover, #008a49) !important;
  color: #ffffff !important;
  border-color: var(--accent-hover, #008a49) !important;
}

/* Desabilitado */
.introjs-tooltip.locsegIntroTooltip .introjs-button.introjs-disabled,
.introjs-tooltip.locsegIntroTooltip a.introjs-button.introjs-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Bullets — pílula ativa em verde */
.introjs-tooltip.locsegIntroTooltip .introjs-bullets {
  padding: 0.4rem 0.75rem 0.2rem;
}
.introjs-tooltip.locsegIntroTooltip .introjs-bullets ul li a {
  background: #d1d5db;
  width: 7px;
  height: 7px;
}
.introjs-tooltip.locsegIntroTooltip .introjs-bullets ul li a.active {
  background: var(--accent-color, #00a859) !important;
  width: 1.1rem;
}

/* Seta do tooltip (triângulo) — borda clara padrão; alinhamos ao verde suave */
.introjs-arrow.top,
.introjs-arrow.top-right,
.introjs-arrow.top-middle {
  border-bottom-color: #fff !important;
  filter: drop-shadow(0 -1px 0 color-mix(in srgb, var(--accent-color, #00a859), transparent 80%));
}
.introjs-arrow.right,
.introjs-arrow.right-bottom {
  border-left-color: #fff !important;
}
.introjs-arrow.bottom,
.introjs-arrow.bottom-right,
.introjs-arrow.bottom-middle {
  border-top-color: #fff !important;
}
.introjs-arrow.left,
.introjs-arrow.left-bottom {
  border-right-color: #fff !important;
}

/* ----- Tema escuro ----- */
html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip {
  background: #1e293b !important;
  color: #e5e7eb;
  border: 1px solid color-mix(in srgb, var(--accent-color, #34d399), transparent 50%) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent-color, #34d399), transparent 60%);
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltip-header,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltip-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color, #34d399), #1e293b 88%) 0%, #1e293b 100%);
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltip-title,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltip-title {
  color: #ecfdf5;
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltiptext,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltiptext {
  color: #cbd5e1;
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-skipbutton,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-skipbutton,
html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-skipbutton,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-skipbutton {
  background: #334155;
  color: #ecfdf5;
  border-color: color-mix(in srgb, var(--accent-color, #34d399), transparent 40%);
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-skipbutton:hover,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-skipbutton:hover {
  background: #475569;
  color: #fff;
  border-color: var(--accent-color, #34d399);
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltipbuttons,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip .introjs-tooltipbuttons {
  background: #172033;
  border-top-color: color-mix(in srgb, var(--accent-color, #34d399), transparent 60%);
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-prevbutton,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-prevbutton {
  background: #1e293b !important;
  color: #a7f3d0 !important;
  border-color: color-mix(in srgb, var(--accent-color, #34d399), transparent 30%) !important;
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-prevbutton:hover,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-prevbutton:hover {
  background: #334155 !important;
  color: #ecfdf5 !important;
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-nextbutton,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-nextbutton {
  background: var(--accent-color, #34d399) !important;
  color: #0f172a !important;
  border-color: var(--accent-color, #34d399) !important;
}

html[data-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-nextbutton:hover,
html[data-bs-theme="dark"] .introjs-tooltip.locsegIntroTooltip a.introjs-nextbutton:hover {
  background: var(--accent-hover, #6ee7b7) !important;
  color: #0f172a !important;
  border-color: var(--accent-hover, #6ee7b7) !important;
}

html[data-theme="dark"] .introjs-bullets ul li a,
html[data-bs-theme="dark"] .introjs-bullets ul li a {
  background: #4b5563;
}
html[data-theme="dark"] .introjs-bullets ul li a.active,
html[data-bs-theme="dark"] .introjs-bullets ul li a.active {
  background: var(--accent-color, #34d399) !important;
}

html[data-theme="dark"] .introjs-arrow.top,
html[data-theme="dark"] .introjs-arrow.top-right,
html[data-theme="dark"] .introjs-arrow.top-middle,
html[data-bs-theme="dark"] .introjs-arrow.top,
html[data-bs-theme="dark"] .introjs-arrow.top-right,
html[data-bs-theme="dark"] .introjs-arrow.top-middle {
  border-bottom-color: #1e293b !important;
}
html[data-theme="dark"] .introjs-arrow.right,
html[data-theme="dark"] .introjs-arrow.right-bottom,
html[data-bs-theme="dark"] .introjs-arrow.right,
html[data-bs-theme="dark"] .introjs-arrow.right-bottom {
  border-left-color: #1e293b !important;
}
html[data-theme="dark"] .introjs-arrow.bottom,
html[data-theme="dark"] .introjs-arrow.bottom-right,
html[data-theme="dark"] .introjs-arrow.bottom-middle,
html[data-bs-theme="dark"] .introjs-arrow.bottom,
html[data-bs-theme="dark"] .introjs-arrow.bottom-right,
html[data-bs-theme="dark"] .introjs-arrow.bottom-middle {
  border-top-color: #1e293b !important;
}
html[data-theme="dark"] .introjs-arrow.left,
html[data-theme="dark"] .introjs-arrow.left-bottom,
html[data-bs-theme="dark"] .introjs-arrow.left,
html[data-bs-theme="dark"] .introjs-arrow.left-bottom {
  border-right-color: #1e293b !important;
}