/* ============================================
   WIZARD - Style cho wizard mode
   Chức năng: Style cho tooltip và overlay của wizard
   ============================================ */

.wizard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(2px);
}

.wizard-tooltip {
  position: fixed;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-lg);
  max-width: 320px;
  z-index: 1000;
  animation: slideUp 0.3s;
}

.wizard-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.wizard-step-number {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.wizard-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.wizard-close:hover {
  background: #f0f6ff;
  color: var(--danger);
}

.wizard-tooltip-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #0b2540;
  margin-bottom: var(--spacing-sm);
}

.wizard-tooltip-description {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.wizard-tooltip-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

#wizardBtn.active {
  background: var(--accent);
  color: white;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}