/* static/css/catalog_listing.css */

.listing { 
    display: flex; 
    flex-direction: column; 
}

.listing-item {
    width: 100%;
}

/* СТИЛИ ДЛЯ ТАБЛИЦЫ И КОЛОНОК ТОВАРОВ */
.listing-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.listing-table__row {
    display: flex !important;
    width: 100% !important;
    align-items: center !important; /* Центрируем по вертикали */
    position: relative !important;  /* Для изоляции выезжающего оверлея */
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.listing-table__col2 {
    flex: 1 1 auto !important;
    margin-right: 20px !important; /* Зазор между текстом и лейблами */
}

/* Компактная колонка цены и корзины */
.listing-table__col3 {
    position: relative !important;
    width: 140px !important;
    flex-shrink: 0 !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    pointer-events: none !important;
}

/* Включаем реакцию на мышь ТОЛЬКО для элементов управления */
.listing-table__buy {
    pointer-events: auto !important;
}

/* Контейнер для дефолтного состояния (цены + иконка корзины) */
.cart-default-state {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    transition: opacity 0.25s ease;
}

.listing-table__col3:hover .cart-default-state {
    opacity: 0;
}

/* Выезжающий блок изменения количества (оверлей корзины) */
.cart-hover-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -120%;
    width: 260px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    z-index: 10;
    opacity: 0;
    pointer-events: none !important;
    transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.listing-table__col3:hover .cart-hover-overlay {
    right: 0;
    opacity: 1;
    pointer-events: auto !important;
}

/* Кнопка "Заказать" / "В корзину" */
.btn-order-submit {
    background-color: #0049c6 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: background-color 0.2s !important;
}

.btn-order-submit:hover {
    background-color: #003794 !important;
}