/**
 * WooCommerce Shop Layout Styles - Full rebuild for WC 6.9
 * Handles shop layout, filters, overlay dialogs, numeric sorting, and mobile responsiveness
 */

@import '../variables.css';

/* ===== Breadcrumbs ===== */
.shop-breadcrumbs .woocommerce-breadcrumb {
    font-size: var(--font-size-xs);
    color: var(--color-primary-lighter);
    margin: 0;
}

.shop-breadcrumbs .woocommerce-breadcrumb a {
    color: var(--color-primary-lighter);
    text-decoration: none;
}

.shop-breadcrumbs .woocommerce-breadcrumb a:hover {
    color: var(--color-primary-alt);
}

/* ===== Utilities Bar ===== */
.shop-utilities-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

/* ===== Ordering / Results ===== */
.shop-ordering-right form select {
    border: none;
}

.woocommerce-ordering select {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    outline: none;
}

.woocommerce-result-count {
    font-size: var(--font-size-sm);
    color: var(--color-primary-lighter);
}

/* ===== Layout ===== */
.shop-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--spacing-8);
    align-items: start;
    width: 100%;
}

.shop-sidebar {
    padding: var(--spacing-4);
}

.shop-sidebar h3 {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-lg);
}

.shop-main {
    min-height: 60vh;
    min-width: 0;
    background-color: var(--color-white);
}

.shop-main .products .product .product-info {
        background-color: var(--color-white);
}

/* ===== WooCommerce Blocks - Filter Chips ===== */
.wp-block-woocommerce-product-filters fieldset {
    border: none; /* Remove default outline/border */
    padding: 0;
    margin: 0;
}

.wc-block-product-filter-chips__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.wc-block-product-filter-chips__item {
    padding: var(--spacing-3) !important;
    outline: none !important;
}

/* Selected / Active filter states */
.wc-block-product-filter-chips__item[aria-checked="true"],
.wc-block-product-filter-chips__item.selected,
.wc-block-product-filter-chips__item.pending {
    border: 1px solid var(--color-primary-alt) !important;
    color: var(--color-primary-alt) !important;
    background-color: rgba(249, 87, 56, 0.1) !important;
}

/* Hover effect */
.wc-block-product-filter-chips__item:hover {
    border-color: var(--color-primary-alt);
    color: var(--color-primary-alt);
}

/* Mobile filter feedback */
@media (max-width: 768px) {
    .wc-block-product-filter-chips__item {
        transition: all 0.2s ease !important;
    }
    .wc-block-product-filter-chips__item:active {
        transform: scale(0.95);
    }
    .wc-block-product-filter-chips__item.selected {
        box-shadow: 0 2px 4px rgba(249, 87, 56, 0.2);
    }
}

/* ===== Price Slider ===== */
.wc-block-product-filter-price-slider__range {
    --range-color: var(--color-primary-alt) !important;
}

/* Updated inputs wrapper (6.9) */
.wp-block-woocommerce-product-filters
.wc-block-product-filter-price-slider__inputs {
    display: flex;
    gap: var(--spacing-2);
}

.wp-block-woocommerce-product-filters
.wc-block-product-filter-price-slider__inputs
input[type="number"] {
    width: 100%;
    padding: var(--spacing-2);
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ===== Categories ===== */
.wp-block-woocommerce-product-categories
.wc-block-product-categories-list--depth-0 {
    list-style: none;
    padding-left: 0;
}

.wp-block-woocommerce-product-categories
.wc-block-product-categories-list--depth-1 {
    list-style: circle;
    padding-left: 1.25rem;
}

.wp-block-woocommerce-product-categories
.wc-block-product-categories-list-item__name:hover {
    color: var(--color-primary-alt);
}

/* ===== Sorting Filter Chips Numerically ===== */
/* Age */
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-4"] { order: 1; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-5"] { order: 2; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-6"] { order: 3; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-7"] { order: 4; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-8"] { order: 5; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-9"] { order: 6; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-10"] { order: 7; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-11"] { order: 8; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-12"] { order: 9; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-13"] { order: 10; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-14"] { order: 11; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-15"] { order: 12; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-16"] { order: 13; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-17"] { order: 14; }
.wc-block-product-filter-chips__item[data-wp-key*="starost-igralcev-18"] { order: 15; }

/* Players */
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-1"] { order: 1; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-2"] { order: 2; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-3"] { order: 3; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-4"] { order: 4; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-5"] { order: 5; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-6"] { order: 6; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-7"] { order: 7; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-8"] { order: 8; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-9"] { order: 9; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-10"] { order: 10; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-11"] { order: 11; }
.wc-block-product-filter-chips__item[data-wp-key*="attribute/igralci-12"] { order: 12; }

/* ===== Buttons ===== */
.wp-element-button {
    width: 100%;
    background-color: var(--color-primary-alt);
    color: var(--color-white);
    border: none;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: var(--font-muli-regular);
    border-radius: 6px;
    cursor: pointer;
}

/* ===== Tablet Layout ===== */
@media (max-width: 1024px) {
    .shop-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: var(--spacing-6);
    }
}

/* ===== Mobile Layout ===== */
@media (max-width: 768px) {
    .shop-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .shop-sidebar {
        order: 2;
        padding: var(--spacing-4);
        margin-top: var(--spacing-4);
    }

    .shop-main {
        order: 1;
        min-height: auto;
    }

    .shop-breadcrumbs .woocommerce-breadcrumb {
        font-size: var(--font-size-xs);
    }

    .shop-utilities-bar {
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--spacing-2);
    }
}

/* ===== WooCommerce Filter Overlay (Mobile) ===== */
@media (max-width: 600px) {
    .wc-block-product-filters__overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wc-block-product-filters__overlay-dialog {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        padding: var(--spacing-6) var(--spacing-6);
    }

    .wc-block-product-filters__overlay-header {
        border-bottom: 1px solid var(--color-gray-light);
        display: flex;
        justify-content: flex-end;
        flex-flow: row !important;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10000;
    }

    .wc-block-product-filters__close-overlay {
        background: none;
        border: none;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        cursor: pointer;
        padding: var(--spacing-2);
        border-radius: 4px;
    }

    .wc-block-product-filters__close-overlay span {
        display: none;
    }

    .wc-block-product-filters__close-overlay svg {
        width: 40px;
        height: 40px;
    }

    .wc-block-product-filters__overlay-content {
        flex: 1;
        overflow-y: auto;
        padding-bottom: var(--spacing-6) !important;
        -webkit-overflow-scrolling: touch;
    }

    .wc-block-product-filters__overlay-content h2 {
        font-family: var(--font-zilla-bold);
        color: var(--color-primary);
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-6);
    }

    .wc-block-product-filters__overlay-content h3 {
        font-family: var(--font-zilla-medium);
        color: var(--color-primary);
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-4);
        margin-top: var(--spacing-6);
    }

    .wc-block-product-filters__overlay-content h3:first-of-type {
        margin-top: 0;
    }

    .wp-block-woocommerce-product-filter-attribute,
    .wp-block-woocommerce-product-filter-price,
    .wp-block-woocommerce-product-filter-status {
        margin-bottom: var(--spacing-6);
    }

    .wc-block-product-filter-clear-button .wp-block-button__link {
        background-color: transparent;
        color: var(--color-primary-alt);
        border: 1px solid var(--color-primary-alt);
        font-size: var(--font-size-sm);
        padding: var(--spacing-2) var(--spacing-4);
        border-radius: 6px;
        font-family: var(--font-muli-regular);
        transition: all 0.2s ease;
    }

    .wc-block-product-filter-clear-button .wp-block-button__link:hover {
        background-color: var(--color-primary-alt);
        color: var(--color-white);
    }

    .wc-block-product-filters__overlay-footer {
        position: sticky;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        padding: var(--spacing-3) 0 !important;
        padding-bottom: calc(var(--spacing-8) + env(safe-area-inset-bottom, -10px)) !important;
        background-color: var(--color-white);
        z-index: 10000;
        width: 100%;
        box-sizing: border-box;
        box-shadow: none !important;
    }

    .wc-block-product-filters__apply {
        width: 100%;
        background-color: var(--color-primary-alt);
        color: var(--color-white);
        border: none;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-base);
        font-family: var(--font-muli-regular);
        border-radius: 6px;
        cursor: pointer;
        font-weight: var(--font-weight-medium);
        transition: all 0.2s ease;
    }

    /* iOS fixes */
    @supports (-webkit-touch-callout: none) {
        .wc-block-product-filters__overlay-dialog {
            min-height: -webkit-fill-available;
        }
        .wc-block-product-filters__overlay-footer {
            padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
        }
    }

    /* Landscape */
    @media (max-width: 600px) and (orientation: landscape) {
        .wc-block-product-filters__overlay-dialog {
            height: 100vh;
        }
        .wc-block-product-filters__overlay-content {
            max-height: calc(100vh - 140px);
        }
    }
}

/* ===== Custom Mobile Filters ===== */
@media (max-width: 768px) {
    body.mobile-custom-filters .custom-mobile-filters {
        display: block;
        margin-bottom: var(--spacing-4);
    }

    body.mobile-custom-filters .wc-block-product-filters {
        display: none !important;
    }

    .custom-mobile-filters { display: none; }

    .mobile-filter-toggle {
        background: none;
        border: none;
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        font-family: var(--font-muli-regular);
        cursor: pointer;
        padding: var(--spacing-2) 0;
        text-decoration: underline;
        font-weight: 500;
    }

    .mobile-filter-toggle:hover {
        color: var(--color-primary-alt);
    }

    .mobile-filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--color-white);
        z-index: 9999;
        display: flex;
        flex-direction: column;
    }

    .mobile-filter-overlay-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-4);
        border-bottom: 1px solid var(--color-gray-light);
        background: var(--color-white);
    }

    .mobile-filter-overlay-header h3 {
        font-family: var(--font-zilla-bold);
        color: var(--color-primary);
        font-size: var(--font-size-xl);
        margin: 0;
    }

    .mobile-filter-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--color-primary);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-filter-overlay-content {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-4);
    }

    .mobile-filter-form {
        background: transparent;
        border: none;
        padding: 0;
    }

    .mobile-filter-overlay-footer {
        padding: var(--spacing-4);
        border-top: 1px solid var(--color-gray-light);
        background: var(--color-white);
    }

    .filter-section { margin-bottom: var(--spacing-4); }

    .filter-section h3 {
        font-family: var(--font-zilla-medium);
        color: var(--color-primary);
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-3);
    }

    .filter-section label {
        display: block;
        margin-bottom: var(--spacing-2);
        font-size: var(--font-size-base);
        color: var(--color-primary);
        cursor: pointer;
        padding: var(--spacing-2);
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

    .filter-section label:hover {
        background-color: rgba(249, 87, 56, 0.1);
    }

    .filter-section input[type="checkbox"] {
        margin-right: var(--spacing-2);
        transform: scale(1.2);
    }

    .apply-filters-btn {
        width: 100%;
        background-color: var(--color-primary-alt);
        color: var(--color-white);
        border: none;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-base);
        font-family: var(--font-muli-regular);
        border-radius: 6px;
        cursor: pointer;
        font-weight: var(--font-weight-medium);
        transition: all 0.2s ease;
    }

    .apply-filters-btn:hover {
        background-color: var(--color-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* Active filter chips in mobile overlay */
    .wc-block-product-filters__overlay .wp-block-woocommerce-product-filter-active:has(.wc-block-product-filter-removable-chips__item) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .wc-block-product-filters__overlay .wp-block-woocommerce-product-filter-active[hidden]:has(.wc-block-product-filter-removable-chips__item) {
        display: block !important;
    }

    .wc-block-product-filters__overlay .wc-block-product-filter-removable-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-2);
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .wc-block-product-filters__overlay .wc-block-product-filter-removable-chips__item {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--color-primary);
        padding: var(--spacing-2) var(--spacing-2);
        font-size: var(--font-size-sm);
        border: 1px solid var(--color-primary-lighter);
        margin-right: var(--spacing-2);
    }

    .wc-block-product-filters__overlay .wc-block-product-filter-removable-chips__label {
        font-family: var(--font-muli-regular);
        font-size: var(--font-size-sm);
        color: var(--color-primary);
    }

    .wc-block-product-filters__overlay .wc-block-product-filter-removable-chips__remove {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--color-primary);
        width: 16px;
        height: 16px;
    }

    .wc-block-product-filters__overlay .wc-block-product-filter-removable-chips__remove svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    .wc-block-product-filters__overlay .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
        background-color: transparent;
        color: var(--color-primary-alt);
        border-color: var(--color-primary-alt);
        font-size: var(--font-size-sm);
    }
}

/* ===== Prevent Body Scroll on Mobile Overlay ===== */
@media (max-width: 768px) {
    body.scroll-lock {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}