/* Утилитарные классы для замены inline стилей */

/* Контейнеры */
.container-wide {
    max-width: 1600px !important;
}

.container-narrow {
    max-width: 800px !important;
}

/* Отступы */
.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }
.p-40 { padding: 40px; }
.p-60 { padding: 60px 0; }
.p-80 { padding: 80px 0; }

.pt-40 { padding-top: 40px; }
.pt-60 { padding-top: 60px; }
.pt-80 { padding-top: 80px; }

.pb-40 { padding-bottom: 40px; }
.pb-60 { padding-bottom: 60px; }
.pb-80 { padding-bottom: 80px; }

/* Отступы внешние */
.m-0 { margin: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }

.mt-20 { margin-top: 20px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* Фоны */
.bg-white { background: white; }
.bg-gray-light { background: #f8f9fa; }
.bg-primary { background: #007aff; }
.bg-gradient-primary {
    background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
}

/* Текст */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: white; }
.text-primary { color: #007aff; }
.text-secondary { color: #86868b; }
.text-dark { color: #1d1d1f; }

/* Размеры шрифта */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 2rem; }

/* Вес шрифта */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-60 { gap: 60px; }
.gap-80 { gap: 80px; }
.gap-100 { gap: 100px; }

/* Границы */
.rounded-8 { border-radius: 8px; }
.rounded-12 { border-radius: 12px; }
.rounded-16 { border-radius: 16px; }
.rounded-20 { border-radius: 20px; }

.border { border: 1px solid #e5e5e7; }
.border-primary { border: 1px solid #007aff; }

/* Тени */
.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }

/* Позиционирование */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-90 { top: 90px; }

/* Размеры */
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-280 { max-width: 280px; }
.max-w-500 { max-width: 500px; }
.max-w-800 { max-width: 800px; }
.max-w-1200 { max-width: 1200px; }

/* Переходы */
.transition { transition: all 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }

/* Hover эффекты */
.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Адаптивность */
@media (max-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .md\:gap-24 { gap: 24px; }
    .md\:p-16 { padding: 16px; }
    .md\:text-2xl { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .sm\:gap-16 { gap: 16px; }
    .sm\:p-16 { padding: 16px; }
    .sm\:text-lg { font-size: 1.125rem; }
}