/* ==========================================================================
   HealthAI - Guided Screen Tour Styling
   Clean, sharp spotlight tour with ZERO blur and high-clarity backdrop
   ========================================================================== */

/* DISABLE THE OLD POPUP MODAL ENTIRELY */
#guide-modal {
  display: none !important;
}

/* SPOTLIGHT TOUR OVERLAY - NO BLUR, CRISP BACKGROUND VISIBILITY */
.walkthrough-spotlight-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10500 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
  transition: opacity 0.2s ease !important;
}

.walkthrough-spotlight-overlay.hidden {
  display: none !important;
}

/* SPOTLIGHT HIGHLIGHT CUTOUT BOX */
.walkthrough-spotlight-box {
  position: fixed !important;
  border: 2px solid #00f2fe !important;
  border-radius: 10px !important;
  /* Gentle 45% tint outside, leaving targeted element completely clear and visible */
  box-shadow: 0 0 0 9999px rgba(3, 8, 20, 0.45), 0 0 24px rgba(0, 242, 254, 0.65), inset 0 0 12px rgba(0, 242, 254, 0.25) !important;
  pointer-events: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10505 !important;
}

/* FLOATING SPOTLIGHT TOUR CALLOUT CARD */
.walkthrough-spotlight-card {
  position: fixed !important;
  width: 380px !important;
  max-width: calc(100vw - 28px) !important;
  background: #091322 !important;
  border: 1px solid rgba(0, 242, 254, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 242, 254, 0.25) !important;
  padding: 16px 18px !important;
  z-index: 10510 !important;
  color: #f8fafc !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.spotlight-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.spotlight-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.12) !important;
  border: 1px solid rgba(0, 242, 254, 0.35) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.spotlight-close-btn {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 1.35rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  transition: color 0.15s ease !important;
}

.spotlight-close-btn:hover {
  color: #ffffff !important;
}

.spotlight-card-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.spotlight-card-desc {
  font-size: 0.82rem !important;
  color: #94a9c4 !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
}

/* OPTIONAL ACTION BUTTON IN SPOTLIGHT */
.spotlight-action-row {
  margin-bottom: 12px !important;
}

.spotlight-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(79, 70, 229, 0.3)) !important;
  border: 1px solid #00f2fe !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
  font-family: inherit !important;
}

.spotlight-action-btn:hover {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.35), rgba(79, 70, 229, 0.45)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.35) !important;
}

/* FOOTER BAR */
.spotlight-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 10px !important;
  gap: 10px !important;
}

.spotlight-footer-left {
  display: flex !important;
  align-items: center !important;
}

.spotlight-reload-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.72rem !important;
  color: #94a9c4 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.spotlight-reload-wrap input[type="checkbox"] {
  accent-color: #00f2fe !important;
  width: 14px !important;
  height: 14px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.spotlight-footer-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.spotlight-btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}

.spotlight-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

.spotlight-btn-link {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 0.74rem !important;
  cursor: pointer !important;
  padding: 6px 6px !important;
  transition: color 0.15s ease !important;
  font-family: inherit !important;
}

.spotlight-btn-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.spotlight-btn-primary {
  background: #00f2fe !important;
  border: 1px solid #00f2fe !important;
  color: #04151b !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3) !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}

.spotlight-btn-primary:hover {
  background: #38bdf8 !important;
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.5) !important;
}