#kt_header {
  box-shadow: 0 10px 30px 0 rgba(82, 63, 105, .05);
}
.w-90px {width: 120px !important; padding-left:5px !important; padding-right: 5px !important;}
.w-80px {width: 80px !important; padding-left:5px !important; padding-right: 5px !important;}

@media (min-width: 476px) {
  #kt_content {
    padding-top: 20px;
  }
}
@media (max-width: 676px) {
.w-90px {width: 90px !important; padding-left:5px !important; padding-right: 5px !important;}
.w-80px {width: 80px !important; padding-left:5px !important; padding-right: 5px !important;}
}


.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;
  }
}




.glow-border {
  position: relative;
  border-radius: 12px;
  background: var(--kt-card-bg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
  margin-top: 10px;
  padding: 10px 15px;

}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #089EFF;
}

.glow-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  /* border thickness */
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(90deg,
      #089EFF 40%,
      #FB5141 100%);

  opacity: 0;
  filter: blur(0px);
  transition: opacity 0.3s ease, filter 0.3s ease;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hover glow */
.glow-border:hover::before {
  opacity: 0.9;
  filter: blur(2px);
}

/* Active glow (stronger) */
.glow-border.active::before {
  opacity: 1;
  filter: blur(4px);
}

/* Slight lift for premium feel */
.glow-border:hover,
.glow-border.active {
  transform: translateY(-1px);

}

/* Smooth tab content animation */
.tab-pane {
  animation: fadeSlide 0.35s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.legends {
  font-size: 11px;
  line-height: 11px;
}

.card .card-body {
  padding: 1rem;
}


/* MOBILE GRID */
@media (max-width: 767px) {
  .nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-grid .nav-link {
    width: calc(50% - 5px);
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
  }

  .nav-grid .menu-icon {
    margin-bottom: 6px;
  }

  .nav-grid .nav-link small {
    display: none;
  }

  /* 🔥 FIX: Heading full width */
  .nav-grid .nav-section {
    width: 100%;
    margin: 10px 0 0;
    text-align: left;
  }
}

/* DESKTOP */
@media (min-width: 768px) {
  .nav-grid {
    flex-direction: column;
  }

  .nav-grid .nav-link {
    width: 100%;
    flex-direction: row;
    text-align: left;
  }

  .nav-grid .nav-link small {
    display: block;
  }
}
/* ===============================
   TAB ICON SLOT (LEFT)
   =============================== */

.nav-pills-custom .menu-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.04);
  color: var(--kt-text-muted);

  transition: all 0.3s ease;
}

/* Dark mode icon bg */
[data-bs-theme="dark"] .nav-pills-custom .menu-icon {
  background: rgba(255, 255, 255, 0.06);
}

/* Hover icon */
.nav-pills-custom .nav-link:hover .menu-icon {
  color: var(--kt-primary);
}

/* Active icon (gradient fill) */
.nav-pills-custom .nav-link.active .menu-icon {
  background: linear-gradient(135deg, #089EFF, #FB5141);
  color: #fff !important;
  box-shadow: 0 0 5px rgba(8, 158, 255, 0.6);
}

.nav-pills-custom .nav-link.active .menu-icon i {
  color: #fff !important;
}




/* ===============================
   DEPOSIT INNER PILL TABS
   =============================== */
.card .card-header {
  padding: 0 15px !important;
}

.pill-tab {
  border-radius: 30px;
  padding: 7px 15px;
  background: transparent !important;
  border: 1px solid var(--kt-border-color);
  color: var(--kt-text-muted);
  transition: all 0.3s ease;
}

/* Icon wrapper */
.pill-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kt-text-muted);
  transition: all 0.3s ease;
}

/* Hover */
.pill-tab:hover {
  background: var(--kt-light) !important;
  color: var(--kt-primary);
}

/* Active pill */
.pill-tab.active {
  background: linear-gradient(0deg, #f9f9f9 40%, #fafafa 100%) !important;
  color: #000000 !important;
  border-color: transparent;
  box-shadow: 0 0 5px rgba(102, 102, 102, 0.4);
}

/* Active icon */
.pill-tab.active .pill-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .pill-tab {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .pill-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}