/* Utility Classes */

/* Display */
.d-flex { display: flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

/* Flexbox */
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: end; }
.align-items-center { align-items: center; }
.align-items-start { align-items: start; }
.align-items-end { align-items: end; }
.flex-column { flex-direction: column; }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margins */
.m-auto { margin: auto; }
.mt-2 { margin-top: var(--spacing-xs); }
.mt-3 { margin-top: var(--spacing-sm); }
.mt-5 { margin-top: var(--spacing-md); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--spacing-sm); }
.mb-20 { margin-bottom: var(--spacing-md); }
.mb-30 { margin-bottom: var(--spacing-xl); }
.ms-2 { margin-left: var(--spacing-xs); }

/* Padding */
.p-25 { padding: var(--spacing-lg); }
.py-5 { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

/* Width */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }

/* Height */
.h-100 { height: 100%; }
.min-h-100vh { min-height: 100vh; }

/* Position */
.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* Z-index */
.z-9 { z-index: var(--z-index-overlay); }
.z-999 { z-index: var(--z-index-modal); }
.z-9999 { z-index: var(--z-index-tooltip); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Colors */
.text-white { color: var(--white); }
.text-black { color: var(--black); }
.text-primary { color: var(--primary-blue); }
.text-muted { color: #ACACAC; }

.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.bg-primary { background-color: var(--primary-blue); }

/* Borders */
.border-0 { border: none; }
.border-radius { border-radius: var(--border-radius-md); }

/* Step Content - For JavaScript show/hide */
.step-content { 
  display: none; 
}

.step-content.active { 
  display: block; 
}

/* Responsive utilities */
@media (max-width: 480px) {
  .w-sm-100 { width: 100% !important; }
  .text-sm-center { text-align: center !important; }
  .p-sm-0 { padding: 0px !important; }
  .m-sm-0 { margin: 0px !important; }
}