/* CHROME, EDGE, SAFARI */
.mainContent::-webkit-scrollbar {
  width: var(--space-sm);
  height: var(--space-sm);
}

.mainContent::-webkit-scrollbar-track {
  background: var(--card-bg);
  border-radius: var(--radius);
}

.mainContent::-webkit-scrollbar-thumb {
  background: #393838;
  border-radius: var(--radius);
  border: 2px solid var(--card-bg);
}

.mainContent::-webkit-scrollbar-thumb:hover {
  background: #0393d6; /* slightly brighter primary */
}

header.pageHeader {
    white-space: nowrap;
  backdrop-filter: blur(30px) brightness(80%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: -8px;
  border-radius: var(--radius);
  z-index: 1;
  width: 100%;
  padding: calc(var( --space-sm) + 2px) calc(var( --space-md) - 4px) calc(var( --space-sm) + 2px);
  overflow-x: auto;
}
/* CHROME, EDGE, SAFARI */
header.pageHeader::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

header.pageHeader::-webkit-scrollbar-track {
  background: var(--main-bg);
  border-radius: var(--radius);
}

header.pageHeader::-webkit-scrollbar-thumb {
  background: var(--bg);
  opacity: 0.1;
  border-radius: var(--radius);
  border: 1px solid var(--card-bg);
}

header.pageHeader::-webkit-scrollbar-thumb:hover {
  background: #0393d626; /* slightly brighter primary */
}
.headerLeft {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var( --space-xs) + 1px);
}

/*SIDEBAR TOGGLE MENU ICON*/
/*NAVICATION ICON SVG*/
.navIcon svg,
.menuIcon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
}

.menuBtn {
  padding: 0 var(--space-xs);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--navBtn-bg), var(--bg));
  border: 1px solid var(--border);
  color: var(--color);
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: calc(var( --space-xs) + 1px);
}
.menuBtn:hover {
  opacity: 0.8;
}

#closeSidebar {
  position: sticky;
  margin: calc(var( --space-xs) + 1px);
  margin-left: auto;
  background: none;
  justify-content: center;
  align-items: center;
}
#closeSidebar svg {
  width: 25px;
  background: none;
}

.closeModalBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.closeModalBtn:hover {
  opacity: 0.6;
}
@media (min-width: 800px) {
  .menuBtn {
    display: none;
  }
}


.active {
  font-weight: 900;
  background: var(--active);
}
#logoutBtn {
  background: none;
  border: none;
  margin-left: auto;
  height: 100%;
  cursor: pointer;
  color: var(--color);
  transition: all 0.4s ease;
}
#logoutBtn:hover {
  color: #ff0000;

}
.showFlex {
  display: flex;
}
.hide {
  display: none;
}

.closed {
  opacity: 0.6;
  cursor: not-allowed;
}

.lockScroll {
  overflow: hidden;
}


/*LOADER*/
.preLoaderContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
justify-content: center;
align-items: center;
background: var(--card-bg);

  z-index: 999;
  width: 100vw;
  height: 100dvh;
}
.preLoaderContainer .label {
  font-weight: 800;
}
.preLoaderContainer .label span {
  color: var(--link);
}
.tt-wave-loader {
  display: flex;
  align-items: flex-end;
  gap: calc(var( --space-sm) - 2px);
  height: 32px;
}

.tt-wave-loader span {
        border: 1px solid var(--color);
        width: 6px;
        height: 100%;
        background: var(--accent);
        border-radius: 6px;
        animation: tt-wave 1.2s ease-in-out infinite;
      }

      .tt-wave-loader span:nth-child(2) {
        animation-delay: 0.15s;
      }
      .tt-wave-loader span:nth-child(3) {
        animation-delay: 0.3s;
      }

      @keyframes tt-wave {
        0% {
          height: 20%;
          opacity: 0.6;
        }
        40% {
          height: 100%;
          opacity: 1;
        }
        80% {
          height: 20%;
          opacity: 0.6;
        }
        100% {
          height: 20%;
          opacity: 0.6;
        }
      }

      button:has(.btnLoaderContainer) {
        padding: 0;
      }
      .btnLoaderContainer {
  display: flex;
  flex-direction: column;
justify-content: center;
align-items: center;

  width: 100%;
  height: 100%;
      }


   .step-indicator {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  position: absolute;
  right: 20px;
  max-width: 300px;
}

/* Text: "1 / 2" */
.step-indicator::before {
  content: "Step: " attr(data-step) " / " attr(data-total);
  display: block;
  margin-bottom: 0;
}

/* Bar background */
.step-indicator-bar-container {
  width: 100%;
  height: 4px;
  background: var(--navBtn-bg);
  border-radius: 3px;
  overflow: hidden;
}

/* Actual progress bar */
.step-bar {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 3s ease;
}

/* Step widths */
.step-1 { width: 50%; }
.step-2 { width: 100%; }

input.error {
border: #ff0000 soldid 2px;
}