/* Onboarding tour styling (Driver.js) — matches Trarity dashboard glass look */

.driver-popover{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  /* Ensure high contrast regardless of surrounding page styles */
  color: rgba(245, 249, 255, 0.95);
  backdrop-filter: blur(8px);
  /* Make the popover larger */
  max-width: 650px !important;
  width: 90vw !important;
  padding: 32px !important;
}

.driver-popover-title{
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  font-family: "Inter", ui-sans-serif !important;
  letter-spacing: .02em !important;
  color: rgba(245, 249, 255, 0.98) !important;
  margin-bottom: 12px !important;
}

.driver-popover-description{
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  font-family: "Inter", ui-sans-serif !important;
  color: rgba(245, 249, 255, 0.92) !important;
  opacity: 1 !important;
  margin-bottom: 16px !important;
}

.driver-popover-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.driver-popover-progress-text{
  font: 800 11px/1 "Inter", ui-sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(199, 213, 246, 0.82);
}

.driver-popover-navigation-btns{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.driver-popover .driver-popover-next-btn,
.driver-popover .driver-popover-prev-btn,
.driver-popover .driver-popover-previous-btn,
.driver-popover .driver-popover-close-btn{
  /* Match dashboard topbar chips (e.g., Filters button) */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Smaller, like compact site controls */
  min-height: 28px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.43) !important;
  background: rgba(15,23,42,.8) !important;
  color: #e2e8f0 !important;
  font: 600 11px/1 "Inter", ui-sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  cursor: pointer !important;
  gap: 6px !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

.driver-popover .driver-popover-next-btn:active,
.driver-popover .driver-popover-prev-btn:active,
.driver-popover .driver-popover-previous-btn:active,
.driver-popover .driver-popover-close-btn:active{
  transform: translateY(1px);
}

/* Keep a focus ring for Skip */
.driver-popover .tour-skip-btn:focus-visible{
  outline: 2px solid rgba(54,210,217,.55);
  outline-offset: 3px;
}
.driver-popover .driver-popover-prev-btn:focus,
.driver-popover .driver-popover-prev-btn:focus-visible,
.driver-popover .driver-popover-previous-btn:focus,
.driver-popover .driver-popover-previous-btn:focus-visible{
  outline: none !important;
}
.driver-popover .driver-popover-next-btn:focus,
.driver-popover .driver-popover-next-btn:focus-visible{
  outline: none !important;
}

.driver-popover .driver-popover-next-btn{
  /* topchip--primary */
  background: linear-gradient(120deg,#36d2d9,#6bf0b5) !important;
  /* Remove the visible ring/border */
  border-color: transparent !important;
  color: #020617 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.45) !important;
}

.driver-popover .driver-popover-next-btn:hover,
.driver-popover .driver-popover-prev-btn:hover,
.driver-popover .driver-popover-previous-btn:hover,
.driver-popover .driver-popover-close-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.55) !important;
}

/* If Back is disabled on the first step, keep the same chip styling (just dim it). */
.driver-popover .driver-popover-prev-btn[disabled],
.driver-popover .driver-popover-previous-btn[disabled]{
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.driver-popover .driver-popover-close-btn{
  /* Hide the default Driver.js X close button — we use a custom Skip instead */
  display: none !important;
}

/* Custom Skip button injected by onboarding-tour.js */
.driver-popover .tour-skip-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.43) !important;
  background: rgba(15,23,42,.8) !important;
  color: #e2e8f0 !important;
  font: 600 11px/1 "Inter", ui-sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
}
.driver-popover .tour-skip-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.55) !important;
}
.driver-popover .tour-skip-btn:active{
  transform: translateY(1px);
}

/* Arrow color to match popover background */
.driver-popover-arrow{
  color: var(--glass);
}

/* Light theme support (reuse existing page theme hooks) */
body.theme-light .driver-popover{
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
  color: #0b162c;
}

body.theme-light .driver-popover-progress-text{
  color: rgba(11,22,44,.70);
}

body.theme-light .driver-popover .tour-skip-btn{
  /* Match body.theme-light .topchip */
  background: #e2e8f0 !important;
  color: #0b162c !important;
  border-color: rgba(0,0,0,.08) !important;
}

body.theme-light .driver-popover .driver-popover-prev-btn{
  /* Same as Skip in light theme */
  background: #e2e8f0 !important;
  color: #0b162c !important;
  border-color: rgba(0,0,0,.08) !important;
}

body.theme-light .driver-popover .driver-popover-previous-btn{
  /* Same as Skip in light theme */
  background: #e2e8f0 !important;
  color: #0b162c !important;
  border-color: rgba(0,0,0,.08) !important;
}

body.theme-light .driver-popover .driver-popover-next-btn{
  /* Keep the primary chip look consistent */
  box-shadow: 0 10px 22px rgba(15,23,42,.16) !important;
}