/* Warm parchment overlay (not “software modal”) */
.introjs-overlay{
  background: rgba(47, 36, 27, 0.55) !important; /* ink */
}

/* Helper layer = “spotlight” that matches your palette */
.introjs-helperLayer{
  background: transparent !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 9999px rgba(47, 36, 27, 0.55),
    0 0 0 2px rgba(110, 85, 55, 0.55),
    0 18px 40px rgba(0,0,0,0.35) !important;
}

/* Tooltip = parchment card */
.introjs-tooltip{
  padding: 0 !important;
  border-radius: 16px !important;
  background: rgba(255, 248, 230, 0.98) !important;  /* paper */
  border: 1px solid rgba(110, 85, 55, 0.35) !important; /* rule */
  box-shadow: 0 14px 40px rgba(0,0,0,0.25) !important;
  color: rgba(47, 36, 27, 0.92) !important;
  font-family: 'Crimson Text','Georgia',serif !important;
  overflow: hidden !important;
  max-width: 360px !important;
}

/* Title bar = subtle “label strip”, not blue app header */
.introjs-tooltip h3{
  margin: 0 !important;
  padding: 12px 16px !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 16px !important;

  background: rgba(245, 230, 211, 0.95) !important;
  border-bottom: 1px solid rgba(110, 85, 55, 0.25) !important;
  color: rgba(47, 36, 27, 0.9) !important;
  text-align: center !important;
}

/* Body text */
.introjs-tooltiptext{
  padding: 12px 16px 6px 16px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Progress bar: ink + parchment */
.introjs-progress{
  margin: 8px 16px 0 16px !important;
  height: 6px !important;
  background: rgba(110,85,55,0.18) !important;
  border-radius: 99px !important;
}
.introjs-progressbar{
  height: 100% !important;
  background: rgba(3, 43, 125, 0.55) !important; /* your classy blue ink */
  border-radius: 99px !important;
}

/* Buttons: match your CTA vibe */
.introjs-tooltipbuttons{
  padding: 10px 16px 14px 16px !important;
  border-top: 1px solid rgba(110, 85, 55, 0.18) !important;
}

.introjs-button{
  border-radius: 10px !important;
  border: 1px solid rgba(110, 85, 55, 0.30) !important;
  background: rgba(245, 230, 211, 0.95) !important;
  color: rgba(47, 36, 27, 0.9) !important;
  padding: 8px 14px !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;
}

.introjs-nextbutton{
  background: rgba(3, 43, 125, 0.12) !important;
  border-color: rgba(3, 43, 125, 0.25) !important;
}

.introjs-button:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.16) !important;
}

/* Arrows: parchment */
.introjs-arrow.top{ border-bottom-color: rgba(255, 248, 230, 0.98) !important; }
.introjs-arrow.bottom{ border-top-color: rgba(255, 248, 230, 0.98) !important; }
.introjs-arrow.left{ border-right-color: rgba(255, 248, 230, 0.98) !important; }
.introjs-arrow.right{ border-left-color: rgba(255, 248, 230, 0.98) !important; }





/* A transparent shield that blocks clicks during the tour */
#tour-click-shield{
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9999980;   /* below intro highlight + tooltip */
  pointer-events: auto;
}

/* Make sure the highlighted element sits ABOVE the shield */
.introjs-showElement{
  z-index: 9999999 !important;
}

/* Tooltip should always be clickable */
.introjs-tooltip,
.introjs-tooltip *{
  pointer-events: auto !important;
}