/* Applied-filter chips (shared by every listing page).

   Visual reference: the Products-page mockup — peach pill chips (~32px tall, 13px text) in a
   single warm tone, sitting between the toolbar and the table, with an orange "Clear all".

   Tint colours are derived from --bs-primary rather than written out, so the bar re-skins with
   the rest of the app (shopify-skin.css swaps --bs-primary wholesale). The literal values are
   the fallback for browsers without color-mix, and match the default #f79131 accent. */

.cg-applied-filters {
    --cg-af-accent: var(--bs-primary);
    --cg-af-bg: #fef2e6;
    --cg-af-bg-hover: #fde8d4;
    --cg-af-border: #fddcbd;
    /* The mockup's chip text is the app's primary orange itself — the same tone as the Filter
       button and Clear all — with label and value in one colour and one weight, not a dark
       label against a lighter value. Hover states step down to the dark variant. */
    --cg-af-text: var(--cg-af-accent);
    --cg-af-text-strong: var(--bs-primary-dark, #d36b08);
    --cg-af-gap: 14px;

    position: relative;
    margin: 0.5rem 0 1rem;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    .cg-applied-filters {
        --cg-af-bg: color-mix(in srgb, var(--cg-af-accent) 12%, #fff);
        --cg-af-bg-hover: color-mix(in srgb, var(--cg-af-accent) 18%, #fff);
        --cg-af-border: color-mix(in srgb, var(--cg-af-accent) 28%, #fff);
    }
}

/* Removing or clearing a filter reloads the list; keep the chips on screen and stop repeat
   clicks landing, rather than swapping the row for a spinner. */
.cg-applied-filters.cg-af-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- Filter button badge ---------- */

/* Shares the accent, but declared outside .cg-applied-filters: the toolbar button carries it,
   and the chip bar is absent whenever the only active filter is a UI-less link param.
   Styled as a miniature chip — orange count on the same soft tint — rather than a solid
   orange disc, whose white-on-orange number read badly inside the outlined Filter button. */
.cg-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--bs-primary);
    background-color: #fef2e6;
    border: 1px solid #fddcbd;
    border-radius: var(--bs-border-radius-pill);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    .cg-filter-count {
        background-color: color-mix(in srgb, var(--bs-primary) 12%, #fff);
        border-color: color-mix(in srgb, var(--bs-primary) 28%, #fff);
    }
}

/* ---------- the row ---------- */

.cg-af-row {
    display: flex;
    align-items: center;
    gap: var(--cg-af-gap);
}

.cg-af-chips {
    display: flex;
    flex-wrap: nowrap; /* one row, always - a wrapping bar shifts the table down */
    align-items: center;
    gap: var(--cg-af-gap);
    /* Stretches across the row so "Clear all" anchors at the row's far end (Rudy's call:
       better there than trailing the last chip). min-width lets the list shrink below its
       content so Clear all is never pushed out, and overflow clips any chip in the moment
       before JS measures the row. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-af-chip-item {
    flex: 0 0 auto;
}

.cg-af-chip-item[hidden],
.cg-af-more-item[hidden] {
    display: none;
}

/* ---------- one chip ---------- */

/* Square corners, per the design — the mockup's chips carry no border radius.
   max-width 240: a long truncated value gains little from the extra 40px, but that width is
   routinely the difference between the next whole chip fitting the row or not. */
.cg-af-chip {
    display: inline-flex;
    align-items: stretch;
    max-width: 240px;
    background-color: var(--cg-af-bg);
    border: 1px solid var(--cg-af-border);
    border-radius: 0;
    overflow: hidden;
}

.cg-af-chip:hover {
    background-color: var(--cg-af-bg-hover);
}

.cg-af-chip__body,
.cg-af-chip__remove {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cg-af-text);
    font-size: 0.875rem;
    line-height: 1;
}

.cg-af-chip__body {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    /* 34px content + the chip's 1px borders = the mockup's ~36px pill */
    min-height: 34px;
    padding: 0 0.5rem 0 1rem;
    cursor: pointer;
}

/* Label and value: one colour, one weight — the mockup's chip text is uniform, with the
   "Label:" prefix doing the separating on its own. */
.cg-af-chip__label {
    flex: 0 0 auto;
    font-weight: 500;
    white-space: nowrap;
}

/* The value is what gets truncated - the label has to stay readable for the chip to mean
   anything. The full text is on the button's title. */
.cg-af-chip__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* The close icon is DRAWN (two bars on the button), not the × glyph: the glyph's ink is
   a fraction of its font-size, so no font-size made it read as a real close icon. Drawn bars
   give a standard 16px cross at a full 2.5px stroke — easy to find, and the whole 38px
   chip-height column is its hit area so it is comfortably clickable. */
.cg-af-chip__remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    cursor: pointer;
}

.cg-af-chip__remove span {
    display: none; /* the glyph stays in the markup for copy/paste text, but the bars render */
}

.cg-af-chip__remove::before,
.cg-af-chip__remove::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* 14px bars on the diagonal render a ~10px-square cross — the same visual height as the
       chip's 14px text — and the 1.5px stroke keeps it at the text's weight rather than
       reading as a bold graphic. The 38px hit column stays; only the ink is text-sized. */
    width: 14px;
    height: 1.5px;
    border-radius: var(--bs-border-radius);
    background-color: currentColor;
}

.cg-af-chip__remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cg-af-chip__remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cg-af-chip__remove:hover {
    color: var(--cg-af-text-strong);
    background-color: var(--cg-af-bg-hover);
}

/* ---------- +N more ---------- */

.cg-af-more {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #495057;
    background-color: #f4f5f7;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0; /* square, matching the chips */
    cursor: pointer;
}

.cg-af-more:hover,
.cg-af-more[aria-expanded="true"] {
    color: var(--cg-af-text);
    background-color: var(--cg-af-bg);
    border-color: var(--cg-af-border);
}

/* ---------- Clear all ---------- */

/* Plain link, but in the app's darker orange at medium weight: the chips sit on a tint that
   carries the light primary orange, while Clear all sits directly on white, where that same
   tone all but disappears. The darker tone keeps it in the palette and clearly readable. */
.cg-af-clear {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--cg-af-text-strong);
    text-decoration: none;
    cursor: pointer;
}

.cg-af-clear:hover {
    color: #b35a06;
    text-decoration: underline;
}

/* ---------- overflow popover ---------- */

.cg-af-overflow {
    position: absolute;
    z-index: 5;
    min-width: 260px;
    max-width: 340px;
    max-height: 340px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: var(--bs-box-shadow);
}

.cg-af-overflow[hidden] {
    display: none;
}

.cg-af-overflow__title {
    padding: 0.5rem 1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cg-af-overflow__list {
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
    overflow-y: auto; /* the popover scrolls internally rather than growing off-screen */
}

.cg-af-overflow__item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem 0 1rem;
}

.cg-af-overflow__item[hidden] {
    display: none;
}

.cg-af-overflow__item:hover {
    background-color: var(--cg-af-bg);
}

.cg-af-overflow__edit {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    background: none;
    border: 0;
    padding: 0.5rem 0;
    text-align: left;
    cursor: pointer;
}

.cg-af-overflow__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
}

.cg-af-overflow__value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #6c757d;
}

.cg-af-overflow__remove {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 0;
    border-radius: var(--bs-border-radius, 0.25rem);
    color: var(--cg-af-text);
    line-height: 1;
    cursor: pointer;
}

/* Same drawn cross as the chip remove (see above), sized for the popover row. */
.cg-af-overflow__remove span {
    display: none;
}

.cg-af-overflow__remove::before,
.cg-af-overflow__remove::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px; /* ~9px-square cross, matching the popover row's text height */
    height: 1.5px;
    border-radius: var(--bs-border-radius);
    background-color: currentColor;
}

.cg-af-overflow__remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cg-af-overflow__remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cg-af-overflow__remove:hover {
    color: var(--cg-af-text-strong);
    background-color: var(--cg-af-bg-hover);
}

.cg-af-overflow__footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.5rem 1rem;
}

.cg-af-overflow__clear {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cg-af-text-strong);
    text-decoration: none;
    cursor: pointer;
}

.cg-af-overflow__clear:hover {
    color: #b35a06;
    text-decoration: underline;
}

/* ---------- focus states ---------- */

.cg-applied-filters button:focus-visible {
    outline: 2px solid var(--cg-af-accent);
    outline-offset: 1px;
}

/* Marks the filter the drawer was opened for, since a select2-managed control cannot take
   focus itself. */
.cg-af-edit-target {
    animation: cg-af-edit-pulse 1.6s ease-out;
    border-radius: var(--bs-border-radius, 0.25rem);
}

@keyframes cg-af-edit-pulse {
    0%, 45% { box-shadow: 0 0 0 4px rgba(247, 145, 49, 0.3); }
    100% { box-shadow: 0 0 0 4px rgba(247, 145, 49, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cg-af-edit-target {
        animation: none;
    }
}

/* ---------- responsive ---------- */

/* Mobile shows a count summary instead of a chip list; a long chip row on a phone is unusable
   and pushes the table off-screen. */
.cg-af-mobile {
    display: none;
    align-items: center;
    gap: var(--cg-af-gap);
}

.cg-af-mobile__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-height: 36px;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    color: var(--cg-af-text);
    background-color: var(--cg-af-bg);
    border: 1px solid var(--cg-af-border);
    border-radius: 0; /* square, matching the chips */
    cursor: pointer;
}

.cg-af-mobile__icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .cg-af-row,
    .cg-af-overflow {
        display: none;
    }

    .cg-af-mobile {
        display: flex;
    }
}

/* Announces the new filter count after the list reloads. */
.cg-af-sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}