/* The welcome tour a new DSP sees once clock-in opens up for them: one card
   over the dimmed home page. */

.welcome-tour {
  width: min(100% - 2.5rem, 26rem);
  margin: auto;
  padding: 1.75rem;
  border: 0;
  border-radius: 1.25rem;
  background: #fff;
  color: #15302e;
  box-shadow: 0 1.5rem 3rem rgb(20 40 38 / 0.2);

  &::backdrop { background: rgb(20 40 38 / 0.55); }
}
.welcome-tour__badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #e5f1e8;
  color: #2f7d4f;

  svg { width: 1.5rem; height: 1.5rem; }
}
.welcome-tour__title {
  margin-top: 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}
.welcome-tour__intro {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: #3d4a49;
}
.welcome-tour__slide {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 0.625rem;
  background: #f6f3ee;
  font-size: 1rem;
  line-height: 1.45;
}
.welcome-tour__counter {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8a938f;
}
.welcome-tour__dots {
  display: flex;
  gap: 0.375rem;
  margin-top: 1rem;
}
.welcome-tour__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #e2dcd2;

  &[aria-current=step] { background: #2f7d4f; }
}
.welcome-tour__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}
.welcome-tour__skip {
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
  color: #6b7572;
  cursor: pointer;

  &:hover { text-decoration: underline; }
}
.welcome-tour__next { min-width: 5rem; }