/* Desktop dropdowns of the catalog toolbar (filters + sort): site-styled panel, custom checkboxes,
   tidy price fields, selected counters. Phones use the full-screen panel and are not touched. */
.filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--firmennyy);
    color: var(--belyy);
    font: 600 12px/1 var(--font-family);
}

@keyframes mobitech-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 768px) {
    .category__toolbar .setting {
        align-items: center;
        gap: 8px;
    }

    .category__toolbar .setting__label,
    .category__toolbar .setting__block {
        cursor: pointer;
    }

    .category__toolbar .filter__setting {
        cursor: pointer;
        user-select: none;
    }

    .category__toolbar .setting__label.active {
        color: var(--firmennyy);
    }

    .category__toolbar .setting__popup {
        top: calc(100% + 16px);
        left: -20px;
        z-index: 40;
        min-width: 250px;
        max-height: 380px;
        gap: 2px;
        padding: 12px 20px 14px;
        overflow-y: auto;
        background: var(--belyy);
        border-top: 3px solid var(--firmennyy);
        box-shadow: 0 24px 48px rgba(29, 27, 27, 0.16), 0 0 0 1px rgba(29, 27, 27, 0.05);
        cursor: default;
    }

    .category__toolbar .setting__popup.active {
        animation: mobitech-dropdown-in 0.14s ease-out;
    }

    .category__toolbar .sort__setting-popup {
        left: auto;
        right: -20px;
    }

    /* rows */
    .category__toolbar .setting__popup-item.popup-item {
        gap: 12px;
        margin: 0 -20px;
        padding: 11px 20px;
        cursor: pointer;
        transition: background-color 0.12s;
    }

    .category__toolbar .setting__popup-item.popup-item:hover {
        background: var(--svetlo-seryy);
    }

    .category__toolbar .popup-item__label {
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
        white-space: nowrap;
    }

    .category__toolbar .popup-item__input:checked ~ .popup-item__label {
        font-weight: 700;
    }

    /* custom checkbox */
    .category__toolbar .popup-item__box {
        flex: none;
        width: 20px;
        height: 20px;
        border: 1.5px solid var(--seryy);
        border-radius: 4px;
        background: var(--belyy);
        transition: border-color 0.12s, background-color 0.12s;
    }

    .category__toolbar .popup-item:hover .popup-item__box {
        border-color: var(--chernyy);
    }

    .category__toolbar .popup-item__input:checked + .popup-item__box {
        background: var(--firmennyy);
        border-color: var(--firmennyy);
    }

    .category__toolbar .popup-item__input:checked + .popup-item__box::after {
        left: 5.5px;
        top: 2px;
        width: 5px;
        height: 10px;
        border-color: var(--belyy);
        border-width: 0 2px 2px 0;
    }

    .category__toolbar .popup-item__input:focus-visible + .popup-item__box {
        outline: 2px solid var(--firmennyy);
        outline-offset: 2px;
    }

    /* sort radios keep the round shape */
    .category__toolbar .popup-item__box--sort {
        border-radius: 50%;
    }

    .category__toolbar .popup-item__input:checked + .popup-item__box--sort {
        background: var(--belyy);
        border-color: var(--firmennyy);
    }

    .category__toolbar .popup-item__input:checked + .popup-item__box--sort::after {
        left: 3.5px;
        top: 3.5px;
        width: 9px;
        height: 9px;
        border: 0;
        border-radius: 50%;
        background: var(--firmennyy);
        transform: none;
    }

    /* price */
    .category__toolbar .popup-item--price.setting__popup-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 0;
        padding: 6px 0 4px;
        cursor: default;
    }

    .category__toolbar .popup-item--price.setting__popup-item:hover {
        background: none;
    }

    .category__toolbar .popup-item__price-divider {
        display: none;
    }

    .category__toolbar .popup-item__price-block {
        gap: 6px;
    }

    .category__toolbar .popup-item__price-label {
        font-weight: 500;
        font-size: 13px;
        line-height: 120%;
        color: var(--seryy);
    }

    .category__toolbar .popup-item__price-value {
        width: 140px;
        max-width: none;
        height: 46px;
        padding: 0 12px;
        border: 1px solid var(--temno-belyy);
        background: var(--belyy);
        font: 500 16px/46px var(--font-family);
        color: var(--chernyy);
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .category__toolbar .popup-item__price-value::-webkit-outer-spin-button,
    .category__toolbar .popup-item__price-value::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .category__toolbar .popup-item__price-value::placeholder {
        font-size: 14px;
        color: var(--seryy);
    }

    .category__toolbar .popup-item__price-value:focus {
        outline: none;
        border-color: var(--chernyy);
    }

    .category__toolbar .popup-item__show-all {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 46px;
        margin-top: 8px;
        border: 0;
        background: var(--firmennyy);
        color: var(--belyy);
        font: 600 15px/1 var(--font-family);
        cursor: pointer;
        transition: background-color 0.12s;
    }

    .category__toolbar .popup-item__show-all:hover {
        background: var(--firmennyy-2);
    }

    .category__toolbar .popup-item__show-all:active {
        color: var(--belyy);
    }
}

@media (min-width: 1200px) {
    .category__toolbar .filter__menu {
        gap: 36px;
    }
}

/* Many choices at once (every memory, brand, store + price + sort): the row of group names wraps instead of running
   under the sort button, and the chips are compact so they do not push the products far down. */
@media (min-width: 768px) {
    .category__toolbar .filter__menu {
        flex-wrap: wrap;
        gap: 8px 28px;
        min-width: 0;
    }

    .category__toolbar .filter__setting {
        flex: none;
    }

    .category__toolbar .filter__current {
        gap: 10px 12px;
    }

    .category__toolbar .current-setting {
        gap: 8px;
        padding: 9px 12px;
    }

    .category__toolbar .current-setting__label,
    .category__toolbar .current-setting__value {
        font-size: 15px;
        line-height: 140%;
    }

    .category__toolbar .current-setting__delete {
        width: 12px;
    }
}

@media (min-width: 1200px) {
    .category__toolbar .filter__menu {
        gap: 8px 36px;
    }

    .category__toolbar .filter__current {
        gap: 12px;
    }
}

/* The chips wrap in their own block; the sort chip stays in the top-right corner of the whole row, not on a line of its own. */
.filter__current-list {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    gap: inherit;
}

@media (min-width: 768px) {
    .category__toolbar .filter__current {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .category__toolbar .current-setting--sort {
        grid-column: 2;
        margin-left: 0;
    }
}