/* ==================== СТАНДАРТНЫЕ FLEX СТИЛИ ==================== */

/* Основные flex-контейнеры */
.flex {
    display: flex !important;
}

.flex-inline {
    display: inline-flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

/* Wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* Выравнивание по главной оси (justify-content) */
.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.justify-evenly {
    justify-content: space-evenly !important;
}

/* Выравнивание по поперечной оси (align-items) */
.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

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

.align-baseline {
    align-items: baseline !important;
}

.align-stretch {
    align-items: stretch !important;
}

/* Выравнивание строк (align-content) */
.content-start {
    align-content: flex-start !important;
}

.content-end {
    align-content: flex-end !important;
}

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

.content-between {
    align-content: space-between !important;
}

.content-around {
    align-content: space-around !important;
}

.content-stretch {
    align-content: stretch !important;
}

/* Выравнивание отдельного элемента (align-self) */
.self-start {
    align-self: flex-start !important;
}

.self-end {
    align-self: flex-end !important;
}

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

.self-baseline {
    align-self: baseline !important;
}

.self-stretch {
    align-self: stretch !important;
}

/* Распределение пространства (flex-grow/flex-shrink) */
.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-grow-2 {
    flex-grow: 2 !important;
}

.flex-grow-3 {
    flex-grow: 3 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-shrink-2 {
    flex-shrink: 2 !important;
}

.flex-shrink-3 {
    flex-shrink: 3 !important;
}

/* Размер элементов (flex-basis) */
.flex-basis-auto {
    flex-basis: auto !important;
}

.flex-basis-0 {
    flex-basis: 0 !important;
}

.flex-basis-25 {
    flex-basis: 25% !important;
}

.flex-basis-33 {
    flex-basis: 33.333% !important;
}

.flex-basis-50 {
    flex-basis: 50% !important;
}

.flex-basis-66 {
    flex-basis: 66.666% !important;
}

.flex-basis-75 {
    flex-basis: 75% !important;
}

.flex-basis-100 {
    flex-basis: 100% !important;
}

/* Порядок элементов (order) */
.order-first {
    order: -1 !important;
}

.order-last {
    order: 999 !important;
}

.order-0 {
    order: 0 !important;
}

.order-1 {
    order: 1 !important;
}

.order-2 {
    order: 2 !important;
}

.order-3 {
    order: 3 !important;
}

.order-4 {
    order: 4 !important;
}

.order-5 {
    order: 5 !important;
}

/* Gap (промежутки) */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 2rem !important;
}

.gap-6 {
    gap: 3rem !important;
}

.gap-7 {
    gap: 4rem !important;
}

.gap-8 {
    gap: 5rem !important;
}

/* Row-gap */
.row-gap-0 {
    row-gap: 0 !important;
}

.row-gap-1 {
    row-gap: 0.25rem !important;
}

.row-gap-2 {
    row-gap: 0.5rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

.row-gap-4 {
    row-gap: 1.5rem !important;
}

.row-gap-5 {
    row-gap: 2rem !important;
}

.row-gap-6 {
    row-gap: 3rem !important;
}

.row-gap-7 {
    row-gap: 4rem !important;
}

.row-gap-8 {
    row-gap: 5rem !important;
}

/* Column-gap */
.column-gap-0 {
    column-gap: 0 !important;
}

.column-gap-1 {
    column-gap: 0.25rem !important;
}

.column-gap-2 {
    column-gap: 0.5rem !important;
}

.column-gap-3 {
    column-gap: 1rem !important;
}

.column-gap-4 {
    column-gap: 1.5rem !important;
}

.column-gap-5 {
    column-gap: 2rem !important;
}

.column-gap-6 {
    column-gap: 3rem !important;
}

.column-gap-7 {
    column-gap: 4rem !important;
}

.column-gap-8 {
    column-gap: 5rem !important;
}

/* ==================== УТИЛИТЫ ==================== */

/* Центрирование по центру (горизонтально и вертикально) */
.flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.flex-center-vertical {
    display: flex !important;
    align-items: center !important;
}

.flex-center-horizontal {
    display: flex !important;
    justify-content: center !important;
}

/* Пространство между элементами */
.flex-space-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Равномерное распределение */
.flex-space-around {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

/* Растягивание */
.flex-stretch {
    display: flex !important;
    align-items: stretch !important;
}

/* Перенос строк */
.flex-multiline {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Автоматические отступы */
.flex-auto {
    flex: 1 1 auto !important;
}

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

/* Компактные классы для быстрого использования */
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.justify-sb {
    justify-content: space-between !important;
}

.justify-sa {
    justify-content: space-around !important;
}

.align-c {
    align-items: center !important;
}

.flex-1 {
    flex: 1 !important;
}

.flex-2 {
    flex: 2 !important;
}

.flex-3 {
    flex: 3 !important;
}

/* ==================== ОТЗЫВЧИВЫЕ FLEX СТИЛИ ==================== */

@media (max-width: 576px) {
    .flex-sm {
        display: flex !important;
    }
    
    .flex-sm-column {
        flex-direction: column !important;
    }
    
    .flex-sm-row {
        flex-direction: row !important;
    }
    
    .flex-sm-wrap {
        flex-wrap: wrap !important;
    }
    
    .justify-sm-center {
        justify-content: center !important;
    }
    
    .align-sm-center {
        align-items: center !important;
    }
}

@media (max-width: 768px) {
    .flex-md {
        display: flex !important;
    }
    
    .flex-md-column {
        flex-direction: column !important;
    }
    
    .flex-md-row {
        flex-direction: row !important;
    }
    
    .flex-md-wrap {
        flex-wrap: wrap !important;
    }
    
    .justify-md-center {
        justify-content: center !important;
    }
    
    .align-md-center {
        align-items: center !important;
    }
}

@media (max-width: 992px) {
    .flex-lg {
        display: flex !important;
    }
    
    .flex-lg-column {
        flex-direction: column !important;
    }
    
    .flex-lg-row {
        flex-direction: row !important;
    }
    
    .flex-lg-wrap {
        flex-wrap: wrap !important;
    }
    
    .justify-lg-center {
        justify-content: center !important;
    }
    
    .align-lg-center {
        align-items: center !important;
    }
}

@media (max-width: 1200px) {
    .flex-xl {
        display: flex !important;
    }
    
    .flex-xl-column {
        flex-direction: column !important;
    }
    
    .flex-xl-row {
        flex-direction: row !important;
    }
    
    .flex-xl-wrap {
        flex-wrap: wrap !important;
    }
    
    .justify-xl-center {
        justify-content: center !important;
    }
    
    .align-xl-center {
        align-items: center !important;
    }
}

/* ==================== ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ==================== */
/*
<div class="flex justify-between align-center">...</div>
<div class="flex flex-wrap gap-3">...</div>
<div class="flex-center">...</div>
<div class="d-flex justify-sb align-c">...</div>
<div class="flex flex-column gap-2">...</div>
*/