/*
 * tour.css — оформлення вступного інтерактивного туру (Shepherd.js) під бренд NMTpro.
 * Усі кольори беруться з --nmt-* змінних (styles.css), тому темна/контрастна теми
 * підхоплюються автоматично без окремих правил.
 */

/* ── Привітальна модалка ─────────────────────────────────────────────── */
.tour-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  animation: tourFade 0.18s ease;
}
.tour-welcome-card {
  background: var(--nmt-surface, #fff);
  color: var(--nmt-text, #1e293b);
  border: 1px solid var(--nmt-border, #e2e8f0);
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: 30px 28px 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  text-align: center;
  animation: tourPop 0.22s cubic-bezier(0.18, 0.9, 0.32, 1.2);
}
.tour-welcome-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 10px;
}
.tour-welcome-card h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  color: var(--nmt-text, #0f172a);
}
.tour-welcome-card p {
  margin: 0 0 22px;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--nmt-text-muted, #64748b);
}
.tour-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tour-btn {
  font: inherit;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}
.tour-btn:active { transform: translateY(1px); }
.tour-btn-primary {
  background: var(--nmt-primary, #0f766e);
  color: #fff;
}
.tour-btn-primary:hover { filter: brightness(1.08); }
.tour-btn-ghost {
  background: transparent;
  color: var(--nmt-text-muted, #64748b);
  border-color: var(--nmt-border, #e2e8f0);
}
.tour-btn-ghost:hover { background: rgba(100, 116, 139, 0.08); }

/* ── Shepherd popover під бренд ───────────────────────────────────────── */
.shepherd-element {
  background: var(--nmt-surface, #fff);
  border: 1px solid var(--nmt-border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  max-width: 360px;
  font-family: inherit;
  /* Попап має бути ВИЩЕ заслонки (.shepherd-modal-overlay-container: 10050),
     інакше оверлей перехоплює кліки по кнопках «Далі/Назад». */
  z-index: 10110;
}
.shepherd-arrow::before {
  background: var(--nmt-surface, #fff);
  border: 1px solid var(--nmt-border, #e2e8f0);
}
.shepherd-element[data-popper-placement^="top"] .shepherd-arrow::before { border-top: none; border-left: none; }
.shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow::before { border-bottom: none; border-right: none; }
.shepherd-element[data-popper-placement^="left"] .shepherd-arrow::before { border-bottom: none; border-left: none; }
.shepherd-element[data-popper-placement^="right"] .shepherd-arrow::before { border-top: none; border-right: none; }

.shepherd-header {
  background: transparent !important;
  padding: 16px 18px 0 !important;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
}
.shepherd-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--nmt-text, #0f172a);
}
.shepherd-text {
  padding: 8px 18px 4px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--nmt-text-muted, #475569);
}
.shepherd-cancel-icon {
  color: var(--nmt-text-muted, #94a3b8);
  font-size: 1.5rem;
  transition: color 0.15s;
}
.shepherd-cancel-icon:hover { color: var(--nmt-text, #0f172a); }

.shepherd-footer {
  padding: 10px 18px 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shepherd-footer .shepherd-button {
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 10px;
  padding: 9px 16px;
  margin: 0;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.shepherd-button.tour-next {
  background: var(--nmt-primary, #0f766e);
  color: #fff;
  margin-left: auto;
}
.shepherd-button.tour-next:hover { filter: brightness(1.08); }
.shepherd-button.tour-back {
  background: transparent;
  color: var(--nmt-text, #334155);
  border-color: var(--nmt-border, #e2e8f0);
}
.shepherd-button.tour-back:hover { background: rgba(100, 116, 139, 0.08); }
.shepherd-button.tour-skip {
  background: transparent;
  color: var(--nmt-text-muted, #94a3b8);
  padding-left: 4px;
  padding-right: 8px;
}
.shepherd-button.tour-skip:hover { color: var(--nmt-text, #334155); text-decoration: underline; }

/* Лічильник кроків «3 / 8» */
.tour-progress {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nmt-text-muted, #94a3b8);
  letter-spacing: 0.02em;
  padding: 0 18px 12px;
}

/* Підсвічування цільового елемента (доповнює модальну заслонку Shepherd).
   Вище заслонки (10050), але нижче попапа (10110): і кільце видно, і елемент
   лишається клікабельним крізь виріз в оверлеї. */
.shepherd-enabled.shepherd-target,
.tour-highlight {
  position: relative;
  z-index: 10060;
  box-shadow: 0 0 0 3px var(--nmt-primary, #0f766e), 0 0 0 8px rgba(15, 118, 110, 0.18);
  border-radius: 12px;
}

.shepherd-modal-overlay-container {
  z-index: 10050;
}

@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourPop { from { opacity: 0; transform: scale(0.94) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (max-width: 480px) {
  .shepherd-element { max-width: calc(100vw - 28px); }
  .tour-welcome-card { padding: 26px 20px 20px; }
}