/*
 Theme Name:   Follo Child Theme
 Theme URI:    https://follo.social
 Description:  Follo Child Theme
 Author:       Follo
 Author URI:   https://follo.social
 Template:     Divi
 Version:      1.0.2
*/

/* =========================================================
   FOLLO SOCIAL PROFILE
   Clean consolidated BuddyPress Nouveau styling
   ========================================================= */

:root {
    --follo-accent: #6657e8;
    --follo-accent-hover: #5547d6;
    --follo-accent-soft: #f0eeff;

    --follo-page: #f5f6f8;
    --follo-card: #ffffff;
    --follo-text: #18191a;
    --follo-muted: #70757d;
    --follo-line: #e5e7eb;
    --follo-soft: #f0f2f5;

    --follo-radius: 14px;
    --follo-shadow: 0 2px 10px rgba(20, 24, 35, 0.05);

    --follo-content: 1460px;
    --follo-header-content: 1360px;
}


/* =========================================================
   DIVI / PAGE SHELL
   ========================================================= */

body.buddypress.bp-user #main-content {
    background: var(--follo-page);
}

body.buddypress.bp-user #main-content .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.buddypress.bp-user #main-content .container:before {
    display: none !important;
}

body.buddypress.bp-user #sidebar {
    display: none !important;
}

body.buddypress.bp-user #left-area {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

body.buddypress.bp-user .entry-title {
    display: none !important;
}

body.buddypress.bp-user #buddypress {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 72px !important;
}


/* =========================================================
   PROFILE HEADER / COVER
   ========================================================= */

body.buddypress.bp-user #item-header {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--follo-card);
    border: 0;
    border-radius: 0;
}

/*
 * BuddyPress Nouveau cover wrapper.
 * Explicitly reset old Nouveau positioning so the header
 * does not create the large blank area seen before.
 */
body.buddypress.bp-user #cover-image-container {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--follo-card);
}

body.buddypress.bp-user #header-cover-image {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: none !important;
    height: 320px !important;
    min-height: 320px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #d9dce3;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-radius: 0 !important;
}

/* Profile identity strip below the cover */
body.buddypress.bp-user #item-header-cover-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;

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

    width: min(var(--follo-header-content), calc(100% - 48px)) !important;
    min-height: 128px !important;

    margin: 0 auto !important;
    padding: 0 18px 18px !important;

    background: transparent !important;
}


/* =========================================================
   AVATAR
   ========================================================= */

body.buddypress.bp-user #item-header-avatar {
    position: relative !important;
    z-index: 6 !important;

    flex: 0 0 176px !important;
    width: 176px !important;

    float: none !important;

    margin: -88px 26px 0 0 !important;
    padding: 0 !important;
}

body.buddypress.bp-user #item-header-avatar a {
    display: block;
}

body.buddypress.bp-user #item-header-avatar img,
body.buddypress.bp-user #item-header-avatar img.avatar {
    display: block !important;

    width: 176px !important;
    height: 176px !important;

    margin: 0 !important;

    border: 6px solid #fff !important;
    border-radius: 50% !important;

    background: #fff;
    object-fit: cover;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.14),
        0 1px 4px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   MEMBER NAME / STATUS
   ========================================================= */

body.buddypress.bp-user #item-header-content {
    position: relative !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 96px !important;

    float: none !important;

    margin: 0 !important;
    padding: 24px 0 10px !important;

    color: var(--follo-text);
    text-align: left !important;
}

body.buddypress.bp-user #item-header-content h2,
body.buddypress.bp-user #item-header-content h2 a,
body.buddypress.bp-user #item-header-content .user-nicename {
    margin: 0 0 5px !important;
    padding: 0 !important;

    color: var(--follo-text) !important;

    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    text-shadow: none !important;
}

body.buddypress.bp-user #item-header-content .activity,
body.buddypress.bp-user #item-header-content .highlight {
    display: inline-block;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    color: var(--follo-muted) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    text-shadow: none !important;
}

/* Generic profile action buttons */
body.buddypress.bp-user #item-header-content .generic-button {
    display: inline-block;
    margin: 10px 7px 0 0 !important;
}

body.buddypress.bp-user #item-header-content .generic-button a,
body.buddypress.bp-user #item-header-content button,
body.buddypress.bp-user #item-header-content input[type="button"],
body.buddypress.bp-user #item-header-content input[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 9px 16px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: var(--follo-accent) !important;
    color: #fff !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    box-shadow: none !important;
    text-decoration: none !important;

    transition:
        background .15s ease,
        transform .15s ease;
}

body.buddypress.bp-user #item-header-content .generic-button a:hover,
body.buddypress.bp-user #item-header-content button:hover {
    background: var(--follo-accent-hover) !important;
    transform: translateY(-1px);
}


/* =========================================================
   MAIN PROFILE NAVIGATION
   ========================================================= */

body.buddypress.bp-user #object-nav {
    clear: both;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border-top: 1px solid var(--follo-line) !important;
    border-bottom: 1px solid var(--follo-line) !important;

    box-shadow: 0 2px 6px rgba(20, 24, 35, .025);
}

body.buddypress.bp-user #object-nav ul {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;

    width: min(var(--follo-header-content), calc(100% - 48px)) !important;

    margin: 0 auto !important;
    padding: 0 18px !important;

    gap: 2px;

    list-style: none !important;
    overflow-x: auto;

    scrollbar-width: none;
}

body.buddypress.bp-user #object-nav ul::-webkit-scrollbar {
    display: none;
}

body.buddypress.bp-user #object-nav li {
    flex: 0 0 auto;
    margin: 0 !important;
}

body.buddypress.bp-user #object-nav li a {
    position: relative;

    display: block;

    padding: 17px 16px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #51545a !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    text-decoration: none !important;
    white-space: nowrap;

    transition:
        color .15s ease,
        background .15s ease;
}

body.buddypress.bp-user #object-nav li a:hover {
    background: #f7f7fa !important;
    color: var(--follo-accent) !important;
}

body.buddypress.bp-user #object-nav li.current a,
body.buddypress.bp-user #object-nav li.selected a {
    background: transparent !important;
    color: var(--follo-accent) !important;
}

body.buddypress.bp-user #object-nav li.current a:after,
body.buddypress.bp-user #object-nav li.selected a:after {
    content: "";

    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;

    height: 3px;

    border-radius: 3px 3px 0 0;

    background: var(--follo-accent);
}

body.buddypress.bp-user #object-nav .count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    margin-left: 4px !important;
    padding: 0 6px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: var(--follo-accent-soft) !important;
    color: var(--follo-accent) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}


/* =========================================================
   PAGE BODY / ACTIVITY GRID
   ========================================================= */

body.buddypress.bp-user #item-body {
    width: min(var(--follo-content), calc(100% - 48px)) !important;

    margin: 0 auto !important;
    padding: 24px 18px 0 !important;
}

body.buddypress.bp-user.activity #item-body {
    width: min(var(--follo-content), calc(100% - 48px)) !important;
}

.follo-profile-layout {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;

    gap: 24px;

    align-items: start;
}

.follo-profile-sidebar {
    display: flex;
    flex-direction: column;

    gap: 18px;

    min-width: 0;
}

.follo-profile-feed {
    min-width: 0;
}


/* =========================================================
   FOLLO CARDS
   ========================================================= */

.follo-card {
    margin: 0 !important;
    padding: 18px !important;

    border: 1px solid var(--follo-line) !important;
    border-radius: var(--follo-radius) !important;

    background: var(--follo-card) !important;

    box-shadow: var(--follo-shadow) !important;
}

.follo-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 0 14px !important;
}

.follo-card-title h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--follo-text) !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.follo-card-title a {
    color: var(--follo-accent) !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

.follo-card-title a:hover {
    color: var(--follo-accent-hover) !important;
}

.follo-muted {
    color: #8b9098 !important;
    font-size: 13px;
    line-height: 1.5;
}


/* Intro */

.follo-intro-text {
    margin: 0 0 14px !important;

    color: #44484f;

    font-size: 14px;
    line-height: 1.6;
}

.follo-intro-list {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.follo-intro-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin: 10px 0 !important;

    color: #555a62;

    font-size: 13px;
    line-height: 1.45;
}

.follo-intro-icon {
    flex: 0 0 20px;
}


/* Photos */

.follo-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 20px;

    border-radius: 10px;

    background: var(--follo-soft);

    color: #959aa2;

    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.follo-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;
}

.follo-photo-grid a {
    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 8px;

    background: #eceef1;
}

.follo-photo-grid img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Friends */

.follo-friends-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px 8px;
}

.follo-friend {
    display: block;

    min-width: 0;

    color: #34373c !important;

    text-align: center;
    text-decoration: none !important;
}

.follo-friend img {
    display: block !important;

    width: 72px !important;
    height: 72px !important;

    margin: 0 auto 7px !important;

    border: 0 !important;
    border-radius: 50% !important;

    object-fit: cover;

    transition: transform .15s ease;
}

.follo-friend:hover img {
    transform: scale(1.04);
}

.follo-friend-name {
    display: block;

    overflow: hidden;

    color: #34373c;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.follo-friend:hover .follo-friend-name {
    color: var(--follo-accent);
}


/* =========================================================
   SECONDARY ACTIVITY NAV
   ========================================================= */

.follo-profile-feed #subnav {
    margin: 0 0 16px !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}

.follo-profile-feed #subnav ul {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 5px;

    margin: 0 !important;
    padding: 0 !important;
}

.follo-profile-feed #subnav li {
    margin: 0 !important;
}

.follo-profile-feed #subnav li a {
    display: block;

    padding: 9px 13px !important;

    border-radius: 9px !important;

    background: transparent !important;
    color: #62666e !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

.follo-profile-feed #subnav li.current a,
.follo-profile-feed #subnav li.selected a {
    background: var(--follo-accent-soft) !important;
    color: var(--follo-accent) !important;
}

.follo-profile-feed .bp-screen-title,
body.buddypress.bp-user .activity-screen-title {
    display: none !important;
}


/* =========================================================
   POST COMPOSER
   ========================================================= */

body.buddypress.bp-user #whats-new-form {
    margin: 0 0 18px !important;
    padding: 18px !important;

    border: 1px solid var(--follo-line) !important;
    border-radius: var(--follo-radius) !important;

    background: #fff !important;

    box-shadow: var(--follo-shadow) !important;
}

body.buddypress.bp-user #whats-new-form #whats-new-avatar,
body.buddypress.bp-user #whats-new-form .activity-greeting {
    margin-top: 0 !important;
}

body.buddypress.bp-user #whats-new-form #whats-new-avatar img,
body.buddypress.bp-user #whats-new-form .avatar {
    width: 52px !important;
    height: 52px !important;

    border-radius: 50% !important;

    object-fit: cover;
}

body.buddypress.bp-user #whats-new-textarea {
    margin-bottom: 0 !important;
}

body.buddypress.bp-user #whats-new-textarea textarea {
    width: 100% !important;
    min-height: 48px !important;

    padding: 12px 18px !important;

    border: 0 !important;
    border-radius: 25px !important;

    background: var(--follo-soft) !important;
    color: var(--follo-text) !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    box-shadow: none !important;
    resize: none;
}

body.buddypress.bp-user #whats-new-textarea textarea:focus {
    background: #e9ebef !important;

    outline: none !important;
    box-shadow: none !important;
}

/* Nouveau submit area */
body.buddypress.bp-user #whats-new-options {
    margin-top: 14px !important;
}

body.buddypress.bp-user #whats-new-submit input,
body.buddypress.bp-user #whats-new-submit button {
    padding: 9px 18px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: var(--follo-accent) !important;
    color: #fff !important;

    font-weight: 600 !important;
}

body.buddypress.bp-user #whats-new-submit input:hover,
body.buddypress.bp-user #whats-new-submit button:hover {
    background: var(--follo-accent-hover) !important;
}


/* =========================================================
   SEARCH / FILTER BAR
   ========================================================= */

.follo-profile-feed .subnav-filters {
    margin: 0 0 16px !important;
    padding: 10px 12px !important;

    border: 1px solid var(--follo-line) !important;
    border-radius: 11px !important;

    background: #fff !important;

    box-shadow: none !important;
}

.follo-profile-feed .subnav-filters select,
.follo-profile-feed .subnav-filters input {
    min-height: 38px;

    border: 1px solid #dddfe4 !important;
    border-radius: 8px !important;

    background: #fff !important;
}


/* =========================================================
   ACTIVITY / TIMELINE CARDS
   ========================================================= */

body.buddypress.bp-user .activity-list,
body.buddypress.bp-user #activity-stream ul.activity-list {
    margin: 0 !important;
    padding: 0 !important;
}

body.buddypress.bp-user .activity-list .activity-item {
    position: relative;

    margin: 0 0 18px !important;
    padding: 18px !important;

    overflow: hidden;

    border: 1px solid var(--follo-line) !important;
    border-radius: var(--follo-radius) !important;

    background: #fff !important;

    box-shadow: var(--follo-shadow) !important;
}

body.buddypress.bp-user .activity-list .activity-avatar {
    margin-right: 14px !important;
}

body.buddypress.bp-user .activity-list .activity-avatar img {
    width: 48px !important;
    height: 48px !important;

    border: 0 !important;
    border-radius: 50% !important;

    object-fit: cover;
}

body.buddypress.bp-user .activity-list .activity-content {
    min-width: 0;
}

body.buddypress.bp-user .activity-list .activity-header {
    margin: 0 0 10px !important;

    color: #777c84 !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
}

body.buddypress.bp-user .activity-list .activity-header a {
    text-decoration: none !important;
}

body.buddypress.bp-user .activity-list .activity-header a:first-child {
    color: var(--follo-text) !important;

    font-weight: 700 !important;
}

body.buddypress.bp-user .activity-list .activity-inner {
    margin: 12px 0 !important;

    color: #292c31 !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}

body.buddypress.bp-user .activity-list .activity-inner p:last-child {
    margin-bottom: 0 !important;
}

body.buddypress.bp-user .activity-list .activity-inner img {
    display: block;

    max-width: 100% !important;
    height: auto !important;

    margin: 14px 0 0 !important;

    border-radius: 12px !important;
}

/* Friendship/member cards inside activity items */
body.buddypress.bp-user .activity-list .activity-inner .mini-card,
body.buddypress.bp-user .activity-list .activity-inner .activity-item {
    border-radius: 10px;
}


/* =========================================================
   ACTIVITY ACTIONS / COMMENTS
   ========================================================= */

body.buddypress.bp-user .activity-list .activity-meta {
    display: flex !important;
    align-items: center;

    gap: 5px;

    margin: 14px 0 0 !important;
    padding: 10px 0 0 !important;

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

body.buddypress.bp-user .activity-list .activity-meta a,
body.buddypress.bp-user .activity-list .activity-meta button {
    flex: 1 1 auto;

    min-height: 38px;

    margin: 0 !important;
    padding: 8px 10px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #60646b !important;

    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    text-align: center;
    text-decoration: none !important;

    box-shadow: none !important;
}

body.buddypress.bp-user .activity-list .activity-meta a:hover,
body.buddypress.bp-user .activity-list .activity-meta button:hover {
    background: #f2f1ff !important;
    color: var(--follo-accent) !important;
}

body.buddypress.bp-user .activity-comments {
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;

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


/* =========================================================
   BUDDYPRESS MISC CLEANUP
   ========================================================= */

body.buddypress.bp-user .bp-feedback,
body.buddypress.bp-user .bp-feedback.info {
    border-radius: 10px;
}

body.buddypress.bp-user button,
body.buddypress.bp-user input,
body.buddypress.bp-user select,
body.buddypress.bp-user textarea {
    font-family: inherit;
}


/* =========================================================
   DESKTOP WIDE
   ========================================================= */

@media (min-width: 1600px) {
    :root {
        --follo-content: 1500px;
        --follo-header-content: 1420px;
    }

    .follo-profile-layout {
        grid-template-columns: 370px minmax(0, 1fr) !important;
        gap: 26px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
    .follo-profile-layout {
        grid-template-columns: 300px minmax(0, 1fr) !important;
        gap: 18px;
    }

    body.buddypress.bp-user #item-header-cover-image,
    body.buddypress.bp-user #object-nav ul,
    body.buddypress.bp-user #item-body,
    body.buddypress.bp-user.activity #item-body {
        width: calc(100% - 30px) !important;
    }

    body.buddypress.bp-user #item-header-avatar {
        flex-basis: 148px !important;
        width: 148px !important;
        margin-top: -74px !important;
        margin-right: 20px !important;
    }

    body.buddypress.bp-user #item-header-avatar img,
    body.buddypress.bp-user #item-header-avatar img.avatar {
        width: 148px !important;
        height: 148px !important;
    }

    .follo-friends-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 768px) {
    body.buddypress.bp-user #header-cover-image {
        height: 220px !important;
        min-height: 220px !important;
    }

    body.buddypress.bp-user #item-header-cover-image {
        align-items: flex-start !important;

        width: calc(100% - 24px) !important;
        min-height: 112px !important;

        padding: 0 8px 14px !important;
    }

    body.buddypress.bp-user #item-header-avatar {
        flex: 0 0 112px !important;
        width: 112px !important;

        margin: -56px 16px 0 0 !important;
    }

    body.buddypress.bp-user #item-header-avatar img,
    body.buddypress.bp-user #item-header-avatar img.avatar {
        width: 112px !important;
        height: 112px !important;

        border-width: 4px !important;
    }

    body.buddypress.bp-user #item-header-content {
        min-height: 82px !important;

        padding: 13px 0 6px !important;
    }

    body.buddypress.bp-user #item-header-content h2,
    body.buddypress.bp-user #item-header-content h2 a,
    body.buddypress.bp-user #item-header-content .user-nicename {
        font-size: 23px !important;
    }

    body.buddypress.bp-user #object-nav ul {
        width: 100% !important;

        padding: 0 10px !important;
    }

    body.buddypress.bp-user #object-nav li a {
        padding: 14px 12px !important;

        font-size: 13px !important;
    }

    body.buddypress.bp-user #item-body,
    body.buddypress.bp-user.activity #item-body {
        width: calc(100% - 24px) !important;

        padding: 14px 0 0 !important;
    }

    .follo-profile-layout {
        display: block !important;
    }

    .follo-profile-sidebar {
        margin-bottom: 16px;
    }

    .follo-card {
        margin-bottom: 14px !important;
    }

    .follo-friends-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {
    body.buddypress.bp-user #header-cover-image {
        height: 190px !important;
        min-height: 190px !important;
    }

    body.buddypress.bp-user #item-header-cover-image {
        display: block !important;

        padding-bottom: 14px !important;
    }

    body.buddypress.bp-user #item-header-avatar {
        width: 96px !important;

        margin: -48px 0 0 12px !important;
    }

    body.buddypress.bp-user #item-header-avatar img,
    body.buddypress.bp-user #item-header-avatar img.avatar {
        width: 96px !important;
        height: 96px !important;
    }

    body.buddypress.bp-user #item-header-content {
        min-height: 0 !important;

        padding: 8px 12px 5px !important;
    }

    body.buddypress.bp-user #item-header-content h2,
    body.buddypress.bp-user #item-header-content h2 a,
    body.buddypress.bp-user #item-header-content .user-nicename {
        font-size: 22px !important;
    }

    body.buddypress.bp-user #object-nav li a {
        padding: 13px 10px !important;
    }

    .follo-friends-grid {
        gap: 9px 5px;
    }

    .follo-friend img {
        width: 60px !important;
        height: 60px !important;
    }
}


/* =========================================================
   FOLLO PHASE 4
   Mockup polish: header actions + softer borderless feed
   ========================================================= */

/* ---------- Member identity row ---------- */

body.buddypress.bp-user .follo-member-identity {
    display: contents;
}

body.buddypress.bp-user .follo-member-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px;

    width: 100%;
}

body.buddypress.bp-user .follo-member-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.buddypress.bp-user .follo-member-name {
    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--follo-text) !important;

    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;

    letter-spacing: -0.02em;
}

body.buddypress.bp-user .follo-member-subline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    color: var(--follo-muted);

    font-size: 13px;
    line-height: 1.4;
}

body.buddypress.bp-user .follo-member-handle {
    color: #666b73;
    font-weight: 500;
}

body.buddypress.bp-user .follo-member-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #31c95b;
}

body.buddypress.bp-user .follo-member-last-active {
    color: #5f646b;
}

body.buddypress.bp-user .follo-member-meta {
    margin-top: 5px !important;
}


/* ---------- Header action area ---------- */

body.buddypress.bp-user .follo-member-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 9px;

    flex: 0 0 auto;
}

body.buddypress.bp-user .follo-member-actions .member-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 !important;
    padding: 0 !important;
}

body.buddypress.bp-user .follo-member-actions .generic-button {
    margin: 0 !important;
}

body.buddypress.bp-user .follo-edit-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;

    padding: 9px 16px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: var(--follo-accent) !important;
    color: #fff !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 650 !important;

    text-decoration: none !important;

    box-shadow: 0 5px 14px rgba(102, 87, 232, .20);

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

body.buddypress.bp-user .follo-edit-profile:hover {
    background: var(--follo-accent-hover) !important;
    color: #fff !important;

    transform: translateY(-1px);

    box-shadow: 0 7px 18px rgba(102, 87, 232, .25);
}

body.buddypress.bp-user .follo-profile-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    min-width: 46px;
    height: 42px;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #e3e5e9 !important;
    border-radius: 9px !important;

    background: #fff !important;
    color: #31343a !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    box-shadow: 0 2px 7px rgba(20, 24, 35, .05) !important;

    cursor: pointer;
}

body.buddypress.bp-user .follo-profile-more:hover {
    background: #f7f7f9 !important;
}


/* =========================================================
   Softer social cards — remove the "boxed form" borders
   ========================================================= */

/* Composer: one clean floating card, no double outline */
body.buddypress.bp-user #whats-new-form {
    border: 0 !important;
    box-shadow: 0 3px 14px rgba(20, 24, 35, .07) !important;
}

body.buddypress.bp-user #whats-new-form .whats-new-form-header,
body.buddypress.bp-user #whats-new-form .whats-new-form-footer,
body.buddypress.bp-user #whats-new-form .activity-form {
    border: 0 !important;
    box-shadow: none !important;
}


/* Filter row: blend it into the page */
.follo-profile-feed .subnav-filters {
    border: 0 !important;
    background: transparent !important;

    padding: 0 2px 4px !important;

    box-shadow: none !important;
}

.follo-profile-feed .subnav-filters select,
.follo-profile-feed .subnav-filters input {
    border: 1px solid #e1e3e7 !important;
    background: #fff !important;
}


/* Individual timeline cards */
body.buddypress.bp-user .activity-list .activity-item {
    border: 0 !important;

    background: #fff !important;

    box-shadow:
        0 3px 14px rgba(20, 24, 35, .065),
        0 1px 2px rgba(20, 24, 35, .03) !important;
}


/* Remove BuddyPress inner outlines that create nested boxes */
body.buddypress.bp-user .activity-list .activity-item .activity-content,
body.buddypress.bp-user .activity-list .activity-item .activity-inner,
body.buddypress.bp-user .activity-list .activity-item .activity-header,
body.buddypress.bp-user .activity-list .activity-item .activity-meta,
body.buddypress.bp-user .activity-list .activity-item .activity-comments,
body.buddypress.bp-user .activity-list .activity-item .activity-comments ul,
body.buddypress.bp-user .activity-list .activity-item .activity-comments li {
    box-shadow: none !important;
}

body.buddypress.bp-user .activity-list .activity-item .activity-inner {
    border: 0 !important;
    background: transparent !important;
}


/*
 * Nouveau sometimes outputs a bordered wrapper around the dynamic
 * activity stream. Flatten that so only the post cards remain.
 */
body.buddypress.bp-user #activity-stream,
body.buddypress.bp-user #activity-stream > ul,
body.buddypress.bp-user .follo-activity-stream {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* Friend/member preview shown inside an activity post */
body.buddypress.bp-user .activity-list .activity-item .activity-inner .bp-member-short-description,
body.buddypress.bp-user .activity-list .activity-item .activity-inner .item-list,
body.buddypress.bp-user .activity-list .activity-item .activity-inner .item-entry,
body.buddypress.bp-user .activity-list .activity-item .activity-inner .list-wrap {
    border: 0 !important;

    background: #f7f8fa !important;

    box-shadow: none !important;

    border-radius: 10px !important;
}


/* Cleaner action strip */
body.buddypress.bp-user .activity-list .activity-meta {
    border-top: 1px solid #eef0f2 !important;
}


/* Sidebar cards stay subtle, not outlined */
.follo-card {
    border: 0 !important;

    box-shadow:
        0 3px 14px rgba(20, 24, 35, .06),
        0 1px 2px rgba(20, 24, 35, .025) !important;
}


/* Slightly warmer page canvas like the mockup */
body.buddypress.bp-user #main-content {
    background: #f5f6f8 !important;
}


/* =========================================================
   Desktop spacing closer to the FOLLO mockup
   ========================================================= */

@media (min-width: 1101px) {
    body.buddypress.bp-user #item-header-cover-image {
        min-height: 116px !important;
    }

    body.buddypress.bp-user .follo-member-content {
        padding-right: 6px;
    }

    body.buddypress.bp-user #item-body,
    body.buddypress.bp-user.activity #item-body {
        padding-top: 20px !important;
    }
}


/* =========================================================
   Mobile header actions
   ========================================================= */

@media (max-width: 768px) {
    body.buddypress.bp-user .follo-member-content {
        display: block !important;
    }

    body.buddypress.bp-user .follo-member-actions {
        justify-content: flex-start;

        margin-top: 10px;
    }

    body.buddypress.bp-user .follo-member-name {
        font-size: 23px !important;
    }
}


/* =========================================================
   FOLLO - REMOVE FINAL NOUVEAU COMPOSER BORDER
   ========================================================= */

body.buddypress.bp-user #bp-nouveau-activity-form,
body.buddypress.bp-user #bp-nouveau-activity-form.activity-update-form,
body.buddypress.bp-user .follo-profile-feed #bp-nouveau-activity-form {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    margin: 0 0 18px !important;
    padding: 0 !important;
}

/* The dynamically injected form should be the only white card */
body.buddypress.bp-user #bp-nouveau-activity-form #whats-new-form {
    margin: 0 !important;
    padding: 18px !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 14px !important;

    background: #fff !important;

    box-shadow: 0 3px 14px rgba(20, 24, 35, 0.06) !important;
}

/* Remove any border inherited from Nouveau's generic form rules */
body.buddypress.bp-user #bp-nouveau-activity-form form,
body.buddypress.bp-user #bp-nouveau-activity-form > div,
body.buddypress.bp-user #bp-nouveau-activity-form #whats-new-content,
body.buddypress.bp-user #bp-nouveau-activity-form #whats-new-textarea {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   FOLLO CUSTOM PROFILE HEADER + PERSONALIZATION UI
   ========================================================= */

body.buddypress.bp-user #header-cover-image {
    position: relative !important;
}

body.buddypress.bp-user .follo-edit-cover {
    position: absolute;
    right: 28px;
    bottom: 22px;
    z-index: 8;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;
    border-radius: 9px;

    background: rgba(255,255,255,.94);
    color: #282b31 !important;

    font-size: 13px;
    font-weight: 650;
    text-decoration: none !important;

    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

body.buddypress.bp-user .follo-edit-cover:hover {
    background: #fff;
}

body.buddypress.bp-user .follo-edit-avatar {
    position: absolute;
    right: 8px;
    bottom: 10px;
    z-index: 9;

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

    width: 34px;
    height: 34px;

    border: 3px solid #fff;
    border-radius: 50%;

    background: var(--follo-accent);
    color: #fff !important;
    text-decoration: none !important;
}

body.buddypress.bp-user .follo-cover-member-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px;
    width: 100%;
}

body.buddypress.bp-user .follo-cover-member-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.buddypress.bp-user .follo-cover-name {
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: var(--follo-text) !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    letter-spacing: -.02em;
}

body.buddypress.bp-user .follo-cover-subline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--follo-muted);
    font-size: 13px;
}

body.buddypress.bp-user .follo-cover-online-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: #31c95b;
}

body.buddypress.bp-user .follo-cover-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

body.buddypress.bp-user .follo-cover-actions .member-header-actions,
body.buddypress.bp-user .follo-cover-actions .generic-button {
    margin: 0 !important;
}

body.buddypress.bp-user .follo-cover-edit-profile {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 9px;
    background: var(--follo-accent);
    color: #fff !important;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none !important;
}

/*
 * Do not render the old Customize Page / Cover Position link in the
 * live member header. This is the clickable element that points to
 * customize-page/#follo-cover-position.
 */
body.buddypress.bp-user a[href*="customize-page/#follo-cover-position"],
body.buddypress.bp-user a[href$="#follo-cover-position"] {
    display: none !important;
}

body.buddypress.bp-user .follo-cover-more {
    width: 46px;
    min-width: 46px;
    height: 42px;
    border: 1px solid #e3e5e9 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #31343a !important;
}

.follo-customizer-panel {
    max-width: 780px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(20,24,35,.07);
}

.follo-customizer-panel h2 {
    margin-top: 0;
}

.follo-customizer-field {
    margin: 22px 0;
}

.follo-customizer-field > label {
    display: block;
    margin-bottom: 9px;
    font-weight: 700;
}

.follo-customizer-field input[type="color"] {
    width: 74px;
    height: 44px;
    padding: 2px;
}

.follo-bg-preview {
    width: 100%;
    min-height: 220px;
    margin: 10px 0 12px;
    border-radius: 12px;
    background-color: #f0f2f5;
    background-size: cover;
    background-position: center;
}

.follo-customizer-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width:768px) {
    body.buddypress.bp-user .follo-edit-cover {
        right: 14px;
        bottom: 14px;
    }

    body.buddypress.bp-user .follo-cover-member-content {
        display: block !important;
    }

    body.buddypress.bp-user .follo-cover-actions {
        justify-content: flex-start;
        margin-top: 10px;
    }

    body.buddypress.bp-user .follo-cover-name {
        font-size: 23px !important;
    }
}


/* FOLLO Profile Customizer v0.3 additions */

.follo-cover-preview {
    width: 100%;
    height: 260px;
    margin: 12px 0;
    border-radius: 12px;
    background-color: #dfe3e9;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.follo-cover-replace-link {
    margin-top: 12px;
    font-size: 13px;
}

.follo-cover-replace-link a {
    color: var(--follo-accent);
    font-weight: 650;
}

.follo-customizer-help {
    margin: 4px 0 10px;
    color: #747a83;
    font-size: 13px;
}

.follo-range-row {
    display: grid;
    grid-template-columns: auto minmax(180px,1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.follo-range-row input[type="range"] {
    width: 100%;
}

.follo-range-row output {
    min-width: 46px;
    text-align: right;
    font-weight: 700;
    color: var(--follo-accent);
}

@media (max-width:640px) {
    .follo-range-row {
        grid-template-columns: 1fr auto;
    }
    .follo-range-row > span {
        display:none;
    }
}


/* FOLLO Profile Customizer v0.4 - exact cover-position preview */

.follo-cover-preview {
    width: 100%;

    /*
     * JS replaces this with the exact aspect ratio of the
     * live BuddyPress header. This fallback is close to the
     * desktop FOLLO cover ratio.
     */
    aspect-ratio: 5.8 / 1;
    height: auto !important;
    min-height: 120px;

    margin: 12px 0;
    border-radius: 12px;

    background-color: #dfe3e9;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
}

.follo-range-row input[type="range"] {
    accent-color: var(--follo-accent);
    cursor: ew-resize;
}


/* FOLLO Profile Customizer v0.5 - Save confirmation + cancel UX */

.follo-customizer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.follo-hidden-submit {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
}

.follo-cancel-button {
    text-decoration: none !important;
}

.follo-confirm-modal[hidden] {
    display: none !important;
}

.follo-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.follo-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 35, .42);
    backdrop-filter: blur(2px);
}

.follo-confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(20, 24, 35, .24);
}

.follo-confirm-dialog h3 {
    margin: 0 0 10px;
    color: #18191a;
    font-size: 22px;
    line-height: 1.25;
}

.follo-confirm-dialog p {
    margin: 0;
    color: #646a73;
    line-height: 1.6;
}

.follo-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

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

@media (max-width: 540px) {
    .follo-confirm-actions {
        flex-direction: column-reverse;
    }

    .follo-confirm-actions .button {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
   FOLLO v0.6 - Glossy Customizer Buttons
   ========================================================= */

.follo-customizer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

/* Shared button foundation */
.follo-customizer-actions .button,
.follo-confirm-actions .button {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px !important;

    border: 0 !important;
    border-radius: 12px !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .01em;

    text-decoration: none !important;
    cursor: pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease,
        background .16s ease;
}

/* Save Changes — glossy accent button */
.follo-customizer-actions .button-primary,
.follo-confirm-actions .button-primary {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.28) 0%,
            rgba(255,255,255,.10) 38%,
            rgba(0,0,0,.06) 100%
        ),
        var(--follo-accent) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 8px 20px rgba(40, 48, 80, .18),
        0 2px 5px rgba(40, 48, 80, .12) !important;

    text-shadow: 0 1px 1px rgba(0,0,0,.16);
}

.follo-customizer-actions .button-primary:hover,
.follo-confirm-actions .button-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.48),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 11px 26px rgba(40, 48, 80, .22),
        0 3px 8px rgba(40, 48, 80, .14) !important;
}

.follo-customizer-actions .button-primary:active,
.follo-confirm-actions .button-primary:active {
    transform: translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.14),
        0 4px 10px rgba(40, 48, 80, .14) !important;
}

/* Cancel — soft glossy secondary button */
.follo-customizer-actions .follo-cancel-button,
.follo-confirm-actions .button:not(.button-primary) {
    color: #3f444c !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8fa 52%,
            #eceef2 100%
        ) !important;

    border: 1px solid #dfe3e8 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 5px 14px rgba(30, 36, 50, .08),
        0 1px 3px rgba(30, 36, 50, .06) !important;
}

.follo-customizer-actions .follo-cancel-button:hover,
.follo-confirm-actions .button:not(.button-primary):hover {
    color: #24282e !important;
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbfc 45%,
            #f0f2f5 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 8px 18px rgba(30, 36, 50, .10),
        0 2px 5px rgba(30, 36, 50, .07) !important;
}

/* Keyboard focus */
.follo-customizer-actions .button:focus-visible,
.follo-confirm-actions .button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--follo-accent) 28%, transparent) !important;
    outline-offset: 3px !important;
}

/* Modal buttons should feel balanced */
.follo-confirm-actions {
    gap: 12px;
}

.follo-confirm-actions .button {
    min-width: 120px;
}

/* Mobile */
@media (max-width: 540px) {
    .follo-customizer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .follo-customizer-actions .button {
        width: 100%;
    }
}


/* =========================================================
   FOLLO v0.7 - Global Premium Button System
   Applies across BuddyPress member/social pages
   ========================================================= */

body.buddypress.bp-user {
    --follo-btn-radius: 12px;
    --follo-btn-height: 42px;
    --follo-btn-font: 13px;
    --follo-btn-shadow:
        0 7px 18px rgba(34, 40, 58, .12),
        0 2px 5px rgba(34, 40, 58, .08);
}

/* ---------------------------------------------------------
   Shared button base
   --------------------------------------------------------- */

body.buddypress.bp-user button,
body.buddypress.bp-user input[type="button"],
body.buddypress.bp-user input[type="submit"],
body.buddypress.bp-user input[type="reset"],
body.buddypress.bp-user .button,
body.buddypress.bp-user a.button,
body.buddypress.bp-user .generic-button a,
body.buddypress.bp-user .member-header-actions a,
body.buddypress.bp-user .activity-meta a,
body.buddypress.bp-user .activity-meta button,
body.buddypress.bp-user .bp-submit-button,
body.buddypress.bp-user .bp-button,
body.buddypress.bp-user .follo-edit-avatar,
body.buddypress.bp-user .follo-cover-edit-profile,
body.buddypress.bp-user .follo-cover-more,
body.buddypress.bp-user .follo-profile-more,
body.buddypress.bp-user .follo-edit-profile {
    position: relative;
    box-sizing: border-box;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: var(--follo-btn-height);

    padding: 9px 16px !important;

    border-radius: var(--follo-btn-radius) !important;

    font-size: var(--follo-btn-font) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: .01em;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}


/* ---------------------------------------------------------
   PRIMARY / ACCENT BUTTONS
   --------------------------------------------------------- */

body.buddypress.bp-user input[type="submit"],
body.buddypress.bp-user .button-primary,
body.buddypress.bp-user .bp-submit-button,
body.buddypress.bp-user .follo-cover-edit-profile,
body.buddypress.bp-user .follo-edit-profile,
body.buddypress.bp-user .member-header-actions .primary,
body.buddypress.bp-user .generic-button .accept,
body.buddypress.bp-user .generic-button .friendship-button,
body.buddypress.bp-user .generic-button .message-button {
    color: #fff !important;

    border: 1px solid color-mix(in srgb, var(--follo-accent) 78%, #000 22%) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.11) 38%,
            rgba(0,0,0,.06) 100%
        ),
        var(--follo-accent) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.44),
        inset 0 -1px 0 rgba(0,0,0,.10),
        var(--follo-btn-shadow) !important;

    text-shadow: 0 1px 1px rgba(0,0,0,.17);
}


/* ---------------------------------------------------------
   SECONDARY / LIGHT BUTTONS
   --------------------------------------------------------- */

body.buddypress.bp-user .button:not(.button-primary),
body.buddypress.bp-user a.button:not(.button-primary),
body.buddypress.bp-user .follo-edit-cover,
body.buddypress.bp-user .follo-cover-more,
body.buddypress.bp-user .follo-profile-more,
body.buddypress.bp-user .activity-meta a,
body.buddypress.bp-user .activity-meta button,
body.buddypress.bp-user .generic-button a:not(.friendship-button):not(.message-button):not(.accept) {
    color: #343840 !important;

    border: 1px solid #dfe3e8 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbfc 43%,
            #eef1f5 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 5px 14px rgba(30,36,50,.08),
        0 1px 3px rgba(30,36,50,.06) !important;
}


/* ---------------------------------------------------------
   SMALL ICON BUTTONS
   --------------------------------------------------------- */

body.buddypress.bp-user .follo-cover-more,
body.buddypress.bp-user .follo-profile-more,
body.buddypress.bp-user .follo-edit-avatar {
    width: 44px !important;
    min-width: 44px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Avatar edit button = accent orb */
body.buddypress.bp-user .follo-edit-avatar {
    min-height: 34px !important;
    height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;

    border: 3px solid #fff !important;

    border-radius: 50% !important;

    color: #fff !important;

    background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.05)),
        var(--follo-accent) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 5px 12px rgba(30,36,50,.16) !important;
}


/* ---------------------------------------------------------
   ACTIVITY ACTIONS — pill-style social controls
   --------------------------------------------------------- */

body.buddypress.bp-user .activity-list .activity-meta {
    gap: 8px !important;
}

body.buddypress.bp-user .activity-list .activity-meta a,
body.buddypress.bp-user .activity-list .activity-meta button {
    min-height: 38px !important;

    padding: 8px 13px !important;

    border-radius: 10px !important;

    color: #5d626a !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9fb 55%,
            #f0f2f5 100%
        ) !important;

    border: 1px solid #e4e7eb !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 2px 6px rgba(30,36,50,.05) !important;
}


/* ---------------------------------------------------------
   HOVER STATES
   --------------------------------------------------------- */

body.buddypress.bp-user button:hover,
body.buddypress.bp-user input[type="button"]:hover,
body.buddypress.bp-user input[type="submit"]:hover,
body.buddypress.bp-user .button:hover,
body.buddypress.bp-user a.button:hover,
body.buddypress.bp-user .generic-button a:hover,
body.buddypress.bp-user .member-header-actions a:hover,
body.buddypress.bp-user .follo-edit-cover:hover,
body.buddypress.bp-user .follo-cover-edit-profile:hover,
body.buddypress.bp-user .follo-cover-more:hover,
body.buddypress.bp-user .follo-profile-more:hover,
body.buddypress.bp-user .follo-edit-profile:hover {
    transform: translateY(-1px);
    filter: brightness(1.035);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 10px 24px rgba(30,36,50,.14),
        0 3px 8px rgba(30,36,50,.10) !important;
}


/* Activity hover = accent tint */
body.buddypress.bp-user .activity-list .activity-meta a:hover,
body.buddypress.bp-user .activity-list .activity-meta button:hover {
    color: var(--follo-accent) !important;

    border-color: color-mix(in srgb, var(--follo-accent) 22%, #e4e7eb 78%) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            color-mix(in srgb, var(--follo-accent) 7%, #ffffff 93%) 100%
        ) !important;
}


/* ---------------------------------------------------------
   ACTIVE / PRESSED
   --------------------------------------------------------- */

body.buddypress.bp-user button:active,
body.buddypress.bp-user input[type="button"]:active,
body.buddypress.bp-user input[type="submit"]:active,
body.buddypress.bp-user .button:active,
body.buddypress.bp-user a.button:active,
body.buddypress.bp-user .generic-button a:active {
    transform: translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.12),
        0 3px 8px rgba(30,36,50,.09) !important;
}


/* ---------------------------------------------------------
   FOCUS / ACCESSIBILITY
   --------------------------------------------------------- */

body.buddypress.bp-user button:focus-visible,
body.buddypress.bp-user input[type="button"]:focus-visible,
body.buddypress.bp-user input[type="submit"]:focus-visible,
body.buddypress.bp-user .button:focus-visible,
body.buddypress.bp-user a.button:focus-visible,
body.buddypress.bp-user .generic-button a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--follo-accent) 30%, transparent) !important;
    outline-offset: 3px !important;
}


/* ---------------------------------------------------------
   DISABLED
   --------------------------------------------------------- */

body.buddypress.bp-user button:disabled,
body.buddypress.bp-user input:disabled,
body.buddypress.bp-user .button.disabled,
body.buddypress.bp-user .button[aria-disabled="true"] {
    opacity: .52 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: grayscale(.1);
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {
    body.buddypress.bp-user {
        --follo-btn-height: 40px;
        --follo-btn-font: 12px;
    }

    body.buddypress.bp-user .follo-cover-actions {
        gap: 7px !important;
    }

    body.buddypress.bp-user .activity-list .activity-meta {
        gap: 6px !important;
    }

    body.buddypress.bp-user .activity-list .activity-meta a,
    body.buddypress.bp-user .activity-list .activity-meta button {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

/* =========================================================
   FOLLO - HIDE WORDPRESS ADMIN BAR SEARCH ONLY
   Keep Howdy/user account menu
   ========================================================= */

#wpadminbar #wp-admin-bar-search,
#wpadminbar .quicklinks li#wp-admin-bar-search,
#wpadminbar .admin-bar-search,
#wpadminbar #adminbarsearch {
    display: none !important;
}


/* =========================================================
   FOLLO — COVER IMAGE DELETE BUTTON SPACING
   ========================================================= */

body.buddypress.bp-user
#buddypress
#item-body
.bp-cover-image-status
button,
body.buddypress.bp-user
#buddypress
#item-body
#bp-delete-cover-image {
    margin-top: 12px !important;
}

/* =========================================================
   FOLLO v1.0.1 - HARD AVATAR SHAPE OVERRIDE
   Keep this block LAST in the stylesheet.
   ========================================================= */

/* Main BuddyPress profile avatar */
body.buddypress.bp-user #buddypress #item-header-avatar,
body.buddypress.bp-user .buddypress-wrap #item-header-avatar,
body.buddypress.bp-user #item-header-cover-image #item-header-avatar {
    border-radius: 18px !important;
    overflow: visible !important;
    clip-path: none !important;
}

body.buddypress.bp-user #buddypress #item-header-avatar a,
body.buddypress.bp-user .buddypress-wrap #item-header-avatar a,
body.buddypress.bp-user #item-header-cover-image #item-header-avatar a {
    border-radius: 18px !important;
    overflow: visible !important;
    clip-path: none !important;
}

body.buddypress.bp-user #buddypress #item-header-avatar img,
body.buddypress.bp-user #buddypress #item-header-avatar img.avatar,
body.buddypress.bp-user .buddypress-wrap #item-header-avatar img,
body.buddypress.bp-user .buddypress-wrap #item-header-avatar img.avatar,
body.buddypress.bp-user #item-header-cover-image #item-header-avatar img,
body.buddypress.bp-user #item-header-cover-image #item-header-avatar img.avatar,
body.buddypress.bp-user img.avatar.avatar-150,
body.buddypress.bp-user img.avatar.avatar-170,
body.buddypress.bp-user img.avatar.avatar-176 {
    border: 6px solid #fff !important;
    border-radius: 18px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: hidden !important;
    object-fit: cover !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18),
        0 2px 7px rgba(0, 0, 0, .08) !important;
}

/* Smaller BuddyPress avatars */
body.buddypress.bp-user #whats-new-avatar img.avatar,
body.buddypress.bp-user .activity-avatar img.avatar,
body.buddypress.bp-user .item-avatar img.avatar,
body.buddypress.bp-user .follo-friend img.avatar {
    border-radius: 10px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    object-fit: cover !important;
}

/* Mobile keeps the same shape, only the border gets lighter */
@media (max-width: 768px) {
    body.buddypress.bp-user #buddypress #item-header-avatar img,
    body.buddypress.bp-user #buddypress #item-header-avatar img.avatar,
    body.buddypress.bp-user .buddypress-wrap #item-header-avatar img,
    body.buddypress.bp-user .buddypress-wrap #item-header-avatar img.avatar {
        border-width: 4px !important;
        border-radius: 14px !important;
    }
}

/* =========================================================
   FOLLO v1.0.2 - TIMELINE AVATARS: ROUNDED SQUARE
   ========================================================= */

/* Activity/timeline post author avatars */
body.buddypress.bp-user #buddypress .activity-list .activity-item .activity-avatar,
body.buddypress.bp-user #buddypress .activity-list .activity-item .activity-avatar a {
    border-radius: 10px !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

body.buddypress.bp-user #buddypress .activity-list .activity-item .activity-avatar img,
body.buddypress.bp-user #buddypress .activity-list .activity-item .activity-avatar img.avatar,
body.buddypress.bp-user .buddypress-wrap .activity-list .activity-avatar img.avatar,
body.buddypress.bp-user #activity-stream .activity-avatar img.avatar {
    border-radius: 10px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: hidden !important;
    object-fit: cover !important;
}

/* Timeline comment/reply avatars */
body.buddypress.bp-user #buddypress .activity-comments .acomment-avatar,
body.buddypress.bp-user #buddypress .activity-comments .acomment-avatar a,
body.buddypress.bp-user #buddypress .activity-comments .acomment-avatar img,
body.buddypress.bp-user #buddypress .activity-comments .acomment-avatar img.avatar {
    border-radius: 8px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* =========================================================
   FOLLO v1.0.2 — UNIFIED PROFILE CONTENT ALIGNMENT
   One shared content shell for navigation, sidebar and feed.
   Keep this block LAST so older width rules cannot override it.
   ========================================================= */

/*
 * IMPORTANT:
 * The old stylesheet used different maximum widths for the profile nav
 * (--follo-header-content) and the page body (--follo-content). It also
 * used content-box sizing, so horizontal padding made the rendered widths
 * larger than the declared widths. This block gives every profile section
 * the same outer width and the same 18px inner gutter.
 */
body.buddypress.bp-user #item-header-cover-image,
body.buddypress.bp-user #object-nav ul,
body.buddypress.bp-user #item-body,
body.buddypress.bp-user.activity #item-body {
    width: min(var(--follo-content), calc(100% - 48px)) !important;
    max-width: var(--follo-content) !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Identical left/right gutters across the identity row, nav and content. */
body.buddypress.bp-user #item-header-cover-image,
body.buddypress.bp-user #object-nav ul {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

body.buddypress.bp-user #item-body,
body.buddypress.bp-user.activity #item-body {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/*
 * Align the visible word “Activity” with the exact left edge of the
 * sidebar cards below it while preserving a comfortable click target.
 */
body.buddypress.bp-user #object-nav ul > li:first-child > a {
    padding-left: 0 !important;
    padding-right: 16px !important;
}

body.buddypress.bp-user #object-nav ul > li:first-child.current > a:after,
body.buddypress.bp-user #object-nav ul > li:first-child.selected > a:after {
    left: 0 !important;
    right: 12px !important;
}

/* Ensure the two-column layout itself consumes the entire aligned shell. */
body.buddypress.bp-user .follo-profile-layout {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.buddypress.bp-user .follo-profile-sidebar,
body.buddypress.bp-user .follo-profile-feed {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Cards/feed wrappers must not introduce their own horizontal offsets. */
body.buddypress.bp-user .follo-profile-sidebar > *,
body.buddypress.bp-user .follo-profile-feed > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablet/mobile: use the same symmetric outer inset everywhere. */
@media (max-width: 1100px) {
    body.buddypress.bp-user #item-header-cover-image,
    body.buddypress.bp-user #object-nav ul,
    body.buddypress.bp-user #item-body,
    body.buddypress.bp-user.activity #item-body {
        width: calc(100% - 30px) !important;
    }
}

@media (max-width: 768px) {
    body.buddypress.bp-user #item-header-cover-image,
    body.buddypress.bp-user #item-body,
    body.buddypress.bp-user.activity #item-body {
        width: calc(100% - 24px) !important;
    }

    body.buddypress.bp-user #object-nav ul {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.buddypress.bp-user #object-nav ul > li:first-child > a {
        padding-left: 0 !important;
    }
}


/* FOLLO account dropdown: canonical email + easy profile editing */
#wpadminbar #wp-admin-bar-user-info .follo-account-email {
    display: block;
    margin-top: 2px;
    color: #aeb7bd;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
}

#wpadminbar #wp-admin-bar-follo-edit-profile > .ab-item {
    color: #d7dde1 !important;
}

#wpadminbar #wp-admin-bar-follo-edit-profile > .ab-item:hover,
#wpadminbar #wp-admin-bar-follo-edit-profile.hover > .ab-item {
    color: #fff !important;
}

/* =========================================================
   FOLLO account dropdown — compact identity/actions block
   Keeps name, email, Edit Profile and Log Out visually grouped.
========================================================= */
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-info {
    margin: 0 !important;
    padding-bottom: 4px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-actions > li {
    margin: 0 !important;
    padding: 0 !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-actions > li > .ab-item {
    min-height: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Put the most useful account action first. */
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile {
    order: 1 !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout {
    order: 2 !important;
}

/* Keep the identity text compact as a single visual group. */
#wpadminbar #wp-admin-bar-user-info .display-name {
    margin-bottom: 1px !important;
    line-height: 1.25 !important;
}

#wpadminbar #wp-admin-bar-user-info .follo-account-email {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
}

/* =========================================================
   FOLLO account dropdown — spacing fix v2
   Normalize the WordPress account submenu and keep identity/actions compact.
========================================================= */
#wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper > #wp-admin-bar-user-actions {
    display: block !important;
    margin: 0 !important;
    padding: 8px 0 6px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-info {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 68px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-info > .ab-item {
    min-height: 68px !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout {
    display: block !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item {
    display: block !important;
    box-sizing: border-box !important;
    min-height: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
    padding: 0 14px 0 74px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile + #wp-admin-bar-logout,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout + #wp-admin-bar-follo-edit-profile {
    margin-top: 0 !important;
}

#wpadminbar #wp-admin-bar-user-info .display-name,
#wpadminbar #wp-admin-bar-user-info .follo-account-email {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 18px !important;
}

/* =========================================================
   FOLLO account dropdown — modern action menu rows
   Edit Profile + Log Out use the same compact visual language
   as the BuddyPress menu instead of floating text links.
========================================================= */
#wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper > #wp-admin-bar-user-actions {
    box-sizing: border-box !important;
    padding: 8px 12px 12px !important;
}

/* Keep avatar / identity compact above the action buttons. */
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-info {
    min-height: 62px !important;
    padding: 0 !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-info > .ab-item {
    box-sizing: border-box !important;
    min-height: 62px !important;
    padding: 6px 10px 6px 74px !important;
}

#wpadminbar #wp-admin-bar-user-info .display-name {
    margin: 0 0 1px !important;
    color: #e5e9ec !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

#wpadminbar #wp-admin-bar-user-info .follo-account-email {
    margin: 0 !important;
    color: #aeb7bd !important;
    font-size: 11px !important;
    line-height: 17px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile {
    margin-top: 6px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout {
    margin-top: 5px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,0.035) !important;
    color: #eef2f4 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item:hover,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item:focus,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item:hover,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item:focus {
    background: rgba(255,255,255,0.085) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

#wpadminbar .follo-account-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    color: #f3f6f7 !important;
}

#wpadminbar .follo-account-action-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

#wpadminbar .follo-account-action-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: inherit !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

#wpadminbar .follo-account-action-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    color: #9ea9af !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item:hover .follo-account-action-chevron,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item:hover .follo-account-action-chevron {
    color: #fff !important;
}

/* Give the FOLLO ID card a deliberate break from the account controls. */
#wpadminbar #follo-member-card {
    margin-top: 2px !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    padding-top: 12px !important;
}

/* =========================================================
   FOLLO ACCOUNT DROPDOWN — ROBUST ACTION MENU (v2)
   Uses CSS-drawn/text icons instead of inline SVG so Divi/
   admin-bar icon rules cannot enlarge or distort them.
========================================================= */
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-actions {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 10px 10px !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout {
    position: static !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) 16px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.035) !important;
    color: #eef2f4 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item:hover,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item:focus,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item:hover,
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item:focus {
    background: rgba(255,255,255,.085) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
}

#wpadminbar .follo-account-action-icon {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    overflow: hidden !important;
}

#wpadminbar .follo-account-action-icon::before {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 28px !important;
}

#wpadminbar .follo-account-action-icon-profile::before {
    content: "✎" !important;
    font-size: 16px !important;
}

#wpadminbar .follo-account-action-icon-logout::before {
    content: "↪" !important;
    font-size: 18px !important;
}

/* Never allow legacy SVG/icon content to render in these controls. */
#wpadminbar .follo-account-action-icon svg,
#wpadminbar .follo-account-action-icon img,
#wpadminbar .follo-account-action-icon::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#wpadminbar .follo-account-action-label {
    position: static !important;
    float: none !important;
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

#wpadminbar .follo-account-action-chevron {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #aeb7bd !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    transform: none !important;
}

/* Keep identity information compact above the controls. */
#wpadminbar #wp-admin-bar-user-info > .ab-item {
    min-height: 74px !important;
    padding-bottom: 6px !important;
}

#wpadminbar #wp-admin-bar-user-info .display-name {
    margin-bottom: 2px !important;
}

#wpadminbar #wp-admin-bar-user-info .follo-account-email {
    margin-top: 0 !important;
}

/* Deliberate separator before barcode/QR identity card. */
#wpadminbar #follo-member-card {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* =========================================================
   FOLLO front-end account dropdown — comfortable width
   Prevent the logged-in homepage account menu from feeling
   compressed while leaving wp-admin sizing alone.
========================================================= */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-actions {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 10px 12px 14px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-user-info > .ab-item {
    min-height: 78px !important;
    padding: 10px 14px 8px 88px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info img.avatar {
    width: 60px !important;
    height: 60px !important;
    left: 14px !important;
    top: 9px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .display-name {
    font-size: 14px !important;
    line-height: 20px !important;
    margin: 0 0 3px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .follo-account-email {
    font-size: 12px !important;
    line-height: 18px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout {
    margin-top: 7px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile > .ab-item,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-logout > .ab-item {
    grid-template-columns: 32px minmax(0, 1fr) 18px !important;
    column-gap: 11px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

body:not(.wp-admin) #wpadminbar .follo-account-action-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
}

body:not(.wp-admin) #wpadminbar .follo-account-action-label {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

body:not(.wp-admin) #wpadminbar #follo-member-card {
    margin: 8px 12px 0 !important;
    padding-top: 14px !important;
}

@media screen and (max-width: 782px) {
    body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper {
        width: min(320px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* =========================================================
   FOLLO account actions — subtle separation
   Keep Edit Profile and Log Out visually grouped while
   preventing their borders from touching.
========================================================= */
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-follo-edit-profile + #wp-admin-bar-logout {
    margin-top: 5px !important;
}