/*
Theme Name:   OceanWP Child
Theme URI:    https://sushiroly.ck.ua/
Description:  Дочерняя тема для сайта доставки суши OceanWP
Author:       Annariel
Template:     oceanwp
Version:      1.0.0
Text Domain:  oceanwp-child
*/

/* ==========================================================================
   ОФОРМЛЕНИЕ ЗАКАЗА WOOCOMMERCE
   ========================================================================== */

/* Скрываем поля страны и города на странице оформления заказа */
#billing_country_field, 
#billing_city_field {
    display: none !important;
}

/* ==========================================================================
   КАСТОМИЗАЦИЯ ПЛАГИНА ОПЦИЙ ТОВАРОВ (WAPF)
   ========================================================================== */

/* 1. Ховаємо перші два блоки (Product total та Options total) */
.wapf-product-totals .wapf--inner > div:nth-child(1),
.wapf-product-totals .wapf--inner > div:nth-child(2) {
    display: none !important;
}

/* 2. Ховаємо оригінальний англійський текст "Grand total" */
.wapf-product-totals .wapf--inner > div:nth-child(3) span:first-child {
    font-size: 0 !important;
}

/* 3. Підставляємо замість нього наше українське слово */
.wapf-product-totals .wapf--inner > div:nth-child(3) span:first-child:before {
    content: "Разом до сплати:";
    font-size: 16px !important; /* Повертаємо нормальний розмір шрифту */
    font-weight: bold;
}

/* 4. Робимо саму цифру ціни теж жирною та красивою */
.wapf-product-totals .wapf--inner > div:nth-child(3) .wapf-grand-total {
    font-weight: bold;
    font-size: 16px !important;
}

/* ==========================================================================
   ЭЛЕМЕНТЫ ВИТРИНЫ И КАРТОЧКИ ТОВАРОВ
   ========================================================================== */

/* Полностью скрываем категории на витрине, в циклах и внутри карточки товара */
.woo-entry-inner .category,
.product_meta .posted_in,
ul.woo-entry-inner clr li.category,
li.category {
    display: none !important;
}

/* Скрываем подзаголовок страницы (page-subheading) */
.clr.page-subheading {
    display: none !important;
}

/* Прячем исходный текст, если кнопка ведет себя как Select options */
.btn-wrap .button.product_type_simple {
    font-size: 0 !important;
}

/* Наливаем вместо него свой аккуратный текст */
.btn-wrap .button.product_type_simple::before {
    content: "Додати в кошик";
    font-size: 12px; /* вернем размер шрифта как у тебя на скрине */
    display: block;
    letter-spacing: 1px;
}
/* Намертво прижимаем заголовок товара */
    .woocommerce ul.products li.product ul.woo-entry-inner li.title,
    ul.woo-entry-inner li.title h2 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
     .woocommerce-Price-amount amount
     {
        padding-top: 5px !important;
        margin-bottom: 8px !important; /* Небольшой зазор до кнопки кошика */
        padding: 0 !important;
    }

.product-inner.clr,
    li.product .product-inner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .delivery-text {
    white-space: pre-wrap !important; /* Це змусить систему враховувати ваші переноси рядків */
    display: block !important;
    line-height: 1.6 !important;
}
/* Делаем фон плашки ярко-красным, а текст — белым */
.wp-block-woocommerce-product-sale-badge div {
    background-color: #e61a1a !important;
    color: #ffffff !important;
    border-color: #e61a1a !important; /* Делаем рамку тоже красной */
}
/* ==========================================================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ (СКРЫТИЕ ПОИСКА И ПЕРЕНОС ФИЛЬТРОВ)
   ========================================================================== */
/* Стили для mobile (экраны до 768px) */
@media (max-width: 768px) {
    
    /* 1. Полностью скрываем форму поиска на мобилках */
    .wp-block-search,
    .woocommerce-product-search,
    form[role="search"] {
        display: none !important;
    }
    
    /* 2. Максимально сжимаем серую полосу заголовка страницы */
    .page-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        border: none !important;
    }
    
    .page-header-title {
        margin-bottom: 0 !important;
        font-size: 22px !important; 
    }

    .site-breadcrumbs {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. Жестко прижимаем главный контейнер контента к шапке */
    #content-wrap {
        margin-top: 0 !important;
    }
    
    /* 4. Переносим фильтры вверх над товарами через Grid */
    #content-wrap.container {
        display: grid !important;
        grid-template-columns: 100%; 
        padding-top: 0 !important; /* Убрали отступ самого контейнера в 0 */
    }
    
    #primary {
        grid-row: 2; 
    }
    
    #primary.content-area {
        padding-top: 0 !important; 
    }
    
    #right-sidebar {
        grid-row: 1; 
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Отступ от кнопки фильтра до кнопок сетки товаров */
    }

    /* Корректируем внутренние блоки сайдбара */
    #right-sidebar-inner {
        padding: 0 10px;
    }

    /* 5. Обнуляем отступы у блока кнопки «Фільтрувати товари» */
    .wc-block-product-filters__open-overlay {
        margin-top: -35px !important;
        margin-bottom: 0 !important;
        padding-top: 5px !important;   /* Минимальный паддинг внутри кнопки для аккуратности */
        padding-bottom: 5px !important;
    }
    
    /* Целимся прямо в текст и иконку внутри кнопки */
    .wc-block-product-filters__open-overlay span,
    .wc-block-product-filters__open-overlay {
        font-size: 14px !important;   /* Увеличили размер шрифта (по умолчанию там ~14-16px) */
        font-weight: 600 !important;   /* Делаем текст чуть полужирным, чтобы выделился */
    }

    /* Если нужно сделать саму иконку фильтра чуть крупнее под стать тексту */
    .wc-block-product-filters__open-overlay svg {
        width: 20px !important;
        height: 20px !important;
    }
    .woocommerce-products-header{
        margin-top: -55px !important;
        margin-bottom: 0 !important;
}
    /* Убираем маргины у родительской обертки блока фильтров, если они там есть */
    div[data-wc-block-name="woocommerce/product-filters"],
    .wp-block-woocommerce-product-filters {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
   /* Делаем обертку флексбоксом и разносим элементы по краям */
    .oceanwp-toolbar {
        display: flex !important;
        flex-flow: row nowrap !important; /* Строго в один ряд */
        justify-content: space-between !important; /* Квадратики влево, сортировка вправо */
        align-items: center !important; /* Ровняем строго по центру */
        margin-bottom: 15px !important; 
    }

    /* Квадратики переключателя сетки (слева) */
    .oceanwp-grid-list {
        margin: 0 !important;
        float: none !important; 
        display: flex !important;
    }

    /* Сортировка WooCommerce (справа) */
    .woocommerce-ordering {
        margin-top: 6px !important;
        padding-top: 0 !important; /* Обнуляем любые внутренние паддинги */
        float: none !important; 
        max-width: 70% !important; 
    }

    /* Убираем дефолтные отступы у самой формы и селектора */
    .woocommerce-ordering form,
    .woocommerce-ordering select {
        margin: 0 !important; /* Намертво убираем маргин, который тянул блок вниз */
        padding-top: 0px !important;
        padding-bottom: 5px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
    /* Нацеливаемся на переключатель мобильного меню */
    .oceanwp-mobile-menu-icon.mobile-right,
.oceanwp-mobile-menu-icon.mobile-right a {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Находим внутренний контейнер Elementor, где лежат обе точки */
    .elementor-element-2d02246 .e-con-inner {
        display: flex !important;
        flex-direction: row !important; /* Выстраиваем в один ряд */
        flex-wrap: nowrap !important; /* Запрещаем перенос на новую строку */
        justify-content: space-between !important; /* Разносим их по краям */
        gap: 10px !important; /* Небольшой зазор между блоками, чтобы не слипались */
    }

    /* Делаем сами блоки точек одинаковыми по ширине (примерно по 50%) */
    .elementor-element-2d02246 .elementor-widget-icon-box {
        width: 50% !important;
        margin-bottom: 0 !important; /* Убираем нижний отступ, раз они в ряд */
    }

    /* На всякий случай центруем иконку и текст внутри каждого блока, чтобы смотрелось аккуратно */
    .elementor-element-2d02246 .elementor-icon-box-wrapper {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
  /* Уменьшаем размер самой иконки (домика) и центруем её маргинами */
    .elementor-element-2d02246 .elementor-icon-box-icon svg,
    .elementor-element-2d02246 .elementor-icon-box-icon {
        width: 30px !important;
        height: auto !important;
        margin: 0 auto !important; /* Обнуляет боковые отступы и делает иконку по центру, а 8px — отступ до текста */
        display: block !important;
    }

    /* Уменьшаем заголовок (ПЗР / Район Д) */
    .elementor-element-2d02246 .elementor-icon-box-title,
    .elementor-element-2d02246 .elementor-icon-box-title a {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important; /* Прижимаем адрес к иконке */
    }

    /* Уменьшаем описание (ул. Вергая / Нарбутовская и телефон) */
    .elementor-element-2d02246 .elementor-icon-box-description {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .woobt-products .woobt-product {
        padding: 5px 0 !important; /* Уменьшаем отступы сверху/снизу в чекбоксах вібора додатков в суши*/
        flex-direction: row !important; /* Ставим элементы в ряд, если нужно */
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px; /* Добавляем небольшое расстояние между элементами */
    }

    /* Уменьшаем размер контейнера с картинкой */
    .woobt-products .woobt-product-image {
        width: 50px !important;
        height: 50px !important;
    }

    /* Настраиваем шрифт названия и цены */
    .woobt-products .woobt-product-name, 
    .woobt-products .woobt-product-price {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    /* Делаем чекбокс чуть меньше и аккуратнее */
    .woobt-products .woobt-product-checkbox {
        transform: scale(0.8);
    }
    /* 1. Уменьшаем заголовки товаров (название сетов) */
    .wp-block-post-title.has-medium-font-size {
        font-size: 16px !important; /* Было крупнее, делаем аккуратнее */
        line-height: 1.2 !important;  /* Слегка уменьшаем межстрочный интервал */
    }

    /* 2. Уменьшаем кнопки "Додати в кошик" */
    .wp-block-woocommerce-product-button .wp-block-button__link {
        font-size: 13px !important;   /* Уменьшаем размер текста на кнопке */
        padding: 8px 12px !important; /* Уменьшаем внутренние отступы, чтобы кнопка стала ниже */
    }
    /* Находим блок с ценами */
    .wc-block-components-product-price {
        font-size: 16px !important; /* Увеличиваем общий размер (базовый там мелкий) */
    }

    /* Делаем новую акционную цену (зеленую) жирной и еще чуть крупнее */
    .wc-block-components-product-price ins .woocommerce-Price-amount {
        font-weight: 700 !important; /* Полужирный / жирный шрифт */
        font-size: 17px !important;  /* Делаем акцент на актуальной цене */
    }

    /* Старую перечеркнутую цену оставляем обычной, но чуть-чуть подправляем размер */
    .wc-block-components-product-price del .woocommerce-Price-amount {
        font-weight: normal !important; 
        font-size: 14px !important;
        opacity: 0.6; /* Немного приглушаем старую цену, чтобы новая выделялась */
    }
    /* Делаем обычную цену (без скидки) тоже жирной и крупной */
    .wc-block-components-product-price > .woocommerce-Price-amount {
        font-weight: 700 !important;
        font-size: 17px !important;
    }
}