/* VetConnect — Tutoriel interactif
   Themes Driver.js (from lib/driver/driver.css) with our brand tokens. */

/* ─── Popover (the speech bubble) ──────────────────────────────── */
.driver-popover {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-5) var(--space-5) var(--space-4) !important;
  min-width: 280px !important;
  max-width: 360px !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 33, 0.08),
    0 24px 48px -16px rgba(15, 23, 33, 0.18) !important;
  font-family: var(--font-primary) !important;
  z-index: 100000 !important;
}
/* Softer popover fade-in (Hugo May 16: tuto must feel CALM) */
.driver-fade .driver-popover { animation: tut-popover-fade 450ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
.driver-fade .driver-overlay { animation: tut-popover-fade 450ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
@keyframes tut-popover-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.driver-popover * { font-family: var(--font-primary) !important; }

.driver-popover-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--color-text-strong) !important;
  line-height: var(--leading-snug) !important;
  margin: 0 0 var(--space-2) 0 !important;
  padding-right: 36px !important;
}

.driver-popover-description {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--color-text-primary) !important;
  letter-spacing: var(--tracking-normal) !important;
  margin-bottom: 0 !important;
}

.driver-popover-footer {
  margin-top: var(--space-3) !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--color-border-subtle) !important;
}

.driver-popover-progress-text {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  background: var(--color-primary-50) !important;
  color: var(--color-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-pill) !important;
}

/* Hint line (custom — appended by onPopoverRender) */
.tut-popover-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
  letter-spacing: var(--tracking-normal);
  padding: var(--space-2) 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tut-popover-hint::before {
  content: '👆';
  font-style: normal;
  font-size: 14px;
}

/* Close button (X in top-right) */
.driver-popover-close-btn {
  width: 28px !important;
  height: 28px !important;
  top: var(--space-3) !important;
  right: var(--space-3) !important;
  color: var(--color-text-tertiary) !important;
  font-size: 20px !important;
  font-weight: var(--font-medium) !important;
  border-radius: var(--radius-circle) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.driver-popover-close-btn:hover { color: var(--color-text-strong) !important; }

/* Navigation buttons — we hide them (user must click the real target) */
.driver-popover-navigation-btns { display: none !important; }

/* Arrow — match popover surface */
.driver-popover-arrow {
  border-width: 6px !important;
  border-color: var(--color-surface) !important;
}
.driver-popover-arrow-side-left   { border-right-color: transparent !important; border-bottom-color: transparent !important; border-top-color: transparent !important; }
.driver-popover-arrow-side-right  { border-left-color:  transparent !important; border-bottom-color: transparent !important; border-top-color: transparent !important; }
.driver-popover-arrow-side-top    { border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; }
.driver-popover-arrow-side-bottom { border-left-color:  transparent !important; border-top-color:    transparent !important; border-right-color: transparent !important; }

/* ─── Overlay (the dark mask with the spotlight hole) ─────────── */
.driver-overlay {
  /* Driver.js draws an SVG path with a cutout for the spotlight.
     We only customize the color via overlayColor in driver options. */
}

/* Active element gets a soft, calm brand glow.
   No aggressive pulse — just a steady gentle halo. Calmer = less stressful. */
.driver-active-element {
  box-shadow:
    0 0 0 2px var(--color-primary),
    0 0 0 6px rgba(27, 122, 74, 0.18),
    0 0 28px 2px rgba(27, 122, 74, 0.20) !important;
  border-radius: 10px !important;
  animation: tut-spotlight-breathe 4s ease-in-out infinite;
}
@keyframes tut-spotlight-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 2px var(--color-primary),
      0 0 0 6px rgba(27, 122, 74, 0.18),
      0 0 28px 2px rgba(27, 122, 74, 0.20);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--color-primary),
      0 0 0 8px rgba(27, 122, 74, 0.14),
      0 0 32px 4px rgba(27, 122, 74, 0.24);
  }
}

/* ─── Replay button — floating bottom-right help icon ─────────── */
.tut-replay-btn {
  position: fixed;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
  right: var(--space-4);
  z-index: 800;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.tut-replay-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.05);
}
.tut-replay-btn svg { width: 18px; height: 18px; }