/* Hide form steps by default */
.form-step {
  display: none;
}
.form-step.active-step {
  display: block;
}

/* Navigation Item States */
.step-nav-item .step-circle {
  background-color: #aeaeae; /* default gray */
  color: #aeaeae;
  transition: all 0.3s ease;
}
.step-nav-item .step-title {
  color: #6b7280; /* default gray text */
  transition: all 0.3s ease;
}

/* Active state for navigation */
.step-nav-item.active .step-circle {
  background-color: #087fe7; /* blue */
}
.step-nav-item.active .step-circle > div {
  color: #ffffff; /* white number */
}
.step-nav-item.active .step-title {
  color: #087fe7; /* darker blue */
}

/* Completed state for navigation */
.step-nav-item.completed .step-circle {
  background-color: #7daf48; /* green */
}
.step-nav-item.completed .step-circle > div {
  color: #ffffff; /* white number */
}
.step-nav-item.completed .step-title {
  color: black; /* black text */
}

/* Next/Submit Button States */
.button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.next-button,
.form-button-2 {
  transition: opacity 0.3s ease;
}

/* Force the dropdown to scroll */
/* Force scrollbar to appear & style it */
.iti__country-list {
  max-height: 300px !important;
  overflow-y: scroll !important; /* Always show scrollbar */
  scrollbar-width: auto !important; /* For Firefox */
  scrollbar-color: #888 #f1f1f1 !important; /* For Firefox */
  position: absolute !important;
  z-index: 9999 !important;
}

/* Custom scrollbar styling (Chrome, Edge, Safari) */
.iti__country-list::-webkit-scrollbar {
  width: 10px !important; /* Makes scrollbar wider for easier dragging */
}
.iti__country-list::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 5px !important;
}
.iti__country-list::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 5px !important;
}
.iti__country-list::-webkit-scrollbar-thumb:hover {
  background: #555 !important; /* Darker on hover */
}
/* Add smooth transitions if needed */
/* Button States */
.tab-button .full-text {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.tab-button.active .full-text {
  display: block;
  opacity: 1;
}
.tab-button.active .heading-style-h3:not(.full-text) {
  display: none;
}

/* Tab Content */
.tab-content {
  display: none;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-content.active {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

.tab-button.inactive {
  background-color: #e5e7eb !important;
  color: #6b7280 !important;
}
.tab-button {
  transition: all 0.35s ease-in-out;
  overflow: hidden;
  position: relative;
}
.tab-button.inactive:hover {
  background-color: #d1d5db !important;
}

/* Add this for smooth text transition */
.tab-button .heading-style-h3:not(.full-text) {
  transition: opacity 0.2s ease-in-out;
}
.tab-button.inactive .heading-style-h3:not(.full-text) {
  opacity: 1;
}
.tab-button.active .heading-style-h3:not(.full-text) {
  opacity: 0;
}