/* ============================
   SPACING UTILITIES
============================ */

/* Margin */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }

/* Horizontal spacing */
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-40 { padding-left: 40px; padding-right: 40px; }

/* Vertical spacing */
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }

/* ============================
   TEXT UTILITIES
============================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: #fff; }
.text-dark { color: #222; }
.text-muted { color: #777; }

.bold { font-weight: 700; }
.semibold { font-weight: 600; }
.light { font-weight: 300; }

.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }

/* ============================
   DISPLAY UTILITIES
============================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

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

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

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

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

/* ============================
   WIDTH UTILITIES
============================ */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.w-33 { width: 33.33%; }
.w-25 { width: 25%; }

.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; }
.max-w-1200 { max-width: 1200px; }

/* ============================
   BACKGROUND UTILITIES
============================ */
.bg-light { background: #f7f7f7; }
.bg-dark { background: #111; }
.bg-white { background: #fff; }
.bg-primary { background: #0055aa; }
.bg-muted { background: #f0f0f0; }

/* ============================
   BORDER UTILITIES
============================ */
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 14px; }
.rounded-sm { border-radius: 4px; }

.border { border: 1px solid #ddd; }
.border-light { border: 1px solid #eee; }
.border-dark { border: 1px solid #333; }

/* ============================
   SHADOW UTILITIES
============================ */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 3px 6px rgba(0,0,0,0.15); }
.shadow-lg { box-shadow: 0 6px 12px rgba(0,0,0,0.2); }

/* ============================
   LAYOUT UTILITIES
============================ */
.centered {
  margin-left: auto;
  margin-right: auto;
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ============================
   RESPONSIVE UTILITIES
============================ */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .text-center-mobile { text-align: center; }
  .mt-mobile-20 { margin-top: 20px; }
  .w-mobile-100 { width: 100%; }
}