/*
Theme Name: HrumTime
Description: Современная тема для интернет-магазина сладостей и снеков на базе WooCommerce с Tailwind CSS
Version: 1.0
Author: HrumTime Dev Team
License: GPL v2 or later
Text Domain: hrumtime
Requires PHP: 7.4
WC requires at least: 5.0
WC tested up to: 8.0
*/

/* Базовые стили будут генерироваться через Tailwind CSS */

/* Кастомные цвета темы */
:root {
    --hrum-brown: #6B3E26;
    --hrum-orange: #E4710E;
    --hrum-yellow: #FCAD30;
}

/* Скрытие скроллбара */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Кастомные стили для WooCommerce */
.woocommerce .star-rating {
    color: #FCAD30;
}

.woocommerce .price {
    color: #E4710E;
    font-weight: 600;
}

/* Стили для FAQ */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-content.show {
    max-height: 200px;
    transition: max-height 0.3s ease-in;
}

/* Стили для сортировки */
.sort-option.active-sort {
    background-color: #f3f4f6;
}

.sort-check {
    transition: opacity 0.2s ease;
}

/* Анимации для mobile меню */
@media (max-width: 1023px) {
    #mobileMenu {
        transition: all 0.3s ease-in-out;
    }
    
    #mobileSearchBar {
        transition: all 0.3s ease-in-out;
    }
}

/* Стили для кнопок */
.btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
    @apply bg-orange-500 text-white hover:bg-orange-600;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 hover:border-orange-500 hover:text-orange-500;
}

.btn-secondary {
    @apply bg-gray-300 text-gray-700;
}

.btn-success {
    @apply bg-green-500 text-white border-green-500 hover:bg-green-600;
}

.btn-error {
    @apply bg-red-500 text-white border-red-500 hover:bg-red-600;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Анимация для кнопок корзины */
.cart-qty-minus, .cart-qty-plus, .cart-remove {
    transition: all 0.2s ease;
}

.cart-qty-minus:hover, .cart-qty-plus:hover {
    @apply border-gray-400 bg-gray-50;
}

.cart-remove:hover {
    @apply text-red-600 bg-red-50;
}

/* Плавная анимация исчезновения товаров */
[data-cart-key] {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Стили для боковой корзины */
#sidebar-cart {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

#sidebar-cart::-webkit-scrollbar {
    width: 6px;
}

#sidebar-cart::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#sidebar-cart::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#sidebar-cart::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Анимации для корзины */
.cart-item-enter {
    opacity: 0;
    transform: translateX(20px);
}

.cart-item-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms, transform 300ms;
}

.cart-item-exit {
    opacity: 1;
    transform: translateX(0);
}

.cart-item-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 300ms, transform 300ms;
}

/* Стили для кнопок корзины */
.cart-qty-minus,
.cart-qty-plus {
    transition: all 0.2s ease;
}

.cart-qty-minus:hover,
.cart-qty-plus:hover {
    transform: scale(1.1);
}

.cart-remove {
    transition: all 0.2s ease;
}

.cart-remove:hover {
    transform: scale(1.1);
}

/* Стили для каталога */
.woocommerce-ordering select {
    @apply w-full md:w-auto bg-white border border-gray-300 rounded-xl px-4 py-3 md:px-3 md:py-2 text-sm md:text-sm focus:outline-none focus:ring-2 focus:ring-hrum-orange focus:border-hrum-orange hover:border-hrum-orange transition-all duration-200 min-w-[200px] md:min-w-[180px] appearance-none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 9l-7 7-7-7'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

.woocommerce-result-count {
    @apply text-sm text-gray-500;
}

/* Mobile filter overlay */
.mobile-filter-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
}

.mobile-filter-sidebar {
    @apply fixed top-0 left-0 h-full w-80 bg-white shadow-xl transform -translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto;
}

.mobile-filter-sidebar.active {
    @apply translate-x-0;
}

/* WooCommerce widgets styling */
.widget_price_filter .price_slider_wrapper {
    @apply space-y-3;
}

.widget_price_filter .price_slider_amount {
    @apply flex space-x-2;
}

.widget_price_filter .price_slider_amount input {
    @apply w-20 px-2 py-1 border border-gray-300 rounded text-sm;
}

.widget_price_filter .price_slider_amount button {
    @apply px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300;
}

.widget_price_filter .price_slider_amount .price_label {
    @apply flex space-x-2;
}

.widget_price_filter .price_slider_amount .price_label input {
    @apply w-20 px-2 py-1 border border-gray-300 rounded text-[12px];
}

.widget_price_filter .price_slider_amount .price_label button,
.widget_price_filter .price_slider_amount button.button {
    @apply px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300;
}

/* Hide WooCommerce default result count and ordering on desktop as we have custom */
.woocommerce-result-count,
.woocommerce-ordering {
    @apply hidden;
}

.widget_product_categories ul {
    @apply space-y-2;
}

.widget_product_categories li {
    @apply flex items-center space-x-2;
}

.widget_product_categories a {
    @apply text-sm text-gray-700 hover:text-hrum-orange;
}

.widget_layered_nav ul {
    @apply space-y-2;
}

.widget_layered_nav li {
    @apply flex items-center space-x-2;
}

.widget_layered_nav label {
    @apply flex items-center space-x-2 cursor-pointer;
}

.widget_layered_nav input[type="checkbox"] {
    @apply rounded border-gray-300 text-hrum-orange focus:ring-hrum-orange;
}

.widget_layered_nav .layered-nav-link {
    @apply text-sm text-gray-700 hover:text-hrum-orange;
}

/* Pagination styling - точно как в HTML */
.woocommerce-pagination {
    @apply flex justify-center;
}

.woocommerce-pagination nav {
    @apply flex items-center space-x-2;
}

.woocommerce-pagination .page-numbers {
    @apply px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors;
}

.woocommerce-pagination .page-numbers.current {
    @apply bg-hrum-orange text-white rounded-lg;
}

.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
    @apply px-3 py-2 text-gray-500 hover:text-gray-700;
}

.woocommerce-pagination .page-numbers.prev:disabled,
.woocommerce-pagination .page-numbers.next:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Custom dropdown styling */
#sort-dropdown-btn {
    cursor: pointer;
}

#sort-dropdown-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.sort-option {
    cursor: pointer;
}

/* Индикатор корзины */
.cart-count {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}