/* ============================================================
 * Driver.js Tour — AYA Theme Overrides
 * Uses AYA design tokens so the popover auto-adapts to
 * light/dark mode via data-bs-theme.
 * ============================================================ */

/* Popover card */
.driver-popover {
  background-color: var(--aya-bg-surface);
  border: 1px solid var(--aya-border-accent);
  border-radius: var(--aya-radius-lg);
  box-shadow: var(--aya-shadow-elevated), 0 0 20px var(--aya-accent-glow);
  font-family: var(--aya-font-body);
  color: var(--aya-text-primary);
}

/* Arrow */
.driver-popover-arrow {
  border: 5px solid transparent;
}

.driver-popover-arrow-side-top {
  border-top-color: var(--aya-border-accent);
}

.driver-popover-arrow-side-bottom {
  border-bottom-color: var(--aya-border-accent);
}

.driver-popover-arrow-side-left {
  border-left-color: var(--aya-border-accent);
}

.driver-popover-arrow-side-right {
  border-right-color: var(--aya-border-accent);
}

/* Title */
.driver-popover-title {
  font-family: var(--aya-font-heading);
  font-weight: 600;
  color: var(--aya-accent-primary);
  font-size: 1.05rem;
}

/* Description */
.driver-popover-description {
  color: var(--aya-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Progress text */
.driver-popover-progress-text {
  color: var(--aya-text-tertiary);
  font-family: var(--aya-font-mono);
  font-size: 0.8rem;
}

/* Footer layout */
.driver-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.driver-popover-navigation-btns {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Navigation buttons */
.driver-popover .driver-popover-navigation-btns button,
.driver-popover .driver-popover-navigation-btns .driver-popover-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--aya-btn-height-sm);
  padding: 0.35rem var(--aya-btn-padding-x-sm) !important;
  background-color: transparent;
  border: 1px solid var(--aya-border-default);
  border-radius: var(--aya-btn-radius) !important;
  color: var(--aya-text-secondary);
  font-family: var(--aya-font-body);
  font-size: var(--aya-btn-font-size-sm);
  font-weight: var(--aya-btn-font-weight);
  line-height: 1.1;
  text-shadow: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transition:
    transform var(--aya-transition-fast),
    background-color var(--aya-transition-fast),
    border-color var(--aya-transition-fast),
    color var(--aya-transition-fast),
    box-shadow var(--aya-transition-fast);
}

.driver-popover .driver-popover-navigation-btns button:hover,
.driver-popover .driver-popover-navigation-btns .driver-popover-btn:hover {
  transform: translateY(-1px);
  border-color: var(--aya-accent-primary);
  color: var(--aya-accent-primary);
}

/* "Next" button — primary accent style */
.driver-popover .driver-popover-navigation-btns .driver-popover-next-btn {
  background-color: var(--aya-accent-primary) !important;
  border-color: var(--aya-accent-primary) !important;
  color: var(--aya-text-on-accent) !important;
  font-weight: 600;
}

.driver-popover .driver-popover-navigation-btns .driver-popover-next-btn:hover {
  background-color: var(--aya-accent-primary-hover) !important;
  border-color: var(--aya-accent-primary-hover) !important;
  color: var(--aya-text-on-accent) !important;
}

/* Close button */
.driver-popover-close-btn {
  color: var(--aya-text-tertiary);
  text-shadow: none !important;
}

.driver-popover-close-btn:hover {
  color: var(--aya-text-primary);
}

/* Overlay */
.driver-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}