/**
 * FFGroup Custom Loop Cart - Stylesheet
 * 
 * Purpose: Добавление quantity selector (- / input / +) и иконки корзины
 * в карточки товаров каталога WooCommerce (shop/category pages).
 * 
 * Features:
 * - Компактный layout (цена + quantity + кнопка в один ряд)
 * - Переопределение стилей темы Ecomall
 * - Полное подавление popup "Додано в кошик"
 * - Индикация успешного добавления в корзину
 * - Адаптивность
 * 
 * Integration: Подключается через wp_enqueue_style в functions.php
 * Dependencies: WooCommerce, Ecomall theme
 * 
 * @package Ecomall Child Theme
 * @since 1.0.0
 */

/* ========================================================================
   1. LAYOUT: Форма в один ряд (Цена + Quantity + Кнопка)
   ======================================================================== */

/**
 * Основной контейнер формы
 * - Flexbox layout для выстраивания элементов в ряд
 * - Порядок: Цена -> Quantity -> Кнопка
 * - Отменяет правила темы Ecomall
 * 
 * IMPORTANT: form.ff-loop-cart is PARENT of .meta-wrapper, not child!
 * Actual HTML structure: <section class="product"><div class="product-wrapper"><form class="ff-loop-cart"></form></div></section>
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/**
 * Отмена width: 100% для всех детей формы
 * Тема Ecomall устанавливает .meta-wrapper > * { width: 100% }
 * Это ломает layout, делая каждый элемент на всю ширину
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart>* {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/**
 * Скрыть стандартную цену темы в каталоге
 * Мы показываем цену внутри нашей формы ff-loop-cart
 * Это скрывает дублирующую цену от темы/WooCommerce
 */
.woocommerce .products .product .product-wrapper .price:not(.ff-loop-cart .price) {
    display: none !important;
}


/* ========================================================================
   2. PRICE: Цена товара
   ======================================================================== */

/**
 * Контейнер цены
 * - Занимает доступное пространство слева
 * - Размер шрифта и цвет от темы
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}

/**
 * Amount wrapper
 * - Предотвращает перенос
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price .price,
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price .woocommerce-Price-amount {
    white-space: nowrap !important;
    display: inline-block !important;
}

/**
 * Знак валюты (₴)
 * - Уменьшенный размер чтобы не переносилось
 * - Меньше отступ
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price .woocommerce-Price-currencySymbol {
    font-size: 0.85em !important;
    margin-left: 2px !important;
}

/**
 * Старая цена (если есть скидка)
 * - Меньший размер и серый цвет
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price del,
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price del .woocommerce-Price-amount {
    font-size: 13px !important;
    opacity: 0.6 !important;
    font-weight: normal !important;
}

/* ========================================================================
   3. QUANTITY BLOCK: Селектор количества (- / input / +)
   ======================================================================== */

/**
 * Wrapper для quantity и кнопки, чтобы они всегда были на одной строке
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    /* Forces them to stay on same line */
    width: 100% !important;
    flex: 0 0 100% !important;
    gap: 8px !important;
}

/**
 * Контейнер quantity
 * - Увеличенная ширина для более аккуратного вида
 * - Не растягивается на всю ширину
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/**
 * Внутренний wrapper кнопок (создается темой Ecomall)
 * - Flexbox для выравнивания minus/input/plus
 * - Увеличенные gap для более аккуратного вида
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity .number-button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0px !important;
    width: auto !important;
    flex-wrap: nowrap !important;
}

/**
 * Кнопки Minus (-) и Plus (+)
 * - Увеличенные размеры: 36x36px (было 34x34px)
 * - Border-radius для rounded углов
 * - CRITICAL: z-index must be higher than input to be clickable
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity .number-button .minus,
.woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity .number-button .plus {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    line-height: 34px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    flex: 0 0 36px !important;
    font-size: 16px !important;
    font-weight: 500 !important;

}

/**
 * Input для ввода количества
 * - Увеличенная ширина: 64px (было 56px)
 * - Увеличенная высота: 36px (было 34px)
 * - Центрированный текст
 * - CRITICAL: z-index MUST be higher than buttons to be clickable in center
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity input.qty {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 2px !important; /* Fixed: enormous padding squashed content! */
    margin: 0 !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    flex: 0 0 90px !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    /* CRITICAL: Input ABOVE buttons so center is clickable */
    position: relative !important;
    pointer-events: auto !important;
}

/* ========================================================================
   4. CART BUTTON: Кнопка "Добавить в корзину" (иконка)
   ======================================================================== */

/**
 * Кнопка корзины
 * - Full width на второй строке
 * - С текстом "Додати в кошик"
 * - Иконка + текст внутри
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn {
    /* Icon-only square button on all screen sizes */
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    /* Flex: fixed size, no grow/shrink */
    flex: 0 0 42px !important;
    overflow: hidden !important;

    /* Spacing — no horizontal padding since icon-only */
    padding: 0 !important;
    margin: 0 !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;

    /* Style */
    border-radius: 10px !important;
    line-height: 1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;

    /* Transition для smooth анимации */
    transition: all 0.3s ease !important;
}

/* Скрываем текст кнопки на ВСЕХ устройствах — только иконка */
.woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn span.ff-loop-cart-btn-text {
    display: none !important;
}

/**
 * SVG иконка корзины
 * - Размер 20x20px (было 18x18px)
 * - currentColor наследует цвет от кнопки
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/**
 * Stroke элементы SVG (круги, линии)
 * - currentColor для наследования цвета кнопки темы
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-icon .i-stroke {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-miterlimit: 10 !important;
}

/**
 * Fill элементы SVG (корзина, стрелка)
 * - currentColor для наследования цвета кнопки темы
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-icon .i-fill {
    fill: currentColor !important;
}

/* ========================================================================
   5. POPUP SUPPRESSION: Подавление popup "Додано в кошик"
   ======================================================================== */

/**
 * Полное скрытие всех вариантов popup темы Ecomall
 * - Множественные селекторы для покрытия всех случаев
 * - pointer-events: none предотвращает клики
 * - z-index: -1 убирает из слоев рендера
 */
#ts-add-to-cart-popup-modal,
#ts-add-to-cart-popup-modal *,
.ts-add-to-cart-popup-modal,
.ts-add-to-cart-popup-modal *,
.add-to-cart-popup-container,
.add-to-cart-popup-container.popup-container,
#ts-add-to-cart-popup-modal .overlay,
.ts-popup-modal .overlay,
body.show-popup div.overlay,
div.overlay[style*="display: block"],
div.overlay[style*="display:block"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/**
 * Убрать overflow: hidden с body когда popup пытается показаться
 */
body.show-popup {
    overflow: auto !important;
}

/* ========================================================================
   6. STATES: Состояния (loading, success, disabled)
   ======================================================================== */

/**
 * Loading state для кнопки
 * - Opacity снижается
 * - Cursor wait
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn.loading {
    opacity: 0.6 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/**
 * Success state - товар добавлен в корзину
 * - Зеленый фон на 2 секунды
 * - Анимируется обратно к обычному цвету
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn.added {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

/**
 * Disabled state
 */
.woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ========================================================================
   7. RESPONSIVE: Адаптивность для мобильных и планшетов
   ======================================================================== */

/**
 * Планшеты и мобильные телефоны (до 991px)
 * - Скрываем текст "Додати в кошик", оставляем только иконку
 * - Уменьшаем ширину кнопки до квадрата
 */
@media (max-width: 991px) {
    /* Кнопка уже icon-only глобально, только корректируем размеры на мобильных */
    .woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-icon {
        width: 18px !important;
        height: 18px !important;
    }
}

/**
 * Планшеты и маленькие десктопы (до 768px)
 * - Уменьшаем gap
 * - Уменьшаем размер цены
 */
@media (max-width: 768px) {
    .woocommerce .products .product .product-wrapper form.ff-loop-cart {
        gap: 8px !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price {
        font-size: 14px !important;
    }
}

/**
 * Мобильные устройства (до 480px)
 * - Дополнительное уменьшение отступов
 * - Уменьшение размера элементов
 */
@media (max-width: 480px) {
    .woocommerce .products .product .product-wrapper form.ff-loop-cart {
        gap: 6px !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price {
        font-size: 13px !important;
    }

    /* Кнопки минус/плюс - пропорциональное уменьшение */
    .woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity .number-button .minus,
    .woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity .number-button .plus {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
        font-size: 14px !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity input.qty {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
        flex: 0 0 72px !important;
        font-size: 14px !important;
    }

    /* Кнопка корзины — та же высота что и поле ввода */
    .woocommerce .products .product .product-wrapper form.ff-loop-cart button.ff-loop-cart-btn {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/**
 * Очень маленькие экраны (до 380px)
 * - Цена на full width для лучшей читаемости
 */
@media (max-width: 380px) {
    .woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-price {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 4px !important;
        text-align: center !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .quantity {
        flex: 1 1 auto !important;
    }

    .woocommerce .products .product .product-wrapper form.ff-loop-cart .ff-loop-cart-btn {
        flex: 0 0 auto !important;
    }
}

/* ========================================================================
   8. SOLD INDIVIDUALLY: Товары без quantity (только цена + кнопка)
   ======================================================================== */

/**
 * Для товаров sold_individually
 * - Размеры те же что и с quantity
 * - Дополнительные стили не требуются
 */