/*
 * LatamConnect - Utility Classes
 * Utility classes for spacing, colors, and common patterns
 */

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.mg-bottom-16px {
  margin-bottom: 16px;
}

.mg-bottom-32px {
  margin-bottom: 32px;
}

.pd-top-32px {
  padding-top: 32px;
}

.pd-bottom-32px {
  padding-bottom: 32px;
}

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.hidden {
  display: none;
}

.visible {
  display: block;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ==========================================================================
   Color Utilities
   ========================================================================== */

.text-primary {
  color: var(--primary-color, #000);
}

.text-secondary {
  color: var(--secondary-color, #666);
}

.bg-white {
  background-color: #fff;
}

.bg-light {
  background-color: #f8f9fa;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

@media (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }
  
  .visible-mobile {
    display: block;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none;
  }
  
  .visible-desktop {
    display: block;
  }
}