/* tour-styles.css — brand overrides for the driver.js popover (dark theme to
   match the editor). Base layout/positioning comes from /vendor/driver.css.
   Applied via popoverClass: 'cf-tour' in tour.js. */

.driver-popover.cf-tour {
  background: var(--surface, #14141c);
  color: var(--text, #e8e8f0);
  border: 1px solid var(--border, #2a2a38);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  max-width: 320px;
  padding: 18px 18px 14px;
}
.driver-popover.cf-tour .driver-popover-title {
  color: var(--text, #fff);
  font-size: 1.02rem;
  font-weight: 700;
}
.driver-popover.cf-tour .driver-popover-description {
  color: var(--muted, #aeb4d0);
  font-size: 0.9rem;
  line-height: 1.45;
}
.driver-popover.cf-tour .driver-popover-progress-text {
  color: var(--muted, #8a90ad);
  font-size: 0.74rem;
}

/* Footer buttons */
.driver-popover.cf-tour .driver-popover-footer button {
  background: var(--surface2, #20202c);
  color: var(--text, #e8e8f0);
  border: 1px solid var(--border, #2a2a38);
  border-radius: 7px;
  text-shadow: none;
  font-size: 0.84rem;
  padding: 6px 12px;
}
.driver-popover.cf-tour .driver-popover-footer button:hover {
  background: var(--surface, #2a2a38);
}
.driver-popover.cf-tour .driver-popover-next-btn,
.driver-popover.cf-tour .driver-popover-next-btn:hover {
  background: var(--indigo, #6366f1);
  border-color: var(--indigo, #6366f1);
  color: #fff;
}
.driver-popover.cf-tour .driver-popover-close-btn {
  color: var(--muted, #8a90ad);
}

/* Arrow colour — driver.css points the arrow at the popover edge with a white
   border; recolour each side to the dark surface so it blends in. */
.driver-popover.cf-tour .driver-popover-arrow-side-left   { border-left-color:   var(--surface, #14141c); }
.driver-popover.cf-tour .driver-popover-arrow-side-right  { border-right-color:  var(--surface, #14141c); }
.driver-popover.cf-tour .driver-popover-arrow-side-top    { border-top-color:    var(--surface, #14141c); }
.driver-popover.cf-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface, #14141c); }

/* "Take a quick tour" button injected into the Help modal */
.tour-replay-wrap { margin: 0 0 16px; }
.tour-replay-wrap .tour-replay-btn { width: 100%; }