/* Custom styling for TourGuide.js */
:root {
  --tg-primary: #6419e6;
  --tg-primary-dark: #5315c0;
}

.tg-dialog {
  font-family: 'Geist', sans-serif;
  font-size: 16px; /* Base font size increase */
}

/* Increase dialog title font size and use Syncopate font */
.tg-dialog .tg-dialog-title {
  font-family: 'Syncopate', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

/* Increase dialog body content font size */
.tg-dialog .tg-dialog-body {
  font-size: 16px;
  line-height: 1.5;
}

/* Increase button text size */
.tg-dialog .tg-prev-btn,
.tg-dialog .tg-next-btn,
.tg-dialog .tg-finish-btn {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
}

/* Increase progress text size */
.tg-dialog .tg-step-progress {
  font-size: 15px;
}

html[data-theme="dark"] .tg-dialog {
  --tg-bg: #2a303c;
  --tg-color: #e5e7eb;
}

.tg-backdrop {
  background-color: rgba(100, 25, 230, 0.2) !important;
}

.tg-dialog .tg-dialog-header,
.tg-dialog .tg-dialog-footer {
  background-color: var(--tg-bg, #ffffff);
}

.tg-dialog .tg-next-btn,
.tg-dialog .tg-finish-btn {
  background-color: var(--tg-primary);
  transition: background-color 0.2s;
}

.tg-dialog .tg-next-btn:hover,
.tg-dialog .tg-finish-btn:hover {
  background-color: var(--tg-primary-dark);
}

.tg-dialog .tg-prev-btn {
  color: var(--tg-color, #333333);
  border: 1px solid #ccc;
}

html[data-theme="dark"] .tg-dialog .tg-prev-btn {
  border-color: #4b5563;
}

.tg-dialog .tg-progress-bar-inner {
  background-color: var(--tg-primary);
}

.tg-dialog .tg-step-dot.active {
  background-color: var(--tg-primary);
}

.tg-dialog .tg-close-btn {
  color: var(--tg-color, #333333);
}

.tg-dialog .tg-dialog-body h4 {
  color: var(--tg-primary);
}