/**
 * Tutorial system styles
 */

.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.tutorial-container {
  background-color: #F5F5DC; /* Cream color */
  border-radius: 10px;
  padding: 20px;
  max-width: 600px;
  width: 80%;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Gold shadow */
  position: relative;
  color: #000; /* Black text */
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tutorial-header h2 {
  margin: 0;
  color: #8B4513; /* Brown text */
  font-size: 24px;
}

.tutorial-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #8B4513;
}

.tutorial-content {
  margin-bottom: 30px;
  max-height: 300px;
  overflow-y: auto;
}

.tutorial-step {
  display: none;
}

.tutorial-step.active {
  display: block;
}

.tutorial-step h3 {
  color: #8B4513;
  margin-top: 0;
}

.tutorial-step p {
  line-height: 1.6;
  font-size: 16px;
}

.tutorial-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tutorial-progress {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  width: 100%;
}

.tutorial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #D2B48C; /* Tan color */
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tutorial-dot.active {
  background-color: #8B4513; /* Brown color */
  transform: scale(1.2);
}

.tutorial-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.tutorial-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

#tutorial-skip {
  background-color: #CD853F; /* Peru color */
  color: white;
}

#tutorial-skip:hover {
  background-color: #A0522D; /* Sienna color */
}

#tutorial-prev {
  background-color: #D2B48C; /* Tan color */
  color: white;
}

#tutorial-prev:hover:not([disabled]) {
  background-color: #C3A580; /* Darker tan */
}

#tutorial-prev[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

#tutorial-next {
  background-color: #4CAF50; /* Green color */
  color: white;
}

#tutorial-next:hover {
  background-color: #388E3C; /* Darker green */
}