/*
 * ============================================
 * UbahPulsa — Utility Classes
 * Replacements for Tailwind utility classes
 * used across PHP templates.
 * ============================================
 */

/* ===== Scrollbar Hide ===== */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ===== Text Gradient ===== */
.text-gradient {
  background: linear-gradient(135deg, #F5B400, #F39A00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ===== Font Weights (supplement Bootstrap) ===== */
.fw-extrabold { font-weight: 800 !important; }
.fw-900       { font-weight: 900 !important; }

/* ===== Custom Font Sizes ===== */
.fs-2xs  { font-size: 0.62rem !important; }
.fs-xs   { font-size: 0.72rem !important; }
.fs-sm   { font-size: 0.82rem !important; }
.fs-base { font-size: 0.88rem !important; }
.fs-md   { font-size: 0.95rem !important; }
.fs-lg   { font-size: 1.05rem !important; }
.fs-xl   { font-size: 1.3rem !important; }
.fs-2xl  { font-size: 1.75rem !important; }

/* ===== Colors (Tailwind equivalents) ===== */

/* Text colors */
.text-primary-50  { color: var(--color-primary-50) !important; }
.text-primary-400 { color: var(--color-primary-400) !important; }
.text-primary-500 { color: var(--color-primary-500) !important; }
.text-primary-600 { color: var(--color-primary-600) !important; }
.text-primary-700 { color: var(--color-primary-700) !important; }

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

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

.text-danger-500  { color: var(--color-danger-500) !important; }
.text-danger-600  { color: var(--color-danger-600) !important; }
.text-danger-700  { color: var(--color-danger-700) !important; }

.text-gray-400    { color: var(--color-gray-400) !important; }
.text-gray-500    { color: var(--color-gray-500) !important; }
.text-gray-600    { color: var(--color-gray-600) !important; }
.text-gray-700    { color: var(--color-gray-700) !important; }
.text-gray-800    { color: var(--color-gray-800) !important; }

/* Background colors */
.bg-primary-50    { background-color: var(--color-primary-50) !important; }
.bg-primary-100   { background-color: var(--color-primary-100) !important; }
.bg-primary-500   { background-color: var(--color-primary-500) !important; }

.bg-success-50    { background-color: var(--color-success-50) !important; }
.bg-success-100   { background-color: var(--color-success-100) !important; }

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

.bg-danger-50     { background-color: var(--color-danger-50) !important; }
.bg-danger-100    { background-color: var(--color-danger-100) !important; }

.bg-gray-50       { background-color: var(--color-gray-50) !important; }
.bg-gray-100      { background-color: var(--color-gray-100) !important; }
.bg-gray-200      { background-color: var(--color-gray-200) !important; }

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

/* Border colors */
.border-primary-100 { border-color: var(--color-primary-100) !important; }
.border-primary-400 { border-color: var(--color-primary-400) !important; }

.border-success-100 { border-color: var(--color-success-100) !important; }
.border-danger-100  { border-color: var(--color-danger-100) !important; }
.border-danger-200  { border-color: var(--color-danger-100) !important; }
.border-warning-100 { border-color: var(--color-warning-100) !important; }

.border-gray-100    { border-color: var(--color-gray-100) !important; }
.border-gray-200    { border-color: var(--color-gray-200) !important; }

/* ===== Custom Radius ===== */
.rounded-xs  { border-radius: var(--radius-xs) !important; }
.rounded-sm  { border-radius: var(--radius-sm) !important; }
.rounded-md  { border-radius: var(--radius-md) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }

/* ===== Leading (line-height) ===== */
.lh-relaxed { line-height: 1.6 !important; }
.lh-snug    { line-height: 1.35 !important; }
.lh-tight   { line-height: 1.2 !important; }

/* ===== Tracking (letter-spacing) ===== */
.tracking-tight  { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide   { letter-spacing: 0.025em !important; }

/* ===== Object Fit ===== */
.object-cover   { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }

/* ===== Pointer Events ===== */
.pointer-events-none { pointer-events: none !important; }

/* ===== Inset ===== */
.inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* ===== White with Alpha (for gradient headers) ===== */
.bg-white-10 { background: rgba(255, 255, 255, 0.10) !important; }
.bg-white-12 { background: rgba(255, 255, 255, 0.12) !important; }
.bg-white-15 { background: rgba(255, 255, 255, 0.15) !important; }
.bg-white-20 { background: rgba(255, 255, 255, 0.20) !important; }
.bg-white-25 { background: rgba(255, 255, 255, 0.25) !important; }

.border-white-10 { border-color: rgba(255, 255, 255, 0.10) !important; }
.border-white-15 { border-color: rgba(255, 255, 255, 0.15) !important; }
.border-white-20 { border-color: rgba(255, 255, 255, 0.20) !important; }

.text-white-50 { color: rgba(255, 255, 255, 0.50) !important; }
.text-white-70 { color: rgba(255, 255, 255, 0.70) !important; }
.text-white-75 { color: rgba(255, 255, 255, 0.75) !important; }
.text-white-80 { color: rgba(255, 255, 255, 0.80) !important; }

/* ===== Transition ===== */
.transition-all {
  transition: all 0.2s ease !important;
}

/* ===== Active Scale ===== */
.active-scale:active {
  transform: scale(0.98);
}

/* ===== Animate Pulse ===== */
.animate-pulse-custom {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Radial Gradient Background ===== */
.bg-radial-gradient {
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
}

/* ===== Tailwind Spacing Equivalents ===== */
/* Tailwind px-N uses 0.25rem multiplier; Bootstrap uses different scale.
   These match Tailwind's scale for classes still in templates. */

/* Padding */
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.p-3  { padding: 0.75rem !important; }
.p-4  { padding: 1rem !important; }
.p-5  { padding: 1.25rem !important; }
.p-6  { padding: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pb-9 { padding-bottom: 2.25rem !important; }
.pb-10 { padding-bottom: 2.5rem !important; }
.pb-24 { padding-bottom: 6rem !important; }

/* Margin */
.mt-1  { margin-top: 0.25rem !important; }
.mt-2  { margin-top: 0.5rem !important; }
.mt-3  { margin-top: 0.75rem !important; }
.mt-4  { margin-top: 1rem !important; }
.mt-5  { margin-top: 1.25rem !important; }
.mt-6  { margin-top: 1.5rem !important; }
.mt-8  { margin-top: 2rem !important; }
.mb-1  { margin-bottom: 0.25rem !important; }
.mb-2  { margin-bottom: 0.5rem !important; }
.mb-3  { margin-bottom: 0.75rem !important; }
.mb-4  { margin-bottom: 1rem !important; }
.mb-5  { margin-bottom: 1.25rem !important; }
.mb-6  { margin-bottom: 1.5rem !important; }
.mb-8  { margin-bottom: 2rem !important; }
.ml-1  { margin-left: 0.25rem !important; }
.mr-1  { margin-right: 0.25rem !important; }

/* Gap (Tailwind) */
.gap-2  { gap: 0.5rem !important; }
.gap-3  { gap: 0.75rem !important; }
.gap-4  { gap: 1rem !important; }
.gap-5  { gap: 1.25rem !important; }
.gap-6  { gap: 1.5rem !important; }
.gap-8  { gap: 2rem !important; }

/* Fixed widths/heights */
.w-5  { width: 1.25rem !important; }
.w-6  { width: 1.5rem !important; }
.w-8  { width: 2rem !important; }
.w-9  { width: 2.25rem !important; }
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.h-5  { height: 1.25rem !important; }
.h-6  { height: 1.5rem !important; }
.h-8  { height: 2rem !important; }
.h-9  { height: 2.25rem !important; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem !important; }

/* Rounded extras */
.rounded-3xl { border-radius: 1.5rem !important; }

/* Z-index */
.z-0  { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-50 { z-index: 50 !important; }

/* Max-width constraint (used commonly) */
.max-w-540 { max-width: 540px !important; }
.max-w-600 { max-width: 600px !important; }

/* Tailwind-style Opacity Compatibility Utilities */
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-white\/30 { background-color: rgba(255, 255, 255, 0.3) !important; }
.bg-primary-50\/20 { background-color: rgba(10, 87, 211, 0.1) !important; }
.bg-primary-50\/50 { background-color: rgba(10, 87, 211, 0.15) !important; }
.bg-success-50\/50 { background-color: rgba(22, 163, 74, 0.15) !important; }
.bg-gray-50\/50 { background-color: rgba(248, 250, 252, 0.5) !important; }
.bg-success-500\/20 { background-color: rgba(22, 163, 74, 0.2) !important; }
.bg-warning-500\/20 { background-color: rgba(245, 180, 0, 0.2) !important; }
.bg-danger-500\/20 { background-color: rgba(239, 68, 68, 0.2) !important; }

.border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15) !important; }
.border-primary-100\/50 { border-color: rgba(220, 231, 249, 0.5) !important; }
.border-success-500\/30 { border-color: rgba(22, 163, 74, 0.3) !important; }
.border-warning-500\/30 { border-color: rgba(245, 180, 0, 0.3) !important; }
.border-danger-500\/30 { border-color: rgba(239, 68, 68, 0.3) !important; }

.text-white\/60 { color: rgba(255, 255, 255, 0.6) !important; }
.text-white\/70 { color: rgba(255, 255, 255, 0.7) !important; }
.text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; }
.text-white\/85 { color: rgba(255, 255, 255, 0.85) !important; }

.active\:bg-white\/25:active { background-color: rgba(255, 255, 255, 0.25) !important; }
.hover\:bg-white\/30:hover { background-color: rgba(255, 255, 255, 0.3) !important; }