/* Cards (Karta Debiti / Krediti / me Parapagesë) — the comparison section under the shared hero.
   Shared filter widgets (finmarket-filters.css) are restyled here only inside .kd-section, so the other
   product pages keep their own look. */

.hp-bg-canvas {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

/* ── Hero (shared HeroSlider partial, sized to the card reference) ──
   The copy keeps the shared narrow width (site.css), so long titles wrap and the photo stays visible.
   Only this stylesheet's pages are affected. */

.hp-bg-canvas > .if-hero.dw-hero {
    min-height: 540px;
}

    .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy {
        width: min(100%, calc(1560px + 2 * clamp(20px, 4.5vw, 72px)));
        padding: 0 clamp(20px, 4.5vw, 72px);
    }

    .hp-bg-canvas > .if-hero.dw-hero .dw-hero__eyebrow-dot {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }

    /* Desktop sizing; on mobile the shared smaller, bottom-pinned copy applies (site.css). */
    @media (min-width: 768px) {
        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .dw-hero__eyebrow {
            gap: 12px;
            margin: 0;
            color: rgba(255, 255, 255, .72);
            font-size: clamp(11px, 1.1vw, 13px);
            font-weight: 500;
            letter-spacing: .22em;
        }

        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__title {
            max-width: 24ch;
            margin-top: clamp(14px, 2vh, 22px);
            font-size: clamp(30px, 4vw, 58px);
            line-height: 1.02;
            letter-spacing: -.042em;
        }

        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__body {
            max-width: 58ch;
            margin-top: clamp(20px, 3vh, 32px);
            color: rgba(255, 255, 255, .8);
            font-size: clamp(15px, 1.5vw, 19px);
            line-height: 1.68;
            text-wrap: pretty;
        }
    }

    /* Slides crossfade as one block (opacity + 18px rise, .7s), rather than the staggered shared animation. */
    .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__slide {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    }

        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__slide.dw-hero__slide--active {
            opacity: 1;
            transform: none;
        }

        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__slide .dw-hero__eyebrow,
        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__slide .if-hero__title,
        .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__slide .if-hero__body {
            opacity: 1;
            transform: none;
            transition: none;
        }

    /* Progress bars: 2px tracks, 18px apart, each with a generous invisible hit area. */
    .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__dots {
        gap: 2px;
        margin: clamp(20px, 3vh, 34px) -9px 0;
    }

    .hp-bg-canvas > .if-hero.dw-hero .if-hero__dot {
        width: calc(clamp(40px, 4vw, 60px) + 18px);
        height: 30px;
        flex: none;
        padding: 14px 9px;
        background: none;
        background-clip: content-box;
        overflow: visible;
        outline: none;
    }

        .hp-bg-canvas > .if-hero.dw-hero .if-hero__dot::before {
            content: "";
            position: absolute;
            inset: 14px 9px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .22);
        }

        .hp-bg-canvas > .if-hero.dw-hero .if-hero__dot .dw-hero__progress {
            inset: 14px 9px;
            border-radius: 999px;
        }

        .hp-bg-canvas > .if-hero.dw-hero .if-hero__dot:focus-visible::before {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
        }

@media (prefers-reduced-motion: reduce) {
    .hp-bg-canvas > .if-hero.dw-hero .dw-hero__copy .if-hero__slide {
        transition: none;
    }
}

.kd-section {
    --kd-ink-hover: #6B2E4D;
    --kd-ink-muted: rgba(87, 28, 42, .78);
    --kd-ink-soft: rgba(87, 28, 42, .75);
    --kd-line: rgba(87, 28, 42, .14);
    --kd-border: rgba(87, 28, 42, .42);
    --kd-paper: #EDEEEF;
    --kd-ease: cubic-bezier(.16, 1, .3, 1);
    --kd-spring: cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
    padding: clamp(64px, 10vh, 130px) clamp(20px, 4.5vw, 72px) clamp(72px, 11vh, 140px);
    background: var(--kd-paper);
    color: #111;
    font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    /* The design uses the browser's normal line height, not the site-wide 1.65. */
    line-height: normal;
    -webkit-font-smoothing: antialiased;
}

    /* The design is built on border-box sizing; without it the pill inputs and the "Apliko" link grow by their
       padding and border. */
    .kd-section *,
    .kd-section *::before,
    .kd-section *::after,
    .dep-modal *,
    .dep-modal *::before,
    .dep-modal *::after {
        box-sizing: border-box;
    }

    .kd-section p {
        margin: 0;
        line-height: inherit;
    }

.kd-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Scroll reveal ── */

.kd-rise-ready .kd-rise {
    opacity: 0;
    transform: translateY(22px);
    transition: transform .9s var(--kd-ease), opacity .9s var(--kd-ease);
}

.kd-rise-ready .kd-explainer.kd-rise {
    transform: translateY(20px);
    transition-duration: .85s;
}

.kd-rise-ready .kd-rise.is-in {
    opacity: 1;
    transform: none;
}

/* ── Title ── */

.kd-title {
    margin: 0;
    color: var(--color-brand);
    font-size: clamp(28px, 3.6vw, 52px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.042em;
    text-align: left;
}

/* ── Explainer ── */

.kd-explainer {
    max-width: 1000px;
    margin: clamp(22px, 3vh, 36px) auto 0;
    border: 1px solid rgba(87, 28, 42, .16);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

.kd-explainer__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 32px);
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kd-explainer__title {
    color: var(--color-brand);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.012em;
}

.kd-explainer__icon {
    flex: none;
    color: rgba(87, 28, 42, .6);
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
    transition: transform .4s var(--kd-ease);
}

.kd-explainer__toggle[aria-expanded="true"] .kd-explainer__icon {
    transform: rotate(180deg);
}

.kd-explainer__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s var(--kd-ease);
}

.kd-explainer__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 clamp(20px, 2.8vw, 32px) clamp(20px, 2.6vw, 28px);
}

.kd-explainer__divider {
    display: block;
    height: 1px;
    margin: 6px 0;
    background: var(--kd-line);
}

.kd-explainer__question {
    color: var(--color-brand);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.012em;
}

/* The answers are rich text from the CMS: paragraphs, bold lead-ins and numbered lists. */
.kd-explainer__answer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .kd-explainer__answer p {
        color: rgba(17, 17, 17, .7);
        font-size: 14.5px;
        line-height: 1.72;
        text-wrap: pretty;
    }

    .kd-explainer__answer strong,
    .kd-explainer__answer b {
        color: var(--color-brand);
        font-weight: 600;
    }

    .kd-explainer__answer ol,
    .kd-explainer__answer ul {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: kd-step;
    }

    .kd-explainer__answer li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: baseline;
        padding: 11px 0;
        border-top: 1px solid var(--kd-line);
        color: rgba(17, 17, 17, .78);
        font-size: 14.5px;
        line-height: 1.6;
        counter-increment: kd-step;
    }

        .kd-explainer__answer li::before {
            content: counter(kd-step, decimal-leading-zero);
            color: rgba(87, 28, 42, .65);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .12em;
        }

    .kd-explainer__answer ul li::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(87, 28, 42, .65);
        transform: translateY(-2px);
    }

    .kd-explainer__answer li p {
        margin: 0;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }

/* ── Filter panel ── */

.kd-section .dep-filters-panel.kd-panel {
    position: relative;
    z-index: 30;
    margin: clamp(24px, 3.4vh, 40px) 0 0;
    padding: clamp(20px, 2.6vw, 34px);
    border: 1px solid rgba(87, 28, 42, .16);
    border-radius: 26px;
    background: #fff;
    box-shadow: none;
}

    .kd-section .dep-filters-panel.kd-panel::before {
        content: none;
    }

/* Desktop: the fields share the row evenly and "Kërko" keeps its own width (3 × 1fr + auto in the design). */
.kd-section .dep-filters-panel .dep-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: clamp(12px, 1.6vw, 20px);
    margin: 0;
}

.kd-section .dep-filter__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
}

.kd-section .dep-filters-panel .dep-filters .kd-search {
    flex: 0 0 auto;
}

.kd-section .dep-filters-panel .dep-filter__label {
    padding: 0;
    color: var(--kd-ink-soft);
    font-size: 12.5px;
    font-weight: 450;
    line-height: 1.3;
}

/* Every control in the row shares the same white pill. */
.kd-section .dep-filters-panel .dep-filter__input,
.kd-section .dep-filters-panel .hp-custom-select__trigger,
.kd-section .dep-filters-panel .dep-bank-select__trigger {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid var(--kd-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-brand);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 450;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}

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

    .kd-section .dep-filters-panel .dep-filter__input:focus,
    .kd-section .dep-filters-panel .hp-custom-select__trigger:focus,
    .kd-section .dep-filters-panel .dep-bank-select__trigger:focus {
        outline: none;
    }

    .kd-section .dep-filters-panel .dep-filter__input:focus,
    .kd-section .dep-filters-panel .dep-bank-select__trigger:focus-visible,
    .kd-section .dep-filters-panel .hp-custom-select__trigger:focus-visible,
    .kd-section .dep-filters-panel .hp-custom-select--open .hp-custom-select__trigger,
    .kd-section .dep-filters-panel .dep-bank-select--open .dep-bank-select__trigger {
        border-color: var(--color-brand);
        box-shadow: 0 0 0 3px rgba(87, 28, 42, .1);
    }

    .kd-section .dep-filters-panel .hp-custom-select__trigger:hover,
    .kd-section .dep-filters-panel .dep-bank-select__trigger:hover {
        border-color: var(--color-brand);
    }

.kd-section .hp-custom-select__trigger svg,
.kd-section .dep-bank-select__chevron svg {
    width: 15px;
    height: 15px;
    color: var(--color-brand);
    transition: transform .3s var(--kd-ease);
}

/* Dropdown panels pop in rather than snapping open. */
@keyframes kd-pop {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    to {
        opacity: 1;
    }
}

.kd-section .hp-custom-select__panel {
    top: calc(100% + 10px);
    padding: 10px;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 60px -30px rgba(17, 17, 17, .45);
}

.kd-section .hp-custom-select--open .hp-custom-select__panel {
    animation: kd-pop .26s var(--kd-ease) both;
}

.kd-section .dep-filters-panel .hp-custom-select__option {
    padding: 13px 16px;
    border-radius: 12px;
    color: var(--color-brand);
    font-size: 14px;
    transition: background .25s;
}

    .kd-section .dep-filters-panel .hp-custom-select__option:hover {
        background: rgba(87, 28, 42, .06);
    }

.kd-section .hp-custom-select__option--selected {
    background: rgba(87, 28, 42, .08);
    font-weight: 600;
}

/* Bank multi-select */

.kd-section .dep-bank-select__badge {
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(87, 28, 42, .1);
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 600;
}

.kd-section .dep-bank-select__panel {
    top: calc(100% + 10px);
    z-index: 60;
    width: min(420px, calc(100vw - 48px));
    min-width: 0;
    max-width: none;
    padding: 16px 8px 8px;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 70px -34px rgba(17, 17, 17, .5);
}

.kd-section .dep-bank-select--open .dep-bank-select__panel {
    animation: kd-pop .26s var(--kd-ease) both;
}

.kd-section .dep-bank-select__head {
    align-items: baseline;
    padding: 0 14px 12px;
}

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

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

.kd-section .dep-filters__bar #depClear {
    font-weight: 450;
}

.kd-section .dep-bank-select__list {
    max-height: 280px;
}

.kd-section .dep-bank-option {
    gap: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--color-brand);
    transition: background .25s;
}

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

.kd-section .dep-bank-option__box {
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(87, 28, 42, .4);
    border-radius: 6px;
}

.kd-section .dep-bank-option__input:checked + .dep-bank-option__box {
    border-color: var(--color-brand);
    background: var(--color-brand);
}

    .kd-section .dep-bank-option__input:checked + .dep-bank-option__box::after {
        left: 6px;
        top: 2px;
    }

.kd-section .dep-bank-option__avatar {
    width: 42px;
    height: 32px;
    border-radius: 8px;
    background: rgba(87, 28, 42, .07);
    color: var(--color-brand);
    font-size: 11px;
}

.kd-section .dep-bank-option__name {
    font-size: 14.5px;
    font-weight: 450;
}

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

/* ── Buttons ── */

.kd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 40px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .3s, color .3s, transform .35s var(--kd-spring);
}

.kd-btn--solid {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

    .kd-btn--solid:hover,
    .kd-btn--solid:focus-visible {
        background: var(--kd-ink-hover);
        color: #fff;
        transform: translateY(-2px);
    }

.kd-btn--outline {
    border-color: var(--kd-border);
    background: #fff;
    color: var(--color-brand);
    font-weight: 450;
}

    .kd-btn--outline:hover,
    .kd-btn--outline:focus-visible {
        background: rgba(87, 28, 42, .06);
        color: var(--color-brand);
        transform: translateY(-2px);
    }

.kd-btn--sm {
    min-height: 44px;
    padding: 11px 24px;
    font-size: 13.5px;
}

    /* "Apliko" lifts less and darkens to the brand plum instead. */
    .kd-btn--sm.kd-btn--solid:hover,
    .kd-btn--sm.kd-btn--solid:focus-visible {
        background: var(--color-brand);
        transform: translateY(-1px);
    }

.kd-btn--more {
    min-height: 48px;
    padding: 14px 38px;
    font-size: 14px;
}

.kd-section .dep-filters-panel .dep-filters .kd-search {
    width: auto;
    min-width: 0;
}

/* ── Active filters + results bar ── */

.kd-section .dep-filters__bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.kd-section .dep-active-filters {
    display: grid;
    justify-items: start;
    gap: 12px;
    margin-top: clamp(18px, 2.4vh, 24px);
    padding-top: clamp(16px, 2.2vh, 20px);
    border-top: 1px solid var(--kd-line);
    animation: kd-fade .35s ease both;
}

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

.kd-section .dep-active-filters__label {
    color: var(--kd-ink-soft);
    font-size: 13px;
    font-weight: 450;
}

.kd-section .dep-active-filters__list {
    gap: 10px;
}

.kd-section .dep-active-filters__clear {
    margin-top: 4px;
}

.kd-section .dep-chip {
    gap: 10px;
    padding: 9px 14px 9px 18px;
    border-radius: 999px;
    background: rgba(87, 28, 42, .07);
    color: var(--color-brand);
    font-size: 13.5px;
    font-weight: 450;
}

.kd-section .dep-chip__remove {
    width: 22px;
    height: 22px;
    background: rgba(87, 28, 42, .12);
    color: var(--color-brand);
    transition: background .25s;
}

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

    .kd-section .dep-chip__remove svg {
        width: 10px;
        height: 10px;
    }

.kd-section .dep-results-meta {
    position: relative;
    justify-content: flex-end;
    gap: 10px 14px;
    margin: clamp(18px, 2.4vh, 26px) 0 0 auto;
}

    .kd-section .dep-results-meta .dep-results-count {
        color: var(--color-brand);
        font-size: 13.5px;
        font-weight: 600;
    }

.kd-section .dep-results-meta__sep {
    color: rgba(87, 28, 42, .5);
    font-size: 13.5px;
}

.kd-section .dep-sort {
    gap: 14px;
}

.kd-section .dep-sort__prefix {
    color: var(--kd-ink-soft);
    font-size: 13.5px;
    font-weight: 450;
}

.kd-section .dep-sort__trigger {
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--kd-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-brand);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 450;
    transition: border-color .3s ease, box-shadow .3s ease;
}

    .kd-section .dep-sort__trigger:hover {
        border-color: var(--color-brand);
        background: #fff;
    }

    .kd-section .dep-sort__trigger:focus {
        outline: none;
    }

    /* Same focus/open ring as the filter fields above. */
    .kd-section .dep-sort__trigger:focus-visible,
    .kd-section .dep-sort--open .dep-sort__trigger {
        border-color: var(--color-brand);
        box-shadow: 0 0 0 3px rgba(87, 28, 42, .1);
    }

.kd-section .dep-sort__chevron svg {
    width: 14px;
    height: 14px;
    transition: transform .3s var(--kd-ease);
}

.kd-section .dep-sort__panel {
    z-index: 60;
    width: min(280px, calc(100vw - 48px));
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 60px -30px rgba(17, 17, 17, .45);
}

.kd-section .dep-sort--open .dep-sort__panel {
    display: flex;
    flex-direction: column;
    animation: kd-pop .26s var(--kd-ease) both;
}

.kd-section .dep-sort__option {
    padding: 13px 16px;
    border-radius: 12px;
    color: var(--color-brand);
    font-family: inherit;
    font-size: 14px;
    transition: background .25s;
}

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

.kd-section .dep-sort__option--selected {
    background: rgba(87, 28, 42, .06);
}

/* ── Results ── */

.kd-section .dep-results {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 16px);
    margin-top: clamp(18px, 2.6vh, 28px);
}

.kd-card {
    padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
    border: 1px solid rgba(87, 28, 42, .32);
    border-radius: 18px;
    background: #fff;
    transition: border-color .35s ease, box-shadow .35s ease;
}

    .kd-card:hover {
        border-color: rgba(87, 28, 42, .6);
        box-shadow: 0 26px 50px -42px rgba(17, 17, 17, .5);
    }

/* Bank | network | currency | category columns (--kd-extra) | info | actions */
.kd-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(min-content, 1fr) minmax(0, .7fr) repeat(var(--kd-extra, 1), minmax(0, 1fr)) 26px auto;
    align-items: center;
    gap: 0 clamp(12px, 1.8vw, 26px);
}

.kd-row__cells {
    display: contents;
}

.kd-row__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 4px;
    border-radius: 9px;
    background: rgba(87, 28, 42, .06);
    box-sizing: border-box;
}

    .kd-row__logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 36px;
        max-height: 30px;
        object-fit: contain;
    }

.kd-row__bank,
.kd-row__cell {
    min-width: 0;
}

.kd-row__bank-name {
    overflow: hidden;
    color: var(--color-brand);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.014em;
    text-overflow: ellipsis;
}

.kd-row__product,
.kd-row__value {
    margin-top: 4px !important;
    color: var(--kd-ink-muted);
    font-size: 14px;
    font-weight: 450;
}

.kd-row__label {
    color: var(--color-brand);
    font-size: 14px;
    font-weight: 600;
}

.kd-row__value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kd-row__network-icon {
    display: block;
    width: auto;
    height: auto;
    max-width: 34px;
    max-height: 16px;
    object-fit: contain;
}

.kd-row__info {
    position: relative;
    justify-self: center;
}

.kd-row__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    justify-self: end;
}

/* Info point: round "i" with a fading disclaimer tooltip (toggled by main.js on click). */
.kd-section .dep-info-icon__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .3s var(--kd-spring);
}

    .kd-section .dep-info-icon__btn:hover {
        color: #fff;
        transform: scale(1.1);
    }

.kd-section .dep-info-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kd-section .dep-info-icon__tooltip {
    position: absolute;
    display: block;
    text-align: left;
    bottom: calc(100% + 10px);
    right: -8px;
    z-index: 40;
    width: min(300px, 72vw);
    max-width: none;
    padding: 14px 16px;
    border: 1px solid rgba(87, 28, 42, .18);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 54px -26px rgba(17, 17, 17, .5);
    color: rgba(17, 17, 17, .78);
    font-size: 12.5px;
    line-height: 1.6;
    text-wrap: pretty;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .28s ease, transform .3s var(--kd-ease);
}

.kd-section .dep-info-icon:hover .dep-info-icon__tooltip,
.kd-section .dep-info-icon.active .dep-info-icon__tooltip,
.kd-section .dep-info-icon__btn:focus-visible ~ .dep-info-icon__tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.kd-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(4px, 1.4vh, 18px);
}

/* "Database updated as of …" note under the results, always visible. */
.kd-section .kd-data-note {
    margin-top: clamp(24px, 4vh, 44px);
    color: rgba(17, 17, 17, .55);
    font-size: 12.5px;
    line-height: 1.6;
}

.kd-section .dep-empty {
    padding: clamp(28px, 4vw, 52px);
    border: 1px dashed rgba(87, 28, 42, .3);
    border-radius: 22px;
    background: rgba(87, 28, 42, .03);
    text-align: center;
}

.dep-empty__title {
    color: var(--color-brand);
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 600;
    letter-spacing: -.024em;
}


/* ── Loader ── */

.dep-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

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

.dep-loader__spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(87, 28, 42, .15);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: dep-spin .7s linear infinite;
}

@keyframes dep-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Details modal ── */

.dep-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

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

.dep-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(24, 10, 16, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: kd-fade .25s ease both;
}

/* A card carries 25+ attributes, far more than fits on screen: the bank header stays pinned to the top and
   only the attribute list below it scrolls. */
.dep-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(86vh, 860px);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    color: #111;
    box-shadow: 0 40px 90px -40px rgba(17, 17, 17, .6);
    animation: kd-pop .3s cubic-bezier(.16, 1, .3, 1) both;
}

.dep-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Without this the body grows to its content height and the list never scrolls. */
    min-height: 0;
}

.dep-modal__header {
    padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) clamp(18px, 2.2vw, 24px);
    border-bottom: 1px solid rgba(87, 28, 42, .12);
}

.dep-modal__logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(87, 28, 42, .07);
    box-sizing: border-box;
}

.dep-modal__bank-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 78px;
    max-height: 36px;
    object-fit: contain;
}

.dep-modal__bank-name {
    margin: 18px 0 0;
    color: var(--color-brand);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.dep-modal__deposit-name {
    margin: 6px 0 0;
    color: rgba(87, 28, 42, .8);
    font-size: 15px;
    font-weight: 450;
}

.dep-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 18px;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(20px, 2.6vw, 26px) clamp(24px, 3vw, 32px);
}

.dep-details__attr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.dep-details__attr-label {
    margin: 0;
    color: var(--color-brand);
    font-size: 14.5px;
    font-weight: 600;
}

.dep-details__attr-value {
    margin: 0;
    color: rgba(87, 28, 42, .85);
    font-size: 14.5px;
    font-weight: 450;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Sentence-length values (the minimum payment rule, the late payment penalty) don't fit a right-hand column, so
   they run full width under their label. */
.dep-details__attr--block {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

    .dep-details__attr--block .dep-details__attr-value {
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
    }

.dep-details__wallets {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}

.dep-details__network-icon {
    display: block;
    width: auto;
    height: auto;
    max-width: 56px;
    max-height: 22px;
    object-fit: contain;
}

.dep-details__wallet-icon {
    height: 20px;
    width: auto;
    object-fit: contain;
}

.dep-details__source {
    align-self: flex-start;
    margin-top: 2px;
    border-bottom: 1px solid rgba(87, 28, 42, .45);
    color: var(--color-brand);
    font-size: 14px;
    font-weight: 450;
    text-decoration: none;
}

.dep-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(17, 17, 17, .6);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background .25s, color .25s;
}

    .dep-modal__close:hover {
        background: rgba(87, 28, 42, .06);
        color: #111;
    }

body.dep-modal-open {
    overflow: hidden;
}

/* On short screens the pinned header leaves too little room for the list, so the whole panel scrolls. */
@media (max-height: 760px) {
    .dep-modal__panel {
        overflow-y: auto;
    }

    .dep-modal__body,
    .dep-details {
        flex: 0 0 auto;
        overflow: visible;
    }
}

/* ── Responsive ── */

@media (max-width: 1079px) {
    .kd-section .dep-filters-panel .dep-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

        .kd-section .dep-filters-panel .dep-filters .kd-search {
            width: 100%;
        }

    .kd-row {
        grid-template-columns: 44px minmax(0, 1.4fr) minmax(min-content, 1fr) minmax(0, .7fr) repeat(var(--kd-extra, 1), minmax(0, 1fr)) 26px;
        row-gap: 14px;
    }

    .kd-row__actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
}

@media (max-width: 699px) {
    .kd-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .kd-row__cells {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px clamp(12px, 4vw, 20px);
    }

    .kd-row__info {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .kd-section .dep-info-icon__tooltip {
        right: auto;
        left: -8px;
    }

    .kd-row__actions {
        flex-direction: column;
        justify-self: start;
    }
}

@media (max-width: 639px) {
    .kd-section .dep-filters-panel .dep-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .kd-section .dep-results-meta {
        justify-content: flex-start;
        margin-left: 0;
    }

    .kd-section .dep-sort {
        flex-wrap: wrap;
    }

    /* Anchor the panel to the full-width results bar instead of the trigger, so it can't run off-screen
       wherever the trigger ends up after wrapping. */
    .kd-section .dep-sort {
        position: static;
    }

    .kd-section .dep-sort__panel {
        left: 0;
        right: 0;
        width: auto;
    }

    .kd-section .dep-bank-select__panel {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kd-rise-ready .kd-rise {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .kd-section *,
    .dep-modal * {
        animation: none !important;
        transition: none !important;
    }
}