/* PSL */
.adv-lender-card,
.adv-lender-grid,
.lender-details-accordion-wrapper {
    --lender-tooltip-bg: var(--color-surface);
    --lender-tooltip-fg: var(--color-text);
    --lender-tooltip-border: var(--color-border);
    --lender-tooltip-radius: var(--radius-md);
    --lender-tooltip-offset: var(--space);
}

.lender-tooltip-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.lender-tooltip-trigger {
    appearance: none;
    display: inline-grid;
    place-items: center;
    inline-size: 14px;
    block-size: 14px;
    border: 0;
    padding: 0;
    background-color: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-duration-faster) var(--ease-out-cubic);

    &:hover,
    &:focus-visible {
        color: var(--color-text);
    }
}

.lender-tooltip-icon {
    inline-size: 14px;
    block-size: 14px;
    flex-shrink: 0;
}

.lender-tooltip[hidden] {
    display: none;
}

.lender-tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--lender-tooltip-border);
    border-radius: var(--lender-tooltip-radius);
    background-color: var(--lender-tooltip-bg);
    color: var(--lender-tooltip-fg);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-xs);
    line-height: var(--leading-sm);
    max-inline-size: min(36ch, calc(100vw - (var(--space-lg) * 2)));
    left: 0;
    bottom: calc(100% + var(--lender-tooltip-offset));

    p {
        margin: 0;
    }
}

@supports (position-anchor: --lender-tooltip-anchor) {
    .lender-tooltip {
        position: fixed;
        bottom: anchor(top);
        left: anchor(center);
        translate: -50% calc(-1 * var(--lender-tooltip-offset));
    }

    .lender-tooltip::before {
        content: "";
        position: absolute;
        inline-size: var(--space);
        block-size: var(--space);
        top: auto;
        bottom: 0;
        left: 50%;
        translate: -50% 50%;
        rotate: 45deg;
        background-color: inherit;
        border-right: inherit;
        border-bottom: inherit;
    }
}

.adv-lender-card {
    background-color: var(--white);
    border-radius: calc(var(--radius-xl) - var(--psl-feat-lenders-gap, 0.375rem));
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    isolation: isolate;
    overflow: visible;

    .lender-card-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .lender-card-headline {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .lender-card-title {
        font-size: 1rem;
        line-height: 1.6;
    }

    .lender-card-rating-meta {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;
    }

    .lender-card-actions {
        display: flex;

        a {
            flex-grow: 1;
        }
    }
}

.adv-lender-grid {
    --grid-cell-padding: var(--space-lg);
    position: relative;
    isolation: isolate;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;

    /* grid header */
    .grid-header {
        display: grid;
        grid-template-columns: repeat(5, var(--1fr));
        grid-template-areas: "identity fixedRate variableRate degrees actions";

        @media (width < 1024px) {
            grid-template-columns: repeat(2, var(--1fr));
            grid-template-areas:
                "identity identity"
                "fixedRate variableRate"
                "actions actions"
                "controls controls";
        }
    }

    .lender-grid-identity {
        grid-area: identity;
        display: grid;
        align-content: start;
        gap: var(--space-sm);

        @media (width < 1024px) {
            grid-column: 1 / -1;
        }

        .title {
            display: none;
        }
    }

    .lender-grid-degrees {
        grid-area: degrees;

        @media (width < 1024px) {
            display: none;
        }
    }

    .lender-grid-actions {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;

        @media (width < 1024px) {
            grid-column: 1 / -1;
        }

        a {
            width: 100%;
        }

        span {
            color: var(--color-text-muted);
            font-weight: var(--font-weight-medium);
            font-size: 12px;
        }
    }

    .lender-grid-controls {
        position: relative;
        display: flex;
        flex-direction: column;

        @media (width < 1024px) {
            flex-direction: row;
            justify-content: space-between;
        }

        &.mobile {
            grid-area: controls;

            @media (width >= 1024px) {
                display: none;
            }
        }

        &.desktop {
            @media (width < 1024px) {
                display: none;
            }
        }
    }

    .lender-grid-fixed {
        grid-area: fixedRate;
    }

    .lender-grid-variable {
        grid-area: variableRate;
    }

    /* grid details */
    .grid-details {
        display: grid;
        grid-template-columns: repeat(5, var(--1fr));
        border-top: 1px solid var(--color-border);
        background-color: #fafafa;

        @media (width < 1024px) {
            grid-template-columns: var(--1fr);
        }

        &[hidden] {
            display: none;
        }
    }

    .grid-header,
    .grid-details {
        @media (width >= 1024px) {
            & > .grid-cell:not(:last-child) {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: var(--grid-cell-padding);
                    bottom: var(--grid-cell-padding);
                    width: 1px;
                    background-color: var(--color-border);
                }
            }
        }
    }

    .grid-cell {
        padding: var(--grid-cell-padding);

        .grid-cell-title {
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            margin-bottom: 8px;

            span {
                display: inline-flex;
                font-size: 14px;
                font-weight: var(--font-weight-medium);
                line-height: 1;
                color: #404040;
            }
        }
    }

    .lender-grid-logo {
        display: block;
        max-inline-size: 144px;
        max-block-size: 32px;
        inline-size: auto;
        block-size: auto;
        object-fit: contain;
        margin-bottom: var(--space-md);
    }

    .lender-grid-apr-item {
        span {
            display: inline-flex;
            font-size: 24px;
            line-height: 1;
            font-weight: 500;
        }
    }

    .lender-grid-degree-item {
        font-size: 18px;
        line-height: 1.1;
        letter-spacing: -0.375px;
    }

    .lender-grid-detail-group {
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            font-size: 13px;
            line-height: 1rem;
            color: var(--color-text-muted);
        }
    }

    .disclosure-link {
        font-size: 12px;
        color: var(--color-brand-green);
    }

    .credible-link {
        font-size: 14px;
        color: var(--color-brand-green);
        line-height: 1.6;
    }

    [data-lender-toggle] {
        appearance: none;
        background-color: transparent;
        border: none;
        outline: none;
        display: inline-flex;
        align-items: center;
        gap: var(--space);
        cursor: pointer;
        padding: 0;

        &::after {
            content: "";
            width: var(--space);
            height: var(--space);
            border-right: 1px solid currentColor;
            border-bottom: 1px solid currentColor;
            transform: rotate(45deg) translateY(-1px);
            transition: transform var(--transition-duration-faster) var(--ease-out-cubic);
        }

        &[aria-expanded="true"]::after {
            transform: rotate(-135deg) translateY(-1px);
        }
    }
}

.lender-sticky-cta {
    position: fixed;
    display: flex;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background-color: var(--white);
    backdrop-filter: blur(16px) saturate(130%);
    border-top: 1px solid rgb(0 0 0 / 0.08);
    box-shadow: 0 -10px 30px rgb(0 0 0 / 0.08);
    transition:
        opacity var(--transition-duration) var(--ease-in-quart),
        transform var(--transition-duration) var(--ease-in-quart),
        visibility 0s linear;
    will-change: opacity, transform;

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }

    &[data-visible="false"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%);
    }

    &[data-visible="true"] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    &[data-mobile-only] {
        @media (width > 768px) {
            display: none;
        }
    }

    .lender-sticky-cta__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        max-width: 768px;
        margin-inline: auto;
    }

    .lender-sticky-cta__brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-width: 112px;
    }

    .lender-sticky-cta__logo {
        display: block;
        width: auto;
        height: auto;
        max-height: 24px;
        object-fit: contain;
    }

    .lender-sticky-cta__rating {
        .star-rating {
            --star-size: 13px;
            --star-gap: 1px;
        }

        .star-rating-value {
            font-size: 12px;
        }
    }

    .lender-sticky-cta__button {
        --button-height: 44px;
        --button-padding-x: 12px;
        --button-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;

        &[target="_blank"]::after {
            display: none;
        }
    }
}

.lender-details-accordion-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;

    .lender-details-disclosure {
        position: relative;
        align-self: flex-end;
        margin-bottom: 6px;
    }

    .lender-disclosure-trigger {
        appearance: none;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: var(--font-sans);
        font-size: 12px;
        color: var(--color-brand-green);
        font-weight: var(--font-weight-medium);
    }

    .lender-disclosure-tooltip {
        position: absolute;
        position-anchor: unset;
        width: min(420px, calc(100vw - 2rem));
        max-inline-size: none;
        right: 0;
        left: auto;
        bottom: auto;
        top: calc(100% + var(--lender-tooltip-offset));
        translate: none;

        &::before {
            content: "";
            position: absolute;
            inline-size: var(--space);
            block-size: var(--space);
            top: 0;
            bottom: auto;
            right: 12px;
            left: auto;
            translate: 0 -50%;
            rotate: 45deg;
            background-color: inherit;
            border-left: 1px solid var(--lender-tooltip-border);
            border-top: 1px solid var(--lender-tooltip-border);
            border-right: none;
            border-bottom: none;
        }
    }
}

.adv-lender-details-accordion {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 6px 6px 0;
    margin-left: 6px;
    padding: 24px;
    gap: 24px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -6px;
        background-color: var(--color-brand-green);
        border-radius: 6px 0 0 6px;
        width: 6px;
    }

    .lender-details-header {
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;

        @media (width < 1024px) {
            flex-direction: column;
        }

        .brand {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .logo {
            display: flex;
            flex-direction: row;
        }

        .cta {
            display: flex;
            flex-direction: column;
        }
    }

    .lender-details-badge {
        display: inline-flex;
        align-self: flex-start;
        padding: 8px;
        border-radius: 4px;
        background-color: #e6f4ed;
        color: #1a1a1a;
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        line-height: 1;
        text-transform: uppercase;
    }

    .lender-details-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 16px;
    }

    .lender-details-identity {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;

        .star-rating {
            --star-fill: #fba929;
        }
    }

    .lender-details-logo {
        display: flex;
        height: 40px;
        width: 40px;

        img {
            height: 40px;
            width: 40px;
        }
    }

    .lender-details-rating {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 1;

        .star-rating-value {
            font-size: 15px;
            font-weight: var(--font-weight-bold);
            color: var(--color-text);
        }
    }

    .lender-details-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .lender-details-check-rates {
        --button-bg: var(--color-brand-blue);
        --button-fg: var(--white);
        --button-radius: var(--radius-sm);
        --button-height: 40px;
        --button-padding-x: 24px;
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;

        @media (width < 1024px) {
            --button-width: 100%;
            --button-height: 46px;
        }
    }

    .lender-details-cta-note {
        font-size: 11px;
        color: var(--color-text-muted);
        line-height: 1;
    }

    /* key facts grid */

    .lender-details-key-facts {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid var(--color-border);

        @media (width >= 1024px) {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    .lender-details-key-fact {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 16px;

        @media (width < 1024px) {
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;
            padding: 14px 0;
            border-bottom: 1px solid var(--color-border);

            &:last-child {
                border-bottom: none;
            }
        }

        @media (width >= 1024px) {
            padding: 16px 20px;
        }
    }

    .key-fact-label {
        display: block;
        font-size: 12px;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
        letter-spacing: 0.01em;
        line-height: 1.3;

        @media (width < 1024px) {
            font-size: 14px;
        }
    }

    .key-fact-value {
        display: block;
        font-size: 15px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        line-height: 1.3;

        @media (width < 1024px) {
            font-size: 16px;
            text-align: right;
        }
    }

    /* accordion sections */

    .lender-details-content.accordion-group {
        border-top: 1px solid var(--color-border);

        .accordion-item {
            --accordion-space: 16px;
            border-bottom: 1px solid var(--color-border);

            &:last-child {
                border-bottom: none;
            }

            @media (width > 768px) {
                --accordion-space: 18px;
            }
        }

        .accordion-title {
            padding-inline: 0;
            font-size: 15px;
            font-weight: var(--font-weight-semibold);
            color: var(--color-brand-navy);
            gap: 16px;
        }

        .accordion-content {
            padding-inline: 0;
        }
    }

    .lender-details-accordion-content {
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-text-muted);
    }

    /* pros & cons — 2-col on desktop */

    .lender-details-accordion-content--pros-cons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0 32px;

        @media (width > 768px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .lender-details-pros-title,
    .lender-details-cons-title {
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin: 0 0 10px;
    }

    .lender-details-cons-title {
        margin-top: 20px;
    }

    @media (width > 768px) {
        .lender-details-pros-title {
            grid-column: 1;
        }
        .lender-details-pros-list {
            grid-column: 1;
        }

        .lender-details-cons-title {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
        }

        .lender-details-cons-list {
            grid-column: 2;
            grid-row: 2;
        }
    }

    .lender-details-pros-list,
    .lender-details-cons-list {
        margin: 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;

        li {
            font-size: 14px;
            line-height: 1.5;
            color: var(--color-text-muted);
            padding-left: 32px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 1px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 10px 10px;
            }
        }
    }

    .lender-details-pros-list li::before {
        background-color: rgba(37, 134, 86, 0.12);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23258656' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .lender-details-cons-list li::before {
        background-color: rgba(192, 57, 43, 0.12);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%23c0392b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    /* expert insights */

    .lender-details-expert-insights-text {
        margin: 0;
    }

    /* more details — overview card + 2-col grid */

    .lender-details-more-details-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        @media (width > 768px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .lender-details-more-details-item {
        font-size: 14px;
        line-height: 1.6;

        &:first-child {
            grid-column: 1 / -1;
            background-color: var(--gray-50);
            border-radius: var(--radius-md);
            padding: 20px 24px;
        }
    }

    .lender-details-more-details-item-title {
        display: block;
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        margin-bottom: 2px;
    }

    .lender-details-more-details-item-text {
        color: var(--color-text-muted);
    }
}