/* =========================================================
   SINEM / UTILITIES
   Quick helpers (spacing, text, display)
========================================================= */

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

.mt-0{margin-top:0!important;}
.mt-10{margin-top:10px!important;}
.mt-20{margin-top:20px!important;}
.mt-30{margin-top:30px!important;}
.mt-40{margin-top:40px!important;}

.mb-0{margin-bottom:0!important;}
.mb-10{margin-bottom:10px!important;}
.mb-20{margin-bottom:20px!important;}
.mb-30{margin-bottom:30px!important;}
.mb-40{margin-bottom:40px!important;}

.pt-20{padding-top:20px!important;}
.pb-20{padding-bottom:20px!important;}
.p-20{padding:20px!important;}
.p-30{padding:30px!important;}

/* =========================
   TEXT
========================= */

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

.text-muted{color:var(--color-text-soft)!important;}
.text-strong{color:var(--color-text-strong)!important;}
.text-accent{color:var(--color-accent)!important;}

.text-sm{font-size:14px!important;}
.text-md{font-size:16px!important;}
.text-lg{font-size:18px!important;}
.text-xl{font-size:22px!important;}

/* =========================
   DISPLAY
========================= */

.d-block{display:block!important;}
.d-flex{display:flex!important;}
.d-grid{display:grid!important;}
.d-none{display:none!important;}

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

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

.flex-column{
  display:flex;
  flex-direction:column;
}

/* =========================
   WIDTH / HEIGHT
========================= */

.w-100{width:100%!important;}
.h-100{height:100%!important;}

/* =========================
   BORDER / RADIUS
========================= */

.rounded{border-radius:var(--radius-md)!important;}
.rounded-lg{border-radius:var(--radius-lg)!important;}
.rounded-xl{border-radius:var(--radius-xl)!important;}

.border{
  border:1px solid var(--color-line)!important;
}

.border-soft{
  border:1px solid rgba(234,223,215,.6)!important;
}

/* =========================
   SHADOW
========================= */

.shadow-sm{box-shadow:var(--shadow-sm)!important;}
.shadow-md{box-shadow:var(--shadow-md)!important;}
.shadow-lg{box-shadow:var(--shadow-lg)!important;}

/* =========================
   BACKGROUND
========================= */

.bg-white{background:#fff!important;}
.bg-soft{background:var(--color-bg-soft)!important;}
.bg-card{background:var(--color-card)!important;}

/* =========================
   POSITION
========================= */

.relative{position:relative!important;}
.absolute{position:absolute!important;}

/* =========================
   OVERFLOW
========================= */

.overflow-hidden{overflow:hidden!important;}

/* =========================
   Z INDEX
========================= */

.z-1{z-index:1!important;}
.z-2{z-index:2!important;}
.z-3{z-index:3!important;}

/* =========================
   CURSOR
========================= */

.cursor-pointer{cursor:pointer!important;}

/* =========================
   TRANSITIONS
========================= */

.transition{
  transition:all var(--transition-base)!important;
}

/* =========================
   HOVER HELPERS
========================= */

.hover-lift{
  transition:transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}

/* =========================
   OPACITY
========================= */

.opacity-0{opacity:0!important;}
.opacity-50{opacity:.5!important;}
.opacity-75{opacity:.75!important;}
.opacity-100{opacity:1!important;}