.backdrop {background: #000 ;}
.stepper div, main, ol, pre, span, ul {
        scrollbar-width: thin;
        scrollbar-color: #343434 transparent;
    }

.stepper.stepper-pills .stepper-item .stepper-icon {
    border-radius:50%;
 }

@media (min-width: 476px) {
    .w-sm-500px {
        width: 450px !important;
    }
}


.bg-main { background: url(../media/bg/login.jpg) no-repeat top;
}

@media (max-width: 767px) {
  .stepper.stepper-pills .stepper-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap;
    width: 100%;
    border-bottom: 1.5px solid #e6e6e6;
    /* optional for visual */
    scrollbar-width: thin; /* Firefox */
  }
  .stepper.stepper-pills .stepper-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important; /* shrink/grow off */
    min-width: 150px;  /* each step takes more width */
    max-width: 320px;
    padding: 0 8px;
    background: none !important;
    box-shadow: none !important;
    border: none;
    margin: 0;
    white-space: nowrap;
  }
  .stepper.stepper-pills .stepper-line {
    display: none !important;
  }
  .stepper.stepper-pills .stepper-icon {
    margin: 0 7px 0 0;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 17px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Show label (title only), not description */
  .stepper.stepper-pills .stepper-label {
    display: block !important;
    text-align: left;
    font-size: 14px;
    margin: 0;
    line-height: 1.1;
    font-weight: 500;
    white-space: normal;
  }
  .stepper.stepper-pills .stepper-label .stepper-title {
    font-size: 14px;
    margin-bottom: 0;
    color: #222;
    font-weight: 600;
  }
  .stepper.stepper-pills .stepper-label .stepper-desc {
    display: none !important;
  }
  /* Remove hover/focus blue if you want */
  .stepper.stepper-pills .stepper-item:focus {
    outline: none !important;
  }
  /* Show horizontal scroll always */
  .stepper.stepper-pills .stepper-nav::-webkit-scrollbar {
    height: 5px;
  }
  .stepper.stepper-pills .stepper-nav::-webkit-scrollbar-thumb {
    background: #c3c3c3;
    border-radius: 2px;
  }
}


/* For WebKit-based browsers (Chrome, Safari, Edge) */
.otps input::-webkit-outer-spin-button,
.otps input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Optional: Removes any default margin */
}

/* For Firefox */
.otps input[type="number"] {
    -moz-appearance: textfield;
}

/* For other browsers (as a general fallback) */
.otps input[type="number"] {
    appearance: textfield;
}




.progress {

  background-color: #e9ecef; /* light gray background */
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0;
width: 100%;
  z-index: 9999;
}

/* Progress bar fill */
#mobileProgressBar {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #0056b3); /* Bootstrap primary blue */
  border-radius: 6px;
  width: 0%; /* default starting point */
  transition: width 0.4s ease; /* smooth animation */
}

/* Show only on mobile */
@media (max-width: 768px) {
  #kt_create_account_stepper_nav {
    display: none; /* hide stepper on mobile */
  }
  .progress {
    display: block;
  }
}

/* Hide progress bar on desktop */
@media (min-width: 769px) {
  .progress {
    display: none;
  }
}