/*
========================================================================
 BPP AGENCIES — GRID / LIST SWITCH V1.1
 Existing grid view remains production authority.
========================================================================
*/


/* ================================================================
   DIRECTORY CONTROLS
   ================================================================ */

body#page-agencies
.bpp-agency-directory-controls-v1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin-left: auto;
}


body#page-agencies
.bpp-agency-view-toggle-v1 {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    border: 1px solid #dce7e2;
    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 3px 12px rgba(13, 67, 47, .045);
}


body#page-agencies
.bpp-agency-view-btn-v1 {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 74px;
    height: 36px;

    padding: 0 11px;

    border: 0;
    border-radius: 8px;

    color: #596860;
    background: transparent;

    font: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


body#page-agencies
.bpp-agency-view-btn-v1 svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}


body#page-agencies
.bpp-agency-view-btn-v1:hover {
    color: #087747;
    background: #f4faf6;
}


body#page-agencies
.bpp-agency-view-btn-v1.is-active {
    color: #fff;
    background: #087b4b;

    box-shadow:
        0 3px 9px rgba(8, 123, 75, .16);
}


body#page-agencies
.bpp-agency-directory-controls-v1
.rpg-core-directory__tabs {
    margin: 0 !important;
}



/* ================================================================
   DESKTOP LIST MODE
   ================================================================ */

@media (min-width: 1025px) {

    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 12px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card {
        box-sizing: border-box !important;

        display: grid !important;

        grid-template-columns:
            155px
            72px
            minmax(0, 1fr) !important;

        align-items: stretch !important;

        gap: 15px !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 160px !important;

        margin: 0 !important;
        padding: 12px 15px !important;

        overflow: hidden !important;

        border:
            1px solid #dfe9e4 !important;

        border-radius:
            16px !important;

        background:
            #fff !important;

        box-shadow:
            0 5px 18px rgba(15, 59, 42, .045) !important;

        transition:
            transform .16s ease,
            border-color .16s ease,
            box-shadow .16s ease !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card:hover {
        transform:
            translateY(-1px) !important;

        border-color:
            #bad8c8 !important;

        box-shadow:
            0 10px 26px rgba(15, 59, 42, .07) !important;
    }


    /*
     * Existing cover becomes compact visual.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__cover {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 155px !important;

        height: auto !important;
        min-height: 136px !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius:
            12px !important;
    }


    /*
     * Logo no longer overlaps the cover.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__logo {
        position: relative !important;

        z-index: 2 !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 64px !important;
        height: 64px !important;

        min-width: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;

        overflow: hidden !important;

        border:
            1px solid #dce7e1 !important;

        border-radius:
            13px !important;

        background:
            #fff !important;

        box-shadow:
            0 4px 12px rgba(15, 59, 42, .06) !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__logo img {
        width: 100% !important;
        height: 100% !important;

        padding: 6px !important;

        object-fit: contain !important;
    }


    /*
     * Agency information + action area.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body {
        grid-column: 3 !important;
        grid-row: 1 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            300px !important;

        grid-template-areas:
            "top      actions"
            "title    actions"
            "location actions"
            "copy     actions"
            "metrics  actions" !important;

        align-content: center !important;

        column-gap: 23px !important;
        row-gap: 4px !important;

        min-width: 0 !important;

        padding: 2px 0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__topline {
        grid-area: top !important;

        justify-content:
            flex-start !important;

        gap: 7px !important;

        min-height: 19px !important;

        margin: 0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body > h3 {
        grid-area: title !important;

        margin:
            1px 0 !important;

        font-size:
            17px !important;

        line-height:
            1.22 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__location {
        grid-area: location !important;

        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        min-height: 18px !important;

        margin:
            0 !important;

        color:
            #68776f !important;

        font-size:
            11.5px !important;

        white-space:
            nowrap !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body > p {
        grid-area: copy !important;

        display:
            -webkit-box !important;

        max-width:
            700px !important;

        min-height:
            0 !important;

        margin:
            1px 0 3px !important;

        overflow:
            hidden !important;

        color:
            #697870 !important;

        font-size:
            11.5px !important;

        line-height:
            1.45 !important;

        -webkit-box-orient:
            vertical !important;

        -webkit-line-clamp:
            2 !important;
    }


    /*
     * Metrics become compact horizontal facts.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics {
        grid-area: metrics !important;

        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        gap: 6px !important;

        width:
            fit-content !important;

        margin:
            2px 0 0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics > div {
        display:
            inline-flex !important;

        flex-direction:
            row !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap: 5px !important;

        min-width: 0 !important;
        min-height: 30px !important;

        padding:
            5px 9px !important;

        border:
            1px solid #e6ece8 !important;

        border-radius:
            8px !important;

        background:
            #f8faf9 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics strong {
        font-size:
            12px !important;

        line-height:
            1 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics span {
        font-size:
            10px !important;

        white-space:
            nowrap !important;
    }


    /*
     * Existing Call / WhatsApp / Chat / View Profile actions.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-directory-actions {
        grid-area: actions !important;

        align-self: center !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        width: 100% !important;

        margin: 0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-actions > form {
        width:
            100% !important;

        margin:
            0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-action {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        width: 100% !important;

        min-width: 0 !important;
        min-height: 37px !important;

        padding:
            0 7px !important;

        border-radius:
            8px !important;

        font-size:
            10.5px !important;

        font-weight:
            750 !important;

        white-space:
            nowrap !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-action svg {
        width:
            14px !important;

        height:
            14px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-action--profile {
        grid-column:
            1 / -1 !important;

        min-height:
            39px !important;

        color:
            #fff !important;

        background:
            #04563f !important;

        border-color:
            #04563f !important;
    }

}



/* ================================================================
   TABLET LIST MODE
   ================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            11px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card {
        display: grid !important;

        grid-template-columns:
            110px
            60px
            minmax(0, 1fr) !important;

        gap:
            11px !important;

        padding:
            11px !important;

        border-radius:
            14px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__cover {
        width:
            110px !important;

        height:
            auto !important;

        min-height:
            126px !important;

        margin:
            0 !important;

        border-radius:
            10px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__logo {
        position:
            relative !important;

        align-self:
            center !important;

        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        min-height:
            56px !important;

        margin:
            0 !important;

        border-radius:
            12px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            220px !important;

        grid-template-areas:
            "top      actions"
            "title    actions"
            "location actions"
            "copy     actions"
            "metrics  actions" !important;

        column-gap:
            12px !important;

        padding:
            0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__topline {
        grid-area:
            top !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body > h3 {
        grid-area:
            title !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__location {
        grid-area:
            location !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body > p {
        grid-area:
            copy !important;

        -webkit-line-clamp:
            1 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics {
        grid-area:
            metrics !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-actions {
        grid-area:
            actions !important;

        align-self:
            center !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            6px !important;

        margin:
            0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-action--profile {
        grid-column:
            1 / -1 !important;
    }

}



/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 767px) {

    body#page-agencies
    .rpg-core-directory__section-head--agencies {
        align-items:
            stretch !important;
    }


    body#page-agencies
    .bpp-agency-directory-controls-v1 {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        width:
            100% !important;

        margin:
            10px 0 0 !important;
    }


    body#page-agencies
    .bpp-agency-view-toggle-v1 {
        width:
            fit-content !important;
    }


    body#page-agencies
    .bpp-agency-directory-controls-v1
    .rpg-core-directory__tabs {
        width:
            100% !important;

        overflow-x:
            auto !important;

        scrollbar-width:
            none !important;
    }


    body#page-agencies
    .bpp-agency-directory-controls-v1
    .rpg-core-directory__tabs::-webkit-scrollbar {
        display:
            none !important;
    }


    /*
     * Grid mode stays as your current production mobile card.
     */

    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-grid {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            9px !important;
    }


    /*
     * Compact mobile list card.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card {
        display:
            grid !important;

        grid-template-columns:
            60px minmax(0, 1fr) !important;

        align-items:
            start !important;

        gap:
            10px !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            11px !important;

        overflow:
            hidden !important;

        border:
            1px solid #dfe8e3 !important;

        border-radius:
            13px !important;

        background:
            #fff !important;

        box-shadow:
            0 4px 13px rgba(15, 59, 42, .04) !important;
    }


    /*
     * Hide large cover only in LIST mode.
     */
    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__cover {
        display:
            none !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__logo {
        position:
            relative !important;

        grid-column:
            1 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        min-height:
            56px !important;

        margin:
            0 !important;

        overflow:
            hidden !important;

        border:
            1px solid #dce7e1 !important;

        border-radius:
            12px !important;

        background:
            #fff !important;

        box-shadow:
            none !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__logo img {
        width:
            100% !important;

        height:
            100% !important;

        padding:
            5px !important;

        object-fit:
            contain !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body {
        grid-column:
            2 !important;

        min-width:
            0 !important;

        padding:
            0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__topline {
        justify-content:
            flex-start !important;

        gap:
            5px !important;

        min-height:
            18px !important;

        margin:
            0 0 3px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body > h3 {
        margin:
            0 0 4px !important;

        font-size:
            14px !important;

        line-height:
            1.25 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__location {
        min-height:
            17px !important;

        margin:
            0 0 4px !important;

        font-size:
            10.5px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__body > p {
        display:
            none !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics {
        display:
            flex !important;

        align-items:
            center !important;

        flex-wrap:
            wrap !important;

        gap:
            4px !important;

        margin:
            5px 0 0 !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics > div {
        min-width:
            0 !important;

        min-height:
            28px !important;

        padding:
            4px 6px !important;

        border-radius:
            7px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics strong {
        font-size:
            11px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-core-agency-card__metrics span {
        font-size:
            9px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-actions {
        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            5px !important;

        width:
            100% !important;

        margin:
            9px 0 0 !important;

        padding-top:
            8px !important;

        border-top:
            1px solid #edf2ef !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-action {
        width:
            100% !important;

        min-height:
            36px !important;

        padding:
            0 6px !important;

        font-size:
            9.5px !important;

        border-radius:
            8px !important;
    }


    body#page-agencies.bpp-agency-view-list
    .rpg-directory-action--profile {
        grid-column:
            1 / -1 !important;
    }

}