/**
 * Tailwind CSS Utilities - Lightweight
 * Only the classes used in custom widgets
 */

/* ============================================
   DISPLAY & FLEXBOX
   ============================================ */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
   .md\:grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    
/* ============================================
   GRID SYSTEM
   ============================================ */
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap:3rem;}
.gap-10 { gap: 2.5rem; }

/* Grid Columns - Mobile First */
@media (max-width: 991px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:order-1 { order: 1; }
    .lg\:order-2 { order: 2; }
}

/* ============================================
   SPACING - MARGIN
   ============================================ */
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-16 { margin-top: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 {margin-top: 1.5rem}
.mt-5 { margin-top: 3.5rem;}

/* ============================================
   SPACING - PADDING
   ============================================ */
.pl-10 { padding-left: 2.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pt-5 { padding-top: 1.25rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* ============================================
   SPACING - SPACE BETWEEN
   ============================================ */
.space-y-4 > * + * { margin-top: 1rem; }

/* ============================================
   TYPOGRAPHY - SIZE
   ============================================ */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* ============================================
   TYPOGRAPHY - WEIGHT
   ============================================ */
.font-bold { font-weight: 700; }

/* ============================================
   TYPOGRAPHY - LINE HEIGHT
   ============================================ */
.leading-relaxed { line-height: 1.625; }

/* ============================================
   COLORS - TEXT
   ============================================ */
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

/* ============================================
   SIZING
   ============================================ */
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }

/* ============================================
   POSITIONING
   ============================================ */
.relative { position: relative; }
.z-10 { z-index: 10; }

/* ============================================
   BORDERS
   ============================================ */
.border { border-width: 1px; }
.rounded-2xl { border-radius: 1rem; }
.border-red-500\/20 { border-color: rgb(239 68 68 / 0.2); }

/* ============================================
   SHADOWS
   ============================================ */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */
.text-center { text-align: center; }

/* ============================================
   ICON SPACING (for Font Awesome)
   ============================================ */
.mr-3 { margin-right: 0.75rem; }

/* ============================================
   GRADIENTS
   ============================================ */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-red-500\/20 {
    --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-red-600\/10 {
    --tw-gradient-to: rgb(220 38 38 / 0.1) var(--tw-gradient-to-position);
}

/* ============================================
   BACKDROP FILTERS
   ============================================ */
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* ============================================
   CUSTOM GRADIENT TEXT
   ============================================ */
.gradient-text {
    background: linear-gradient(135deg, #b00400 0%, #ff6b6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}