/* Component Scope Root */
.VendorRegisterHeader {
  position: relative;
  text-align: center;
  margin-bottom: 18px;
}

.VendorRegisterHeader .vr_back_btn {
  top: -8px;
  left: -8px;
}

.VendorRegisterHeader .vr_logo_area {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.VendorRegisterHeader .vr_logo {
  height: 64px;
  max-width: 170px;
  object-fit: contain;
}

.VendorRegisterHeader .vr_title {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 4px 0;
}

.VendorRegisterHeader .vr_subtitle {
  font-size: 13px;
  color: #374151;
  margin: 0 0 16px 0;
}

.VendorRegisterHeader .vr_step_label {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
  margin: 0 0 8px 0;
}

.VendorRegisterHeader .vr_stepper {
  display: flex;
  gap: 10px;
}

.VendorRegisterHeader .vr_step {
  flex: 1;
  text-align: left;
}

.VendorRegisterHeader .vr_bar {
  display: block;
  height: 4px;
  border-radius: 4px;
  background-color: #e5e7eb;
  margin-bottom: 6px;
  transition: background-color 0.3s ease;
}

.VendorRegisterHeader .vr_name {
  font-size: 12px;
  color: #6b7280;
}

.VendorRegisterHeader .vr_step.done .vr_bar {
  background-color: #f4511e;
}

.VendorRegisterHeader .vr_step.done .vr_name {
  color: #1e3a8a;
  font-weight: 600;
}

@media (min-width: 0px) and (max-width: 485px) {
  .VendorRegisterHeader .vr_logo {
    height: 52px;
  }

  .VendorRegisterHeader .vr_title {
    font-size: 18px;
  }

  .VendorRegisterHeader .vr_subtitle {
    font-size: 11px;
  }

  .VendorRegisterHeader .vr_step_label {
    font-size: 11px;
  }

  .VendorRegisterHeader .vr_stepper {
    gap: 6px;
  }

  .VendorRegisterHeader .vr_name {
    font-size: 10px;
  }
}