.filter-dropdown--collar {
    position: fixed;
    width: 380px;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--color-light-gray) #f5f5f5;
}

.filter-dropdown--collar[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-dropdown--collar::-webkit-scrollbar { width: 6px; }
.filter-dropdown--collar::-webkit-scrollbar-track { background: #f5f5f5; }
.filter-dropdown--collar::-webkit-scrollbar-thumb { background: var(--color-light-gray); border-radius: 3px; }
.filter-dropdown--collar::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ============================================
   OPCJA — wiersz collar (oraz "wszystkie")
   ============================================ */

.collar-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: white;
    text-decoration: none;
    color: var(--color-secondary);
    font-family: var(--font-condensed);
    transition: background 0.2s ease;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
}

.collar-option:last-child {
    border-bottom: none;
}

.collar-option:hover:not(.is-disabled):not(.is-current) {
    background: #f8f8f8;
}

.collar-option.is-current {
    background: var(--color-primary);
    color: white;
}

.collar-option.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
}

.collar-option.is-disabled .collar-option-name,
.collar-option.is-disabled .collar-option-desc {
    color: #cccccc;
}

/* ============================================
   "WSZYSTKIE RODZAJE PRACY" — bez kółka
   ============================================ */

.collar-option-all {
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 14px;
}

.collar-option-all.is-current {
    font-weight: 600;
}

/* ============================================
   KÓŁKO 40px — kolor collara + ikona kołnierzyka
   ============================================ */

.collar-circle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s ease;
}

.collar-option.has-light-color .collar-circle {
    border: 1.5px solid #ccc;
}

/* Ikona kołnierzyka (SVG mask) — domyślnie biała */
.collar-circle::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-color: white;
    -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgZmlsbD0iIzAwMDAwMCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDUxMS45MTEgNTExLjkxMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTUwNi40NjcsMjUxLjYwNGwtMzcuNTI1LTgzLjk0N2MtMy4yMjEtNjQuMTcxLTEwOC40OC05My4wMzUtMjEzLjAzNS05My4wMzVTNDYuMDk0LDEwMy40ODYsNDIuODk0LDE2Ny42NTcNCgkJCWwtMzcuMzMzLDgzLjUyYy0xMC40OTYsMjAuOTkyLTUuODQ1LDQ2LjgyNywxMS41Miw2My4wMTlsMTM1Ljc4NywxMjAuNDA1YzEuOTQxLDEuNzQ5LDQuNDgsMi42ODgsNy4wODMsMi42ODgNCgkJCWMwLjY4MywwLDEuMzQ0LTAuMDY0LDIuMDI3LTAuMTkyYzMuMjY0LTAuNjE5LDYuMDM3LTIuNzMxLDcuNTMxLTUuNjk2bDM5LjcyMy03OS40NDVoOTMuNDgzbDM5LjcyMyw3OS40NDUNCgkJCWMxLjQ3MiwyLjk2NSw0LjI2Nyw1LjA3Nyw3LjUzMSw1LjY5NmMwLjY2MSwwLjEyOCwxLjM0NCwwLjE5MiwyLjAyNywwLjE5MmMyLjU4MSwwLDUuMDk5LTAuOTM5LDcuMDgzLTIuNjg4bDEzNi0xMjAuNTc2DQoJCQlDNTEyLjEyMSwyOTguMDI1LDUxNi43OTMsMjcyLjE5LDUwNi40NjcsMjUxLjYwNHogTTIxOS44MzMsMzMwLjYyMmwxMC42NjctMjEuMzMzaDUwLjgxNmwxMC42NjcsMjEuMzMzSDIxOS44MzN6DQoJCQkgTTI4NC4zNjYsMjg3Ljk1NkgyMjcuNDdMNjQuNTA1LDE2NS43MzdjNi4wOC00MC4wODUsODYuMjI5LTY5Ljc4MSwxOTEuNDAzLTY5Ljc4MWMxMDUuMTk1LDAsMTg1LjMyMywyOS42OTYsMTkxLjQwMyw2OS43ODENCgkJCUwyODQuMzY2LDI4Ny45NTZ6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgZmlsbD0iIzAwMDAwMCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDUxMS45MTEgNTExLjkxMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTUwNi40NjcsMjUxLjYwNGwtMzcuNTI1LTgzLjk0N2MtMy4yMjEtNjQuMTcxLTEwOC40OC05My4wMzUtMjEzLjAzNS05My4wMzVTNDYuMDk0LDEwMy40ODYsNDIuODk0LDE2Ny42NTcNCgkJCWwtMzcuMzMzLDgzLjUyYy0xMC40OTYsMjAuOTkyLTUuODQ1LDQ2LjgyNywxMS41Miw2My4wMTlsMTM1Ljc4NywxMjAuNDA1YzEuOTQxLDEuNzQ5LDQuNDgsMi42ODgsNy4wODMsMi42ODgNCgkJCWMwLjY4MywwLDEuMzQ0LTAuMDY0LDIuMDI3LTAuMTkyYzMuMjY0LTAuNjE5LDYuMDM3LTIuNzMxLDcuNTMxLTUuNjk2bDM5LjcyMy03OS40NDVoOTMuNDgzbDM5LjcyMyw3OS40NDUNCgkJCWMxLjQ3MiwyLjk2NSw0LjI2Nyw1LjA3Nyw3LjUzMSw1LjY5NmMwLjY2MSwwLjEyOCwxLjM0NCwwLjE5MiwyLjAyNywwLjE5MmMyLjU4MSwwLDUuMDk5LTAuOTM5LDcuMDgzLTIuNjg4bDEzNi0xMjAuNTc2DQoJCQlDNTEyLjEyMSwyOTguMDI1LDUxNi43OTMsMjcyLjE5LDUwNi40NjcsMjUxLjYwNHogTTIxOS44MzMsMzMwLjYyMmwxMC42NjctMjEuMzMzaDUwLjgxNmwxMC42NjcsMjEuMzMzSDIxOS44MzN6DQoJCQkgTTI4NC4zNjYsMjg3Ljk1NkgyMjcuNDdMNjQuNTA1LDE2NS43MzdjNi4wOC00MC4wODUsODYuMjI5LTY5Ljc4MSwxOTEuNDAzLTY5Ljc4MWMxMDUuMTk1LDAsMTg1LjMyMywyOS42OTYsMTkxLjQwMyw2OS43ODENCgkJCUwyODQuMzY2LDI4Ny45NTZ6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.2s ease;
}

/* Jasny kolor collara — ikona szara zamiast białej */
.collar-option.has-light-color .collar-circle::after {
    background-color: #888;
}

/* Disabled — kółko szare (zamiast opacity) */
.collar-option.is-disabled .collar-circle {
    background: #e0e0e0 !important;
    border-color: #d0d0d0;
}

.collar-option.is-disabled .collar-circle::after {
    background-color: #b0b0b0;
}

/* ============================================
   CONTENT (nazwa + opis)
   ============================================ */

.collar-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.collar-option-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collar-option.is-current .collar-option-name {
    color: white;
    font-weight: 600;
}

.collar-option-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collar-option.is-current .collar-option-desc {
    color: white;
    opacity: 0.9;
}

/* ============================================
   LICZNIK
   ============================================ */

.collar-option-count {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    color: #999;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 2px 6px;
    line-height: 1.4;
}

.collar-option.is-current .collar-option-count {
    color: white;
    background: var(--color-primary-dark);
}

.collar-option-all .collar-option-count {
    display: none;
}

/* ============================================
   RWD — < 560px: full-width spójny z country/industry
   ============================================ */

@media (max-width: 559px) {
    .filter-dropdown--collar {
        width: calc(100vw - 40px) !important;
        max-width: 100%;
    }
}

/* ============================================
   RWD — < 380px: mniejsze elementy
   ============================================ */

@media (max-width: 379px) {
    .collar-circle {
        width: 36px;
        height: 36px;
    }

    .collar-circle::after {
        width: 20px;
        height: 20px;
    }

    .collar-option {
        padding: 8px 12px;
        gap: 10px;
    }

    .collar-option-name {
        font-size: 13px;
    }

    .collar-option-desc {
        font-size: 11px;
    }
}