/*
===============================================
Cekkirimanku.com - TRACKING UTILITIES
Helper Classes & Utility Styles
Version: 1.0
===============================================
*/

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

.text-primary {
    color: #ed1d24 !important;
}

.text-secondary {
    color: #283891 !important;
}

.text-dark {
    color: #1a1a1a !important;
}

.text-gray {
    color: #666666 !important;
}

.text-muted {
    color: #999999 !important;
}

.text-white {
    color: #ffffff !important;
}

.text-success {
    color: #28a745 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-danger {
    color: #dc3545 !important;
}

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

.bg-primary {
    background-color: #ed1d24 !important;
}

.bg-secondary {
    background-color: #283891 !important;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

/*
===============================================
GRADIENT UTILITIES
===============================================
*/

.gradient-primary {
    background: linear-gradient(135deg, #ed1d24 0%, #d41920 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #283891 0%, #1a1f5c 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

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

.shadow-sm {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.shadow-md {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

.shadow-lg {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.shadow-xl {
    box-shadow: 0 12px 48px rgba(0,0,0,0.2) !important;
}

.shadow-none {
    box-shadow: none !important;
}

/*
===============================================
RADIUS UTILITIES
===============================================
*/

.rounded-sm {
    border-radius: 4px !important;
}

.rounded-md {
    border-radius: 8px !important;
}

.rounded-lg {
    border-radius: 12px !important;
}

.rounded-xl {
    border-radius: 16px !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

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

.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }

.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }

.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }

.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }

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

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

/*
===============================================
BORDER UTILITIES
===============================================
*/

.border-primary {
    border-color: #ed1d24 !important;
}

.border-secondary {
    border-color: #283891 !important;
}

.border-light {
    border-color: #f0f0f0 !important;
}

.border-none {
    border: none !important;
}

.border-top {
    border-top: 1px solid #e8e8e8 !important;
}

.border-bottom {
    border-bottom: 1px solid #e8e8e8 !important;
}

.border-left {
    border-left: 4px solid #ed1d24 !important;
}

.border-right {
    border-right: 4px solid #ed1d24 !important;
}

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

.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;
}

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

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

/*
===============================================
TYPOGRAPHY UTILITIES
===============================================
*/

.font-primary {
    font-family: 'Inter', sans-serif !important;
}

.font-secondary {
    font-family: 'Open Sans', sans-serif !important;
}

.font-mono {
    font-family: 'Courier New', monospace !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-semi-bold {
    font-weight: 600 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-regular {
    font-weight: 400 !important;
}

.text-xs {
    font-size: 12px !important;
}

.text-sm {
    font-size: 14px !important;
}

.text-base {
    font-size: 16px !important;
}

.text-lg {
    font-size: 18px !important;
}

.text-xl {
    font-size: 20px !important;
}

.text-2xl {
    font-size: 24px !important;
}

.text-3xl {
    font-size: 28px !important;
}

.text-4xl {
    font-size: 32px !important;
}

.text-5xl {
    font-size: 36px !important;
}

.line-height-tight {
    line-height: 1.2 !important;
}

.line-height-normal {
    line-height: 1.5 !important;
}

.line-height-relaxed {
    line-height: 1.75 !important;
}

.line-height-loose {
    line-height: 2 !important;
}

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

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

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

.text-justify {
    text-align: justify !important;
}

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

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/*
===============================================
TRANSITION UTILITIES
===============================================
*/

.transition-all {
    transition: all 0.3s ease !important;
}

.transition-color {
    transition: color 0.3s ease !important;
}

.transition-bg {
    transition: background-color 0.3s ease !important;
}

.transition-shadow {
    transition: box-shadow 0.3s ease !important;
}

.transition-transform {
    transition: transform 0.3s ease !important;
}

.duration-fast {
    transition-duration: 0.2s !important;
}

.duration-normal {
    transition-duration: 0.3s !important;
}

.duration-slow {
    transition-duration: 0.5s !important;
}

/*
===============================================
TRANSFORM UTILITIES
===============================================
*/

.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.translate-x-1 { transform: translateX(4px); }
.translate-x-2 { transform: translateX(8px); }

.translate-y-1 { transform: translateY(4px); }
.translate-y-2 { transform: translateY(8px); }

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }

/*
===============================================
VISIBILITY UTILITIES
===============================================
*/

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

.visible {
    visibility: visible !important;
}

/*
===============================================
POSITIONING UTILITIES
===============================================
*/

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

.top-0 { top: 0 !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }

/*
===============================================
SIZE UTILITIES
===============================================
*/

.w-full { width: 100% !important; }
.w-auto { width: auto !important; }

.h-full { height: 100% !important; }
.h-auto { height: auto !important; }

.max-w-container { max-width: 1200px !important; }
.max-w-lg { max-width: 500px !important; }
.max-w-md { max-width: 400px !important; }
.max-w-sm { max-width: 300px !important; }

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

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

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

.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-auto { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }

/*
===============================================
RESPONSIVE UTILITIES PREFIXES
===============================================
*/

/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

@media (max-width: 768px) {
    .md-hidden { display: none !important; }
    .md-block { display: block !important; }
}

@media (max-width: 640px) {
    .sm-hidden { display: none !important; }
    .sm-block { display: block !important; }
    .sm-full { width: 100% !important; }
}

/*
===============================================
END OF UTILITIES
===============================================
*/