/* =====================================
   WordPress-safe Utility Classes
   Prefixed with .u-
   ===================================== */

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
}

/* ---------- SPACING ---------- */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }

.u-ml-0 { margin-left: 0 !important; }
.u-ml-1 { margin-left: var(--space-1) !important; }
.u-ml-2 { margin-left: var(--space-2) !important; }
.u-ml-3 { margin-left: var(--space-3) !important; }
.u-ml-4 { margin-left: var(--space-4) !important; }
.u-ml-5 { margin-left: var(--space-5) !important; }

.u-mr-0 { margin-right: 0 !important; }
.u-mr-1 { margin-right: var(--space-1) !important; }
.u-mr-2 { margin-right: var(--space-2) !important; }
.u-mr-3 { margin-right: var(--space-3) !important; }
.u-mr-4 { margin-right: var(--space-4) !important; }
.u-mr-5 { margin-right: var(--space-5) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }

.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.u-p-0 { padding: 0 !important; }
.u-p-1 { padding: var(--space-1) !important; }
.u-p-2 { padding: var(--space-2) !important; }
.u-p-3 { padding: var(--space-3) !important; }
.u-p-4 { padding: var(--space-4) !important; }
.u-p-5 { padding: var(--space-5) !important; }


.u-pl-0 { padding-left: 0 !important; }
.u-pl-1 { padding-left: var(--space-1) !important; }
.u-pl-2 { padding-left: var(--space-2) !important; }
.u-pl-3 { padding-left: var(--space-3) !important; }
.u-pl-4 { padding-left: var(--space-4) !important; }
.u-pl-5 { padding-left: var(--space-5) !important; }

.u-pr-0 { padding-right: 0 !important; }
.u-pr-1 { padding-right: var(--space-1) !important; }
.u-pr-2 { padding-right: var(--space-2) !important; }
.u-pr-3 { padding-right: var(--space-3) !important; }
.u-pr-4 { padding-right: var(--space-4) !important; }
.u-pr-5 { padding-right: var(--space-5) !important; }

/* ---------- DISPLAY ---------- */
.u-d-block { display: block !important; }
.u-d-inline { display: inline !important; }
.u-d-inline-block { display: inline-block !important; }
.u-d-flex { display: flex !important; }
.u-d-inline-flex { display: inline-flex !important; }
.u-d-none { display: none !important; }

/* ---------- FLEX ---------- */
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-column { flex-direction: column !important; }
.u-flex-row { flex-direction: row !important; }
.u-justify-start { justify-content: flex-start !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-justify-between { justify-content: space-between !important; }
.u-align-start { align-items: flex-start !important; }
.u-align-center { align-items: center !important; }
.u-align-end { align-items: flex-end !important; }
.u-gap-1 { gap: var(--space-1) !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.u-gap-3 { gap: var(--space-3) !important; }

/* ---------- TEXT ---------- */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }

.u-text-uppercase { text-transform: uppercase !important; }
.u-text-lowercase { text-transform: lowercase !important; }
.u-text-capitalize { text-transform: capitalize !important; }

.u-text-muted { color: #6c757d !important; }
.u-text-white { color: #fff !important; }
.u-text-dark { color: #212529 !important; }

.u-fw-light { font-weight: 300 !important; }
.u-fw-normal { font-weight: 400 !important; }
.u-fw-bold { font-weight: 700 !important; }

/* ---------- BACKGROUND ---------- */
.u-bg-light { background-color: #f8f9fa !important; }
.u-bg-dark { background-color: #212529 !important; color: #fff !important; }
.u-bg-primary { background-color: #0d6efd !important; color: #fff !important; }
.u-bg-success { background-color: #198754 !important; color: #fff !important; }
.u-bg-danger { background-color: #dc3545 !important; color: #fff !important; }

/* ---------- BORDER ---------- */
.u-border { border: 1px solid #dee2e6 !important; }
.u-border-0 { border: 0 !important; }
.u-rounded { border-radius: 0.25rem !important; }
.u-rounded-pill { border-radius: 50rem !important; }

/* ---------- WIDTH & HEIGHT ---------- */
.u-w-100 { width: 100% !important; }
.u-max-w-600 { max-width: 600px !important; }
.u-max-w-800 { max-width: 800px !important; }
.u-h-auto { height: auto !important; }

/* ---------- POSITION ---------- */
.u-position-relative { position: relative !important; }
.u-position-absolute { position: absolute !important; }
.u-position-fixed { position: fixed !important; }
.u-top-0 { top: 0 !important; }
.u-bottom-0 { bottom: 0 !important; }
.u-left-0 { left: 0 !important; }
.u-right-0 { right: 0 !important; }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 576px) {
  .u-d-sm-block { display: block !important; }
  .u-d-sm-flex { display: flex !important; }
  .u-d-sm-none { display: none !important; }
  .u-mt-sm-3 { margin-top: var(--space-3) !important; }
}

@media (min-width: 768px) {
  .u-d-md-block { display: block !important; }
  .u-d-md-flex { display: flex !important; }
  .u-d-md-none { display: none !important; }
  .u-mt-md-4 { margin-top: var(--space-4) !important; }
  .u-text-md-center { text-align: center !important; }
}

@media (min-width: 992px) {
  .u-d-lg-block { display: block !important; }
  .u-d-lg-flex { display: flex !important; }
  .u-d-lg-none { display: none !important; }
  .u-mt-lg-5 { margin-top: var(--space-5) !important; }
  .u-text-lg-right { text-align: right !important; }
}

/* ---------- MISC ---------- */
.u-overflow-hidden { overflow: hidden !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }
.u-shadow { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important; }
.u-opacity-75 { opacity: .75 !important; }
.u-opacity-50 { opacity: .5 !important; }