/**
 * Aligntra Tour Theme - Supademo-inspired styling
 * Overrides Driver.js defaults to match Supademo's polish
 *
 * @version 1.0.0
 * @date 2026-02-13
 */

/* ============================================
   Popover Container
   ============================================ */
.driver-popover {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 380px;
  padding: 0;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  animation: popoverFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   Popover Header
   ============================================ */
.driver-popover-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 20px 20px 12px 20px;
  margin: 0;
  line-height: 1.4;
}

/* ============================================
   Popover Description
   ============================================ */
.driver-popover-description {
  font-size: 15px;
  color: #4a4a4a;
  padding: 0 20px 16px 20px;
  line-height: 1.6;
  margin: 0;
}

/* Strong text in descriptions */
.driver-popover-description strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* ============================================
   Custom Progress Bar
   ============================================ */
.tour-progress {
  padding: 12px 20px 0 20px;
  margin-bottom: 16px;
}

.tour-progress-text {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.tour-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.tour-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066cc 0%, #0052a3 100%);
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer effect on progress bar */
.tour-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ============================================
   Button Container
   ============================================ */
.driver-popover-footer {
  padding: 14px 20px 18px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
}

/* ============================================
   Reset Driver.js default button styles
   ============================================ */
.driver-popover-footer button,
.driver-popover-next-btn,
.driver-popover-prev-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   Primary Button (Next/Done)
   ============================================ */
.driver-popover-next-btn {
  background: var(--primary-600, #0066cc) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.driver-popover-next-btn:hover {
  background: var(--primary-700, #0052a3) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

.driver-popover-next-btn:active {
  background: var(--primary-800, #003d7a) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================
   Secondary Button (Previous)
   ============================================ */
.driver-popover-prev-btn {
  background: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

.driver-popover-prev-btn:hover {
  background: #f9fafb !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
  transform: none !important;
  box-shadow: none !important;
}

.driver-popover-prev-btn:active {
  background: #f3f4f6 !important;
  color: #374151 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================
   Close Button (X)
   ============================================ */
.driver-popover-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.driver-popover-close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.driver-popover-close-btn:active {
  background: #e5e7eb;
}

/* ============================================
   Overlay (Backdrop) - 10% dim
   Subtle page dimming to draw focus to the
   highlighted element and popover callout.
   ============================================ */
.driver-overlay {
  animation: none !important;
}

.driver-overlay svg {
  /* The SVG overlay with cutout hole around highlighted element */
}

.driver-overlay path {
  fill: black !important;
  opacity: 0.1 !important;
}

/* ============================================
   Parent Overflow Fix
   Driver.js sets overflow:hidden on direct parents of
   highlighted elements to prevent scroll. This clips
   elements whose parent container is smaller than the
   element (e.g., sidebar buttons). Override to visible
   since the SVG overlay handles visual masking.
   ============================================ */
:not(body):has(> .driver-active-element) {
  overflow: visible !important;
}

/* ============================================
   Highlighted Element (Driver.js uses .driver-active-element)
   ============================================ */
.driver-active-element {
  border-radius: 8px;
  box-shadow:
    0 0 0 4px rgba(0, 102, 204, 0.4),
    0 0 0 8px rgba(0, 102, 204, 0.2),
    0 4px 12px rgba(0, 102, 204, 0.15);
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Click-through steps: orange pulse overrides blue glow */
.driver-active-element.tour-hotspot-pulse {
  box-shadow: none;
}

/* ============================================
   Click-Through Hint (shown on interactive steps)
   ============================================ */
.tour-click-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c2410c;
}

.tour-click-hint svg {
  flex-shrink: 0;
  color: #ea580c;
}

/* ============================================
   Arrow (connects popover to element)
   ============================================ */
.driver-popover-arrow {
  border-color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ============================================
   Demo Mode Controls
   ============================================ */
.demo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin: 0 -20px -16px -20px;
  border-top: 1px solid #f0f0f0;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.demo-pause-btn,
.demo-skip-btn {
  background: white;
  color: #4a4a4a;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-pause-btn:hover,
.demo-skip-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.demo-progress-text {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 640px) {
  .driver-popover {
    max-width: 90vw;
  }

  .driver-popover-title {
    font-size: 16px;
    padding: 16px 16px 10px 16px;
  }

  .driver-popover-description {
    font-size: 14px;
    padding: 0 16px 12px 16px;
  }

  .driver-popover-footer {
    padding: 12px 16px 16px 16px;
    flex-direction: column;
  }

  .driver-popover-next-btn,
  .driver-popover-prev-btn {
    width: 100% !important;
  }

  .tour-progress {
    padding: 10px 16px 0 16px;
  }

  .tour-progress-text {
    font-size: 12px;
  }
}

/* ============================================
   Tablet Responsive
   ============================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  .driver-popover {
    max-width: 360px;
  }
}

/* ============================================
   Tour Content Container
   ============================================ */
.tour-content {
  /* Container for custom popover content */
}

.tour-content p {
  margin: 0;
}

/* Keyboard hint (shown on first step) */
.tour-keyboard-hint {
  margin-top: 12px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tour-keyboard-hint svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.tour-keyboard-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #4a4a4a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Accessibility
   ============================================ */
.driver-popover:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.driver-popover-next-btn:focus-visible,
.driver-popover-prev-btn:focus-visible,
.driver-popover-close-btn:focus-visible {
  outline: 2px solid var(--primary-600, #0066cc) !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .driver-popover {
    border: 2px solid #1a1a1a;
  }

  .driver-popover-next-btn {
    border: 2px solid #0066cc;
  }

  .driver-popover-prev-btn {
    border: 2px solid #4a4a4a;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .driver-popover,
  .driver-overlay,
  .driver-highlighted-element {
    animation: none;
  }

  .driver-popover-next-btn,
  .driver-popover-prev-btn,
  .tour-progress-fill {
    transition: none;
  }
}