/*
 * ndevr-tour.css — styles for the QUAIL-guided onboarding tour (ndevr-tour.js).
 *
 * Defensive: this overlay can render on any WordPress/Elementor page, so the chrome is self-styled with
 * !important where the theme could otherwise leak in (fonts, button shapes, z-index, colors). Namespaced
 * under .ndevr-tour* so nothing here touches the host page.
 */

:root { --ndevr-tour-accent: #f2a900; }

/* Block background scrolling while the spotlight is up. */
html.ndevr-tour-noscroll, html.ndevr-tour-noscroll body { overflow: hidden !important; }

/* The overlay layer. The dim is produced by the ring's huge box-shadow (so the spotlight hole stays
   interactive); the overlay container itself doesn't capture clicks. */
.ndevr-tour {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Spotlight ring: a transparent box with a massive dark surround. pointer-events:none so the user can
   actually click the highlighted control underneath. */
.ndevr-tour-ring {
  position: fixed !important;
  border-radius: 10px !important;
  border: 2px solid var(--ndevr-tour-accent) !important;
  box-shadow: 0 0 0 99999px rgba(10, 12, 16, 0.62), 0 0 0 3px rgba(242, 169, 0, 0.35) !important;
  pointer-events: none !important;
  transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease !important;
  box-sizing: border-box !important;
}

/* Reveal a spotlighted file's action buttons during the tour (the library hides .owl-tile-acts until
   hover on desktop, which would leave the share-button spotlight pointing at empty space). */
.ndevr-forms .owl-tile-acts.ndevr-tour-show { opacity: 1 !important; }

/* The instruction card. */
.ndevr-tour-card {
  position: fixed !important;
  width: 360px !important;
  max-width: calc(100vw - 24px) !important;
  background: #1b1e24 !important;
  color: #e7e9ee !important;
  border: 1px solid #2c313b !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
  padding: 16px 16px 14px !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
.ndevr-tour-card.is-centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.ndevr-tour-head { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 6px !important; }
.ndevr-tour-quail-ico { flex: 0 0 auto !important; width: 26px !important; height: 26px !important; border-radius: 6px !important; object-fit: contain !important; display: block !important; }
.ndevr-tour-title { flex: 1 1 auto !important; min-width: 0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 !important; color: #fff !important; }
.ndevr-tour-prog { flex: 0 0 auto !important; font-size: 12px !important; color: #95a0b2 !important; font-variant-numeric: tabular-nums !important; }
.ndevr-tour-body { font-size: 13.5px !important; line-height: 1.5 !important; color: #c9cedb !important; margin: 0 0 14px !important; }

.ndevr-tour-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.ndevr-tour-nav-right { display: flex !important; gap: 8px !important; }
.ndevr-tour-btn {
  appearance: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #3a4150 !important;
  background: #262b34 !important;
  color: #e7e9ee !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background .12s ease, opacity .12s ease !important;
}
.ndevr-tour-btn:hover { background: #2f3540 !important; }
.ndevr-tour-btn:disabled { opacity: .4 !important; cursor: default !important; }
.ndevr-tour-primary { background: var(--ndevr-tour-accent) !important; border-color: var(--ndevr-tour-accent) !important; color: #1a1205 !important; }
.ndevr-tour-primary:hover { background: #ffba1f !important; }
.ndevr-tour-skip { background: transparent !important; border-color: transparent !important; color: #95a0b2 !important; padding-left: 0 !important; }
.ndevr-tour-skip:hover { background: transparent !important; color: #c9cedb !important; text-decoration: underline !important; }

/* "Ask QUAIL" disclosure + the embedded assistant panel. */
.ndevr-tour-ask {
  appearance: none !important;
  margin-top: 12px !important;
  width: 100% !important;
  text-align: left !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ndevr-tour-accent) !important;
  background: transparent !important;
  border: 1px dashed #3a4150 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}
.ndevr-tour-ask.is-open { border-style: solid !important; background: #21262f !important; }
.ndevr-tour-quail { margin-top: 10px !important; }
.ndevr-tour-quail-loading { font-size: 13px !important; color: #95a0b2 !important; padding: 8px 2px !important; }
/* Keep the assistant feed inside the card to a sensible height. */
.ndevr-tour-quail .ndevr-qa { max-height: 320px !important; }
.ndevr-tour-quail .ndevr-qa-feed { max-height: 220px !important; }

/* First-login welcome prompt — a small toast pinned bottom-right. */
.ndevr-tour-welcome {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483000 !important;
  width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  background: #1b1e24 !important;
  color: #e7e9ee !important;
  border: 1px solid #2c313b !important;
  border-left: 3px solid var(--ndevr-tour-accent) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 14px 14px 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  transform: translateY(16px) !important;
  opacity: 0 !important;
  transition: transform .25s ease, opacity .25s ease !important;
}
.ndevr-tour-welcome.is-in { transform: translateY(0) !important; opacity: 1 !important; }
.ndevr-tour-welcome-msg { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; }
.ndevr-tour-welcome-msg .ndevr-tour-quail-ico { width: 30px !important; height: 30px !important; }
.ndevr-tour-welcome-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.ndevr-tour-welcome-text strong { font-size: 14px !important; color: #fff !important; margin-bottom: 4px !important; }
.ndevr-tour-welcome-text span { font-size: 13px !important; line-height: 1.45 !important; color: #c9cedb !important; }
.ndevr-tour-welcome-btns { display: flex !important; justify-content: flex-end !important; gap: 8px !important; }

/* Completion toast. */
.ndevr-tour-toast {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translate(-50%, 16px) !important;
  z-index: 2147483000 !important;
  max-width: calc(100vw - 32px) !important;
  background: #1b1e24 !important;
  color: #e7e9ee !important;
  border: 1px solid #2c313b !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  opacity: 0 !important;
  transition: transform .3s ease, opacity .3s ease !important;
}
.ndevr-tour-toast.is-in { transform: translate(-50%, 0) !important; opacity: 1 !important; }

@media (max-width: 560px) {
  .ndevr-tour-card { width: calc(100vw - 20px) !important; left: 10px !important; right: 10px !important; }
  .ndevr-tour-card:not(.is-centered) { left: 10px !important; }
}