#kt_header {box-shadow: 0 10px 30px 0 rgba(82, 63, 105, .05);}
.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;}

/* ===============================
   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 28px;
    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;
}