/**
 * Shop Filter Swatches Styles
 *
 * Visual styles for color swatches, size swatches, and category chips
 * used in the shop sidebar filter.
 */

/* ═══════════════════════════════════════════════
   FILTER SWATCHES CONTAINER
   ═══════════════════════════════════════════════ */
.tpb-filter-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ═══════════════════════════════════════════════
   COLOR SWATCHES — Circular dots with color fills
   ═══════════════════════════════════════════════ */
.tpb-color-swatches .tpb-filter-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #E8E8E8;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.tpb-color-swatches .tpb-filter-swatch:hover {
    transform: scale(1.15);
}

.tpb-color-swatches .tpb-filter-swatch.is-active {
    border-color: #1A1A1A;
    outline: 2px solid #1A1A1A;
    outline-offset: 2px;
}

/* ── Color fills via data-value mapping ── */
.tpb-color-swatches .tpb-filter-swatch[data-value="den"],
.tpb-color-swatches .tpb-filter-swatch[data-value="black"] {
    background-color: #1A1A1A;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="trang"],
.tpb-color-swatches .tpb-filter-swatch[data-value="white"],
.tpb-color-swatches .tpb-filter-swatch[data-value="ivory"],
.tpb-color-swatches .tpb-filter-swatch[data-value="be"] {
    background-color: #F5F0EB;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="xam"],
.tpb-color-swatches .tpb-filter-swatch[data-value="xám"],
.tpb-color-swatches .tpb-filter-swatch[data-value="gray"],
.tpb-color-swatches .tpb-filter-swatch[data-value="grey"] {
    background-color: #A0A0A0;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="xanh-navy"],
.tpb-color-swatches .tpb-filter-swatch[data-value="navy"] {
    background-color: #1B2A4A;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="do"],
.tpb-color-swatches .tpb-filter-swatch[data-value="red"] {
    background-color: #C0392B;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="hong"],
.tpb-color-swatches .tpb-filter-swatch[data-value="pink"],
.tpb-color-swatches .tpb-filter-swatch[data-value="rosa"] {
    background-color: #D4A5A5;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="xanh-la"],
.tpb-color-swatches .tpb-filter-swatch[data-value="green"] {
    background-color: #A8C256;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="tim"],
.tpb-color-swatches .tpb-filter-swatch[data-value="purple"] {
    background-color: #8E44AD;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="cam"],
.tpb-color-swatches .tpb-filter-swatch[data-value="orange"] {
    background-color: #E67E22;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="nau"],
.tpb-color-swatches .tpb-filter-swatch[data-value="brown"] {
    background-color: #8B6914;
}

.tpb-color-swatches .tpb-filter-swatch[data-value="vang"],
.tpb-color-swatches .tpb-filter-swatch[data-value="gold"],
.tpb-color-swatches .tpb-filter-swatch[data-value="yellow"] {
    background-color: #D4A017;
}

/* ═══════════════════════════════════════════════
   SIZE SWATCHES — Pill buttons
   ═══════════════════════════════════════════════ */
.tpb-size-swatches .tpb-filter-swatch--size {
    min-width: 40px;
    height: 40px;
    border: 1px solid #1A1A1A;
    background-color: transparent;
    color: #1A1A1A;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tpb-size-swatches .tpb-filter-swatch--size:hover {
    background-color: #1A1A1A;
    color: #FFFFFF;
}

.tpb-size-swatches .tpb-filter-swatch--size.is-active {
    background-color: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}

/* ═══════════════════════════════════════════════
   CATEGORY CHIPS
   ═══════════════════════════════════════════════ */
.tpb-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tpb-filter-chip {
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.tpb-filter-chip:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    opacity: 1;
}

.tpb-filter-chip.is-active {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════
   AJAX LOADING STATE
   ═══════════════════════════════════════════════ */
.shop-main {
    transition: opacity 0.2s ease;
}

.shop-main.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   MOBILE (< 768px)
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {
    .tpb-color-swatches .tpb-filter-swatch {
        width: 28px;
        height: 28px;
    }

    .tpb-size-swatches .tpb-filter-swatch--size {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
    }

    .tpb-filter-chip {
        padding: 6px 12px;
    }
}