// Tools page — promo card section

.wse-tools-promo {
  position: relative;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1px solid $color-border;
  border-radius: $radius-xl;
  padding: $spacing-card;
  overflow: hidden;

  &__cube {
    position: absolute;
    top: -8px;
    right: 12px;
    pointer-events: none;
    opacity: 0.85;
  }

  &__card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: $color-surface;
    border: 1px solid $color-border;
    border-radius: $radius-lg;
    text-decoration: none;
    transition: border-color $transition-base, box-shadow $transition-base;

    &:hover {
      border-color: $color-primary-300;
      box-shadow: 0 2px 8px rgb(108 123 255 / 0.08);
    }

    @include focus-ring;
  }

  &__banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
    padding: 16px 20px;
    background: $color-surface;
    border: 1px solid $color-border;
    border-radius: $radius-lg;
  }
}

// ── Install progress stepper ─────────────────────────────────────────────────

.wse-install-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 16px 0 4px;

  &__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;

    &--active {
      .wse-install-steps__indicator { color: $color-primary-600; }
      .wse-install-steps__label     { color: $color-primary-600; font-weight: 600; }
    }

    &--done {
      .wse-install-steps__indicator { color: $color-success-600; }
      .wse-install-steps__label     { color: $color-success-600; }
    }

    &--pending {
      .wse-install-steps__indicator { color: $gray-300; }
      .wse-install-steps__label     { color: $gray-400; }
    }
  }

  &__connector {
    position: absolute;
    top: 9px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: $gray-200;
    z-index: 0;

    &--done { background: $color-success-600; }
  }

  &__indicator {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: $color-surface;
  }

  &__dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentcolor;
  }

  &__label {
    font-size: $font-size-xs;
    text-align: center;
    line-height: 1.3;
    color: $color-text-muted;
    transition: color $transition-base;
  }
}

// ── Install success / error notices ─────────────────────────────────────────

.wse-install-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: $color-success-50;
  border: 1px solid #bbf7d0;
  border-radius: $radius-md;

  &__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.wse-install-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: $radius-md;
}