/**
 * Utility Classes
 * Reusable single-purpose classes for rapid development
 * La Fille du Fleuriste
 */

/* ===== Display ===== */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.grid {
  display: grid !important;
}

/* Responsive Display */

/* ===== Flexbox Utilities ===== */

.flex-wrap {
  flex-wrap: wrap;
}

/* ===== Text Alignment ===== */
.text-left {
  text-align: left !important;
}

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

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

/* ===== Text Colors ===== */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-error {
  color: var(--color-error) !important;
}

/* ===== Background Colors ===== */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-white {
  background-color: var(--color-bg-light) !important;
}

.bg-light {
  background-color: var(--color-bg) !important;
}

/* ===== Spacing - Margin ===== */

/* Margin Top */

/* Margin Bottom */

/* Margin Left/Right */

/* ===== Spacing - Padding ===== */

/* Padding Top */

/* Padding Bottom */

/* ===== Width & Max-Width ===== */

/* ===== Container ===== */
.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

/* ===== Border Radius ===== */

/* ===== Shadow ===== */

/* ===== Position ===== */
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.sticky {
  position: sticky !important;
}

/* ===== Overflow ===== */

/* ===== Cursor ===== */

/* ===== Opacity ===== */

/* ===== Transitions ===== */
.transition {
  transition: all var(--transition-base);
}

/* ===== Touch Targets ===== */

/* ===== Grid Utilities ===== */
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ===== No Scroll (for modals/overlays) ===== */
.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}