/* Ogólna stylizacja kontenera filtrów */
.solution-filters-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 10px;
}

/* Mobile - 1 kolumna */
@media (max-width: 781px) {
    .solution-filters-container {
        grid-template-columns: 1fr; /* 1 kolumna na mobile */
    }
    .solution-search {
        grid-column: 1!important; /* Na tabletach wyszukiwarka zajmuje wszystkie 3 kolumny */
    }
    .filter-buttons {
        grid-column: 1!important;
    }
    .solution-list-block-tags {
        flex-wrap: wrap!important;
    }
}

/* Stylizacja wyszukiwarki */
.solution-search {
    grid-column: span 3; /* Wyszukiwarka zajmuje jedną kolumnę na desktopie */
    position: relative;
    height: 48px;
}

.solution-search input {
    width: 100%;
    height: 48px;
    padding: 0 12px 0 35px;
    border: 1px solid #282828;
    border-radius: 50px;
    background-color: #f6f6f6;
    font-size: var(--wp--preset--font-size--td);
    color: #282828;
    font-family: var(--wp--preset--font-family--kanit);
    font-weight: 300;
}

.solution-search input:focus-visible {
    border: 1px solid var(--wp--preset--color--red);
    outline: 1px solid var(--wp--preset--color--red);
}

.solution-search::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3784 14.3726L12.7505 11.7659C13.7706 10.494 14.2645 8.87965 14.1309 7.25474C13.9972 5.62982 13.2461 4.11787 12.0319 3.02977C10.8177 1.94167 9.23276 1.36013 7.60297 1.40473C5.97318 1.44933 4.42241 2.11667 3.26954 3.26954C2.11667 4.42241 1.44933 5.97318 1.40473 7.60297C1.36013 9.23276 1.94167 10.8177 3.02977 12.0319C4.11787 13.2461 5.62982 13.9972 7.25474 14.1309C8.87965 14.2645 10.494 13.7706 11.7659 12.7505L14.3726 15.3571C14.4384 15.4235 14.5168 15.4762 14.6031 15.5122C14.6894 15.5482 14.782 15.5667 14.8755 15.5667C14.969 15.5667 15.0616 15.5482 15.1479 15.5122C15.2342 15.4762 15.3125 15.4235 15.3784 15.3571C15.5061 15.2251 15.5774 15.0486 15.5774 14.8649C15.5774 14.6812 15.5061 14.5046 15.3784 14.3726ZM7.79215 12.7505C6.81148 12.7505 5.85284 12.4597 5.03745 11.9149C4.22205 11.37 3.58653 10.5956 3.21125 9.68962C2.83596 8.7836 2.73777 7.78665 2.92909 6.82483C3.12041 5.863 3.59264 4.97951 4.28608 4.28608C4.97951 3.59264 5.863 3.12041 6.82483 2.92909C7.78665 2.73777 8.7836 2.83596 9.68962 3.21125C10.5956 3.58653 11.37 4.22205 11.9149 5.03745C12.4597 5.85284 12.7505 6.81148 12.7505 7.79215C12.7505 9.10718 12.2281 10.3684 11.2982 11.2982C10.3684 12.2281 9.10718 12.7505 7.79215 12.7505Z' fill='%23282828'/%3E%3C/svg%3E%0A");
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Stylizacja przycisków filtrów */
.filter-group {
    position: relative;
}

.filter-group button {
    width: 100%;
    background-color: #282828;
    color: #fff;
    padding: 4px 15px;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--wp--preset--font-size--td);
    height: 35px;
    text-align: center;
    font-family: var(--wp--preset--font-family--kanit);
    font-weight: 400;
}

.filter-group button svg {
    margin-left: 12px;
}

.filter-group button.active svg {
    transform: rotate(180deg);
}

.filter-group button:hover {
    background-color: #444;
}

/* Lista rozwijana filtrów (domyślnie ukryta) */
.filter-group ul:not(.nested-filter-list) {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #f7f7f7;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
    padding: 10px 10px 0px 10px;
    margin: 0;
    list-style: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.filter-group ul:not(.nested-filter-list) p {
    margin-top: 0;
}

.filter-group button.active + ul {
    display: block;
}

.filter-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
}

.filter-group label:hover {
    background-color: #f5f5f5;
}

/* Stylizacja checkboxów */
.filter-group input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 3px;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    min-width: 20px;
    min-height: 20px;
}

.filter-group input[type="checkbox"]:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.filter-group input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

/* Styl dla tytułów grup filtrów */
.filter-group-title {
    font-weight: 500;
    display: block;
    margin: 4px 0;
}

/* Zagnieżdżone listy dla hierarchicznych filtrów */
.nested-filter-list {
    list-style: none;
    padding-left: 0;
}

/* Styl dla elementów listy w zagnieżdżonych listach */
.nested-filter-list li {
    margin-bottom: 5px;
}

/* Upewnij się, że zagnieżdżone listy i ich elementy są wyświetlane poprawnie */
.nested-filter-list,
.nested-filter-list li {
    position: static;
    display: block;
}

/* Stylizacja przycisku Resetuj filtry */
.filter-buttons {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    grid-column: span 3;
}

@media (max-width: 781px) {
    .filter-buttons {
        flex-direction: column;
    }
}

#reset-filters-button {
    color: #dc3545;
    cursor: pointer;
    border: none;
    background-color: transparent;
    min-width: 82px;
    padding: 0;
}

#reset-filters-button:hover {
    color: #c82333;
}

.solution-list-block-tags {
    flex-wrap: nowrap;
}
.solution-list-block-tags .solution-list-block-tags-tag {
    flex-basis: 100%;
}

.solution-list-block {
    background-color: transparent;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    padding: 12px;
}

.solution-list-block:hover{
    border-color: #cf2e2e;
    background-color: #f7f7f7;
}

.solution-list-block .desktop {
    display: block;
}

.solution-list-block .mobile {
    display: none;
}

@media (max-width: 810px) {
    .solution-list-block .desktop {
        display: none;
    }
    
    .solution-list-block .mobile {
        display: block;
    }
}