/*
 * The Finmarket filter panel shared by every product list (loans, deposits, cards, accounts,
 * payments & transfers, diaspora): the white card holding the filter fields, the active filter
 * chips underneath and the results count with the "Renditur sipas" dropdown.
 *
 * Page stylesheets (loans.css, deposits.css, …) still own the result rows below the panel.
 */

@keyframes fm-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fm-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dep-filters-panel {
    position: relative;
    z-index: 30;
    margin-top: clamp(24px, 3.4vh, 40px);
    border-radius: 26px;
    border: 1px solid rgba(87, 28, 42, 0.16);
    background: rgb(255, 255, 255);
    padding: clamp(20px, 2.6vw, 34px);
    opacity: 1;
    transform: none;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 90ms, opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

    .dep-filters-panel .dep-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        gap: clamp(12px, 1.6vw, 20px);
        align-items: end;
        margin-bottom: 0;
    }

    .dep-filters-panel .dep-filter__field {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dep-filters-panel .dep-filter__label {
        font-size: 12.5px;
        font-weight: 450;
        color: rgba(87, 28, 42, .75);
    }

    .dep-filters-panel select.dep-filter__select,
    .dep-filters-panel .hp-custom-select__trigger {
        width: 100%;
        min-width: 0;
        background: #ffffff;
        border: 1px solid rgba(87, 28, 42, 0.42);
        border-radius: 999px;
        padding: 13px 20px;
        min-height: 50px;
        font-size: 14.5px;
        font-weight: 450;
        color: var(--color-brand);
        cursor: pointer;
        box-sizing: border-box;
        transition: border-color 0.3s;
    }

        .dep-filters-panel select.dep-filter__select:focus,
        .dep-filters-panel .hp-custom-select__trigger:hover {
            border-color: var(--color-brand);
        }

    .dep-filters-panel .hp-custom-select__option--selected {
        color: var(--color-brand);
        font-weight: 600;
    }

    .dep-filters-panel .dep-filter__input,
    .dep-filters-panel .dep-filter__icon,
    .dep-filters-panel .dep-filter__suffix,
    .dep-filters-panel .hp-custom-select__trigger,
    .dep-filters-panel .hp-custom-select__option {
        color: var(--color-brand);
    }

        .dep-filters-panel .dep-filter__input::placeholder {
            color: var(--color-brand);
            opacity: 0.65;
        }

.dep-active-filters {
    margin-top: clamp(16px, 2.2vh, 22px);
    padding-top: clamp(14px, 2vh, 18px);
    border-top: 1px solid rgba(87, 28, 42, .14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    animation: dp-fade .35s ease both;
}

    .dep-active-filters[hidden] {
        display: none;
    }

.dep-active-filters__label {
    flex: none;
    margin: 0;
    font-size: 13px;
    font-weight: 450;
    color: rgba(87, 28, 42, .75);
}

.dep-active-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dep-active-filters #depClear.dep-active-filters__clear,
.dep-active-filters__clear {
    display: block;
    width: fit-content;
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid rgba(87, 28, 42, 0.45);
    border-radius: 0;
    background: none;
    color: var(--color-brand);
    font: inherit;
    font-size: 13.5px;
    font-weight: 450;
    text-decoration: none;
    cursor: pointer;
}

    .dep-active-filters__clear:hover {
        color: #4a1723;
    }

.dep-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 16px;
    border-radius: 999px;
    background: rgba(87, 28, 42, 0.07);
    color: var(--color-brand);
    font-size: 13.5px;
    font-weight: 450;
    max-width: 100%;
}

.dep-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(87, 28, 42, 0.12);
    color: var(--color-brand);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s;
}

    .dep-chip__remove:hover {
        background: rgba(87, 28, 42, 0.24);
    }


.dep-results-bar {
    margin-top: clamp(12px,1.8vh,18px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    position: relative;
}

    .dep-results-bar .dep-results-count {
        margin: 0;
        padding: 0;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--color-brand);
    }

.dep-results-bar__sep {
    font-size: 13.5px;
    color: rgba(87, 28, 42, 0.5);
}

.dep-results-count:empty + .dep-results-bar__sep {
    display: none;
}

.dep-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dep-sort__prefix {
    margin: 0;
    font-size: 13.5px;
    font-weight: 450;
    color: rgba(87, 28, 42, .75);
}

.dep-sort__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    min-height: 44px;
    border: 1px solid rgba(87, 28, 42, 0.42);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-brand);
    font: inherit;
    font-size: 13.5px;
    font-weight: 450;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

    .dep-sort__trigger:hover {
        border-color: var(--color-brand);
        background: rgba(87, 28, 42, 0.05);
    }

.dep-sort__chevron,
.dep-bank-select__chevron,
.dep-radio-select__chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}

    .dep-sort__chevron svg,
    .dep-bank-select__chevron svg,
    .dep-radio-select__chevron svg {
        width: 16px;
        height: 16px;
    }

.dep-sort--open .dep-sort__chevron {
    transform: rotate(180deg);
}

.dep-sort__panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 140;
    width: min(280px, calc(100vw - 48px));
    padding: 10px;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    box-shadow: 0 28px 60px -30px rgba(17, 17, 17, 0.45);
    box-sizing: border-box;
}

.dep-sort--open .dep-sort__panel {
    display: flex;
    flex-direction: column;
    animation: fm-pop 0.26s cubic-bezier(.16, 1, .3, 1) both;
}

.dep-sort__option {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--color-brand);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s;
}

    .dep-sort__option:hover {
        background: rgba(87, 28, 42, 0.06);
    }

.dep-sort__option--selected {
    font-weight: 600;
}

/* ── Bank multi-select ── */

.dep-bank-select {
    position: relative;
    display: block;
}

.dep-bank-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 13px 20px;
    min-height: 50px;
    border: 1px solid rgba(87, 28, 42, 0.42);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-brand);
    font: inherit;
    font-size: 14.5px;
    font-weight: 450;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

    .dep-bank-select__trigger:hover {
        border-color: var(--color-brand);
    }

.dep-bank-select__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.dep-bank-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dep-bank-select__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(87, 28, 42, 0.1);
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
}

    .dep-bank-select__badge[hidden] {
        display: none;
    }

.dep-bank-select--open .dep-bank-select__chevron {
    transform: rotate(180deg);
}

.dep-bank-select__panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 150;
    width: min(420px, calc(100vw - 48px));
    max-height: 340px;
    overflow: auto;
    padding: 16px 8px 8px;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    box-shadow: 0 30px 70px -34px rgba(17, 17, 17, 0.5);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(87, 28, 42, 0.4) transparent;
}

    .dep-bank-select__panel::-webkit-scrollbar {
        width: 8px;
    }

    .dep-bank-select__panel::-webkit-scrollbar-thumb {
        background: rgba(87, 28, 42, 0.4);
        border-radius: 4px;
    }

.dep-bank-select--open .dep-bank-select__panel {
    display: block;
    animation: fm-pop 0.26s cubic-bezier(.16, 1, .3, 1) both;
}

.dep-bank-select__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px 12px;
}

.dep-bank-select__count {
    margin: 0;
    color: var(--color-brand);
    font-size: 14px;
    font-weight: 600;
}

.dep-bank-select__link {
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid rgba(87, 28, 42, 0.45);
    border-radius: 0;
    background: none;
    color: var(--color-brand);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

    .dep-bank-select__link:hover {
        color: #4a1723;
    }

.dep-bank-option {
    display: grid;
    grid-template-columns: 22px 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--color-brand);
    cursor: pointer;
    transition: background 0.25s;
}

    .dep-bank-option:hover {
        background: rgba(87, 28, 42, 0.05);
    }

.dep-bank-option__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


.dep-bank-option__box,
.dep-radio-option__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1.5px solid rgba(87, 28, 42, 0.4);
    background: transparent;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: transparent;
}

.dep-bank-option__box {
    border-radius: 6px;
}

.dep-radio-option__dot {
    border-radius: 50%;
}

.dep-bank-option__input:checked + .dep-bank-option__box,
.dep-radio-option__dot--on {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #ffffff;
}

.dep-bank-option__input:focus-visible + .dep-bank-option__box {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.dep-bank-option__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 3px 5px;
    border-radius: 8px;
    background: rgba(87, 28, 42, 0.07);
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}

    .dep-bank-option__avatar img {
        display: block;
        max-width: 32px;
        max-height: 26px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.dep-bank-option__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 450;
    color: var(--color-brand);
}

.dep-bank-option__count {
    font-size: 13.5px;
    font-weight: 450;
    color: rgba(87, 28, 42, 0.62);
}

.dep-radio-select {
    position: relative;
    display: block;
}

.dep-radio-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 13px 20px;
    min-height: 50px;
    border: 1px solid rgba(87, 28, 42, 0.42);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-brand);
    font: inherit;
    font-size: 14.5px;
    font-weight: 450;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

    .dep-radio-select__trigger:hover {
        border-color: var(--color-brand);
    }

    .dep-filters-panel select.dep-filter__select:focus,
    .dep-filters-panel .hp-custom-select__trigger:focus,
    .dep-filters-panel .hp-custom-select--open .hp-custom-select__trigger,
    .dep-bank-select__trigger:focus,
    .dep-bank-select--open .dep-bank-select__trigger,
    .dep-radio-select__trigger:focus,
    .dep-radio-select--open .dep-radio-select__trigger,
    .dep-sort__trigger:focus,
    .dep-sort--open .dep-sort__trigger {
        outline: none;
        box-shadow: 0 0 0 3px rgba(87, 28, 42, 0.12);
    }

.dep-radio-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-radio-select--open .dep-radio-select__chevron {
    transform: rotate(180deg);
}

.dep-radio-select__panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 150;
    width: min(340px, calc(100vw - 48px));
    max-height: 340px;
    overflow: auto;
    padding: 10px 8px 8px;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    box-shadow: 0 30px 70px -34px rgba(17, 17, 17, 0.5);
    box-sizing: border-box;
}

.dep-radio-select--open .dep-radio-select__panel {
    display: block;
    animation: fm-pop 0.26s cubic-bezier(.16, 1, .3, 1) both;
}

.dep-radio-option {
    width: 100%;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s;
}

    .dep-radio-option:hover {
        background: rgba(87, 28, 42, 0.05);
    }

.dep-radio-option__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 450;
    color: var(--color-brand);
}

.dep-filters-panel .dep-filters .dep-search-btn.hp-btn {
    min-width: 0;
    width: auto;
    flex: none;
    min-height: 50px;
    padding: 13px 40px;
    border-radius: 999px;
    background: var(--color-brand);
    border: 0;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.3s, transform 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

    .dep-filters-panel .dep-filters .dep-search-btn.hp-btn:hover {
        background: #4a1723;
    }

    .dep-filters-panel .dep-filters .dep-search-btn.hp-btn:active {
        transform: scale(0.97);
    }

/* ── Responsive ── */
@media (max-width: 991px) {
    .dep-filters-panel .dep-filters {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
    }
}

@media (max-width: 640px) {
    .dep-filters-panel .dep-filters {
        grid-template-columns: minmax(0px, 1fr);
        gap: clamp(12px, 1.6vw, 20px);
    }

    .dep-bank-select__panel {
        width: auto;
    }
}