body.dark-mode_page_dracula-getting-started {
  &:has(.dracula-setup) {
    overflow: hidden;
    position: fixed;
  }
}


.dracula-setup {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  box-sizing: border-box;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;

  &-header {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-bottom: 15px;

    h1 {
      font-size: 18px;
      margin: 0;
      padding: 15px 10px 0 10px;
      text-align: center;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;

      .logo-wrap {
        display: flex;
        align-items: center;
        margin-left: 10px;

        img {
          height: 30px;
          margin-right: 7px;
        }
      }

    }

    p {
      font-size: 14px;
      margin: 0;
      text-align: center;
      color: #555;
    }

  }

  &-sidebar {

    &-wrap {
      width: 350px;
      border-right: 1px solid #ddd;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background: #f9f9f9;
    }

    &.dracula-live-edit:not(.dracula-editor-live-edit) {
      position: unset !important;
      width: 100% !important;
      padding: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: 0 !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100vh - 80px);
    }

    &.dracula-live-edit {

      .dracula-live-edit-menu {
        margin-bottom: auto;

        .dracula-live-edit-menu-item {
          padding: 12px;
          font-size: 16px;
        }
      }

      .dracula-settings-content {
        max-height: calc(100vh - 100px);
        padding: 0;

        .inner-tabs {
          display: none !important;
        }

        .settings-field {
          border-radius: 0;

          .settings-field-label {
            font-size: 15px;
            margin-right: 0;
          }

          .settings-field-content {
            .description {
              display: flex;
            }
          }

          &.field-show-toggle,
          &.field-display-menu-toggle,
          &.field-darken-background-images,
          &.field-low-brightness-images,
          &.field-grayscale-images,
          &.field-invert-images,
          &.field-low-brightness-videos,
          &.field-grayscale-videos,
          &.field-show-tooltip,
          &.field-draggable-toggle,
          &.field-change-font {

            & > .settings-field-label {
              width: 100% !important;
              margin-bottom: 10px;
            }

            & > .settings-field-content {
              width: 100% !important;
            }

          }

          &.field-adjustments {
            .settings-field-content {
              margin-top: 0;

              .settings-field {
                margin-bottom: 10px;
                padding: 0 !important;
                border-radius: 0 !important;
              }
            }
          }

        }

        & > .settings-field {
          padding: 10px !important;
        }

      }
    }

  }

  &-footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f1f1f1;
    border-top: 1px solid #ddd;

    button {
      background: #0073aa;
      color: #fff;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
      font-size: 14px;
      line-height: 1.5;
      height: 35px;

      &:hover {
        background: #005177;
        color: #fff !important;
      }

      &.btn-skip,
      &.btn-back {
        background: transparent;
        color: #0073aa;
        border: none;

        &:hover {
          background: #f1f1f1;
          color: #005177 !important;
        }
      }

      &.btn-back {
        margin-left: auto;
        gap: 0 !important;
      }

    }
  }

  &-site {
    flex: 1;
    padding: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #fff;

    iframe {
      width: 100%;
      height: 100vh;
      border: none;
    }
  }

  /* steps.scss */
  .steps {
    --size: 36px;
    --track: #e5e7eb; // line color
    --active: #4f46e5; // brand/active color
    --text: #111827;

    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 5px 0 10px 0;
    list-style: none;
  }

  .steps__track,
  .steps__progress {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--size) / 2);
    height: 2px;
    content: "";
  }

  .steps__track {
    background: var(--track);
  }

  .steps__progress {
    background: var(--active);
    width: var(--progress, 0%);
    right: auto; // allow width to control fill
    transition: width 240ms ease;
  }

  .step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    cursor: pointer;
  }

  .step__marker {
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    border: 2px solid var(--track);
    background: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    z-index: 1; // keep above the line
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease,
    box-shadow 200ms ease;

    &:hover {
      border-color: var(--active);
      box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
    }

  }

  .step__label {
    font-size: 0.85rem;
    color: var(--text);
    user-select: none;
  }

  /* States */
  .step.completed .step__marker {
    background: var(--active);
    border-color: var(--active);
    color: #fff;
  }

  .step.active .step__marker {
    border-color: var(--active);
    box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
  }

  /* Optional: slightly dim upcoming markers */
  .step.upcoming .step__marker {
    opacity: 0.9;
  }

  /* Small screens: hide labels if tight */
  @media (max-width: 520px) {
    .step__label {
      display: none;
    }
  }


}