.elementor-kit-322{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-322 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* TARGET ALL BUTTONS (Connect, Message, Edit, Settings) */
a.bwmf-connect-btn,
a.bwmf-smart-btn-link,
a.friendship-button,
.friendship-button a,
.bwmf-owner-only a { /* This targets the Edit buttons too */

    /* --- WIDTH SETTINGS --- */
    /* Change this to 100% to fill the column, or a fixed pixel size like 140px */
    width: 170px !important; 
    display: block !important;
    
    /* --- HEIGHT SETTINGS --- */
    /* Change these top/bottom numbers to make it taller or shorter */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    
    /* --- STYLE --- */
    background: #f0f2f5 !important;
    color: #050505 !important;
    border: none !important;
    border-radius: 99px !important; /* Corner roundness */
    
    /* --- TEXT --- */
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    
    /* --- RESET --- */
    text-decoration: none !important;
    box-shadow: none !important;
    margin: 0 !important; 
}






/* --- BWMF BUTTONS: HYBRID STYLE --- */

/* 1. Base Button Layout (Shape & Size) */
span.bwmf-btn,
a.bwmf-btn {
    /* Layout & Shape */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    box-sizing: border-box !important;
    
    /* Sizing */
    min-width: 80px !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    
    /* Animation */
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* 2. "JOIN" STATE (Outline Style) */
/* Transparent Background + Blue Border */
span.bwmf-btn,
span.bwmf-btn.join {
    background-color: transparent !important;
    border: 1.5px solid #007AFF !important;
    color: #007AFF !important;
}

/* Join Hover: Fills Blue */
span.bwmf-btn.join:hover {
    background-color: #007AFF !important;
    color: #ffffff !important;
}

/* 3. "CHAT" / "JOINED" STATE (Filled Light Blue) */
/* Light Blue Background + No Border */
span.bwmf-btn.joined {
    background-color: #e7f3ff !important;  /* Light Blue */
    border: 1.5px solid transparent !important; /* Invisible border to match size */
    color: #007AFF !important;             /* Blue Text */
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Chat Hover: Slightly Darker Light Blue */
span.bwmf-btn.joined:hover {
    background-color: #dbe7f2 !important;
    color: #0056b3 !important;
}

/* 4. "REQUESTED" STATE (Optional - Grey) */
span.bwmf-btn.request {
    border-color: #ccc !important;
    color: #888 !important;
    background-color: transparent !important;
}



/* --- ANTI-GLITCH: HIDE MENU INITIALLY --- */

/* 1. Hide the menu immediately */
ul.subnav {
    opacity: 0 !important; /* Invisible */
    visibility: hidden !important; /* Takes up space but can't be seen */
    transition: opacity 0.2s ease !important;
}

/* 2. The script will add this class when it's fixed */
ul.subnav.bwmf-fixed {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Pre-load the styling so it has the right shape even while hidden */
ul.subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
}

ul.subnav li.bp-personal-sub-tab {
    flex: 1 !important; /* Grow to 50% width */
    text-align: center !important;
    display: block !important;
}

ul.subnav li.bp-personal-sub-tab a {
    border-radius: 50px !important;
    background: #F0F2F5 !important;
    color: #65676B !important;
    font-weight: 600 !important;
    padding: 8px 0 !important;
    border: none !important;
    font-size: 13px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

/* Active State */
ul.subnav li.bp-personal-sub-tab.current a,
ul.subnav li.bp-personal-sub-tab.selected a {
    background: #007AFF !important;
    color: #fff !important;
}



/* --- BWMF SUGGESTED FRIENDS SLIDER --- */

/* 1. The Container (Horizontal Scroll) */
.fb-near-me-wrapper {
    width: 100%;
    overflow: hidden; /* Hide scrollbar overflow */
    margin-bottom: 20px;
    background: transparent;
}

.fb-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 5px 0 15px 0; /* Bottom padding for shadow */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE */
}

/* Hide scrollbar for Chrome/Safari */
.fb-scroll-container::-webkit-scrollbar {
    display: none;
}

/* 2. The Card (Individual User) */
.fb-card {
    flex: 0 0 140px; /* Fixed width for each card */
    width: 140px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.fb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 3. The Avatar Image (Top half) */
.fb-card-image {
    height: 140px; /* Square aspect ratio */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

/* 4. Content (Bottom half) */
.fb-card-content {
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* 5. Typography */
.fb-name {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 2px;
}

.fb-location {
    font-size: 11px;
    color: #65676B;
    display: block;
    margin-bottom: 8px;
}

/* 6. The "Add Friend" Button */
.fb-actions .friendship-button a {
    display: block;
    width: 100%;
    padding: 6px 0;
    background: #e7f3ff; /* Light Blue */
    color: #007AFF;      /* Blue Text */
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    text-align: center;
}

.fb-actions .friendship-button a:hover {
    background: #dbe7f2;
}

/* Remove default BuddyPress margins */
.fb-actions .generic-button {
    margin: 0;
}






/* --- BWMF GROUPS DIRECTORY: ULTIMATE SPECIFICITY FIX --- */

/* 0. Target the main list container */
#buddypress #groups-dir-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important; /* Set to transparent */
}

/* 1. Target the List Item (The Card Container) */
#buddypress .bb-grid #primary #groups-dir-list li.group-list-item {
    /* Layout and Appearance */
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    
    /* Display Logic */
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    
    /* Reset default list styles */
    list-style: none !important;
    margin-left: 0 !important;
    width: 100% !important; 
}

/* Add hover effect */
#buddypress .bb-grid #primary #groups-dir-list li.group-list-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* 2. Content Area Layout (Text/Avatars) */
#buddypress .bb-grid #primary #groups-dir-list .item-block {
    display: flex !important;
    flex-grow: 1 !important;
    align-items: center !important;
    min-width: 0 !important;
}

/* 3. Avatar Styling */
#buddypress .bb-grid #primary #groups-dir-list .item-block .item-avatar {
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

#buddypress .bb-grid #primary #groups-dir-list .item-block .item-avatar img {
    border-radius: 8px !important;
    width: 60px !important;
    height: 60px !important;
}

/* 4. Name and Metadata Typography */
#buddypress .bb-grid #primary #groups-dir-list .item-block .item {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#buddypress .bb-grid #primary #groups-dir-list .item-block h2.item-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 5px 0 !important;
}

/* Metadata Text Line (Public, Active time ago, etc.) */
#buddypress .bb-grid #primary #groups-dir-list .item-block .item-meta {
    font-size: 12px !important;
    color: #888 !important;
    margin: 0 !important;
}

/* 5. Action Button Area (Right Side) */
#buddypress .bb-grid #primary #groups-dir-list .action {
    flex-shrink: 0 !important;
    margin-left: 15px !important;
}

/* Style the Join/View Button prominently */
#buddypress .bb-grid #primary #groups-dir-list .action .group-button a {
    background: #007AFF !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 8px 15px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 13px !important;
    text-transform: none !important;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3) !important;
    line-height: normal !important;
    height: auto !important;
}

#buddypress .bb-grid #primary #groups-dir-list .action .group-button a:hover {
    background: #0056b3 !important;
}

/* Style the default "Member" status label */
#buddypress .bb-grid #primary #groups-dir-list .action .is-member,
#buddypress .bb-grid #primary #groups-dir-list .action .pending-member {
    padding: 8px 15px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #e6f7e6 !important;
    color: #38761d !important;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    #buddypress .bb-grid #primary #groups-dir-list .item-block {
        align-items: flex-start !important;
    }
}




/* --- BWMF MOBILE FOOTER BAR STYLING (App-Like Layout) --- */

/* 1. Target the Main Container and enforce fixed position */
.bwmf-profile-footer-wrapper .elementor-element-4b154a6 {
    /* Critical Fixes for Footer */
    position: fixed !important; 
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999999 !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    margin-bottom: 0 !important;
    
    /* Layout Reset */
    padding: 0 10px !important; /* Small padding on edges */
    height: 60px !important; /* Set a fixed height */
}

/* 2. Target the Inner Content (The 5 Flex Columns) */
.bwmf-profile-footer-wrapper .elementor-element-4b154a6 > .e-con-full {
    display: flex !important;
    justify-content: space-around !important; /* Distributes space evenly */
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important; /* Remove container padding */
}

/* 3. Target Individual Icon Columns (e-con-full e-flex e-con e-child) */
/* Force each column to take equal space */
.bwmf-profile-footer-wrapper .elementor-element-4b154a6 .e-con-full.e-flex.e-con.e-child {
    flex-grow: 1 !important;
    flex-basis: 0 !important; /* Allows them to divide space equally */
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. Icon Styling (Remove extra spacing/shadows) */
.bwmf-profile-footer-wrapper .elementor-widget-icon .elementor-icon-wrapper {
    line-height: 1 !important;
}

/* Ensure icons themselves are centered within their column */
.bwmf-profile-footer-wrapper .elementor-widget-icon .elementor-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Ensure only one icon is styled for size, use default BuddyBoss icon size */
    font-size: 28px !important; 
    height: 40px;
    width: 40px;
}

/* 5. Profile Photo Styling (Last Element) */
.bwmf-footer-avatar {
    width: 32px !important; 
    height: 32px !important;
    border-radius: 50% !important; /* Perfect Circle */
    border: 1px solid #eee; /* Subtle border */
    object-fit: cover;
    display: block;
    margin: 0 auto; /* Center the image in its column */
}

/* 6. Active Link Color (Blue) */
/* Use the same blue we used for the connections page */
.bwmf-profile-footer-wrapper .elementor-element-79ef58f a.elementor-icon, /* Connections icon */
.bwmf-profile-footer-wrapper .elementor-element-7059165 a.elementor-icon,
.bwmf-profile-footer-wrapper .elementor-element-e937c6d a.elementor-icon, /* Chat icon */
.bwmf-profile-footer-wrapper .elementor-element-0dce8df a.elementor-icon {
    /* Default color (Black) */
    color: #000 !important; 
}

/* Highlight the currently active icon (Groups Page icon is black in your image) */
/* We will assume the second icon is the Groups page (as per Elementor structure) */
/* If the current page icon should be blue, uncomment the rule below and adjust the .elementor-kit-322 if needed: */
/*
.bwmf-profile-footer-wrapper .elementor-element-cf44ce4 i,
.bwmf-profile-footer-wrapper .elementor-element-d28673b i {
    color: #007AFF !important; 
}
*/




/* --- BWMF MASTER STYLING --- */

/* 1. Spacing Fixes */
.bwmf-custom-search-wrapper { margin-bottom: 5px !important; }
.fb-near-me-wrapper { margin-top: 5px !important; margin-bottom: 15px !important; }
#subnav.user-subnav { margin-top: 0 !important; }

/* 2. Card Layout */
.fb-scroll-container { display: flex; overflow-x: auto; gap: 10px; padding: 2px 2px 10px 2px; scrollbar-width: none; }
.fb-scroll-container::-webkit-scrollbar { display: none; }

.fb-card {
    flex: 0 0 130px; 
    width: 130px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.fb-card-image { height: 130px; width: 100%; background-size: cover; background-position: center; }

.fb-card-content {
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.fb-name {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* 3. Info Block (The Text Lines) */
.fb-info-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px; /* Space between lines */
    margin-bottom: 8px;
    min-height: 34px; /* Force consistent height */
}

.fb-line {
    font-size: 10px !important;
    color: #666;
    display: flex;
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Horizontally center everything */
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.fb-line.blue { color: #007AFF; font-weight: 500; }

.fb-icon {
    font-size: 11px;
    margin-right: 4px; /* Tiny space between icon and text */
    line-height: 1;
}

/* 4. Buttons */
.fb-actions { margin-top: auto; }
.fb-actions .friendship-button a {
    display: block;
    width: 100%;
    padding: 5px 0;
    background: #e7f3ff;
    color: #007AFF;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
}

/* 5. Request Badge */
.bwmf-tab-count {
    background-color: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    margin-left: 5px;
    position: relative;
    top: -1px;
}









/* --- BWMF: FINAL LAYOUT & CAMERA FIX --- */

/* 1. LAYOUT: Tighten the Message List */
.bp-messages-wrap .bm-messages-list,
.bp-messages-wrap .bm-window .bm-content {
    padding-bottom: 20px !important; 
    height: auto !important;
}

/* 2. STYLE THE BAR (Outer Container) */
.bp-messages-wrap .bm-reply {
    position: relative !important;
    margin: 0 auto 80px auto !important; /* Lifts above footer */
    width: 96% !important;
    max-width: 600px !important;
    
    /* White Pill Shape */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    
    padding: 6px !important;
    
    /* FLEXBOX: Force items to sit in a row */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Start from left */
    gap: 8px !important; /* Space between Camera and Input */
    z-index: 9999 !important;
}

/* 3. FIX CAMERA BUTTON (The First Item) */
/* CRITICAL: Force this to take up 40px of space so it doesn't overlap text */
.bp-messages-wrap .bm-reply > div:first-child {
    flex: 0 0 40px !important; /* Do not grow, do not shrink, stay 40px */
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Hide native SVG */
.bp-messages-wrap .bm-reply > div:first-child svg {
    display: none !important;
}

/* Inject Camera Icon */
.bp-messages-wrap .bm-reply > div:first-child::after {
    content: "\f030" !important; 
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #007AFF !important;
    position: absolute !important;
}

/* 4. STYLE THE INPUT (Grey Pill) */
.bp-messages-wrap .bm-editor {
    flex-grow: 1 !important; /* Fill remaining space */
    background: #F2F3F5 !important;
    border-radius: 20px !important;
    padding: 8px 15px !important;
    border: none !important;
    margin: 0 !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* Clean text area */
.bp-messages-wrap .bm-editor-content {
    background: transparent !important;
    padding: 0 !important;
    font-size: 15px !important;
    width: 100% !important;
}

/* 5. STYLE SEND BUTTON (Last Item) */
.bp-messages-wrap .bm-send-message {
    flex: 0 0 40px !important; /* Fixed width */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #007AFF !important;
    margin-left: auto !important; /* Push to far right if needed */
}







/* --- BWMF: GROUPME STYLE (Zero Padding) --- */

/* 1. LAYOUT OVERRIDES (Force Left Alignment) */
.bp-messages-wrap .bm-messages-stack,
.bp-messages-wrap .bm-messages-stack.outgoing,
.bp-messages-wrap .bm-messages-stack.incoming {
    flex-direction: row !important; /* Always Avatar -> Message */
    justify-content: flex-start !important; /* Always align Left */
    margin-bottom: 20px !important;
    padding: 0 10px !important;
}

/* 2. AVATAR STYLING (Zero Padding) */
.bp-messages-wrap .bm-messages-stack .bm-pic,
.bp-messages-wrap .bm-messages-stack .bm-pic img {
    border: none !important; /* No White Border */
    background: transparent !important; /* No White Background */
    padding: 0 !important; /* No Padding */
    
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 3. AVATAR VISIBILITY (Force Show My Avatar) */
.bp-messages-wrap .bm-messages-stack.outgoing .bm-pic {
    display: block !important;
    order: 0 !important; 
}
.bp-messages-wrap .bm-messages-stack.outgoing .bm-content {
    order: 1 !important; 
    align-items: flex-start !important; 
}

/* 4. OUTGOING MESSAGES (Me - Light Grey) */
.bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content {
    background-color: #F2F2F7 !important; 
    color: #000000 !important; 
    border: 1px solid #e5e5ea !important;
    text-align: left !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 20px !important;
}

/* 5. INCOMING MESSAGES (Them - Darker Grey) */
.bp-messages-wrap .bm-messages-stack.incoming .bm-message-content {
    background-color: #E5E5EA !important; 
    color: #000000 !important; 
    border: 1px solid #d1d1d6 !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 20px !important;
}

/* 6. FORCE TEXT COLOR BLACK */
.bp-messages-wrap .bm-message-content *,
.bp-messages-wrap .bm-message-content p {
    color: #000000 !important;
}

/* 7. CLEANUP */
.bp-messages-wrap .bm-message-info { display: none !important; }
.bp-messages-wrap .bm-name { 
    margin-left: 50px !important; 
    font-size: 12px !important; 
    color: #888 !important; 
    text-align: left !important;
}





/* --- BWMF: CLEAN CHAT HEADER --- */

/* 1. HIDE "No Subject" */
.bp-messages-wrap .chat-header .thread-info .sub-name {
    display: none !important;
}

/* 2. HIDE THE CLOSE "X" BUTTON */
/* This button often appears on mobile to close the thread view */
.bp-messages-wrap .chat-header .back.close-thread {
    display: none !important;
}

/* Also hide the generic close button if it has a specific class like 'bm-close-thread' or is inside actions */
.bp-messages-wrap .chat-header .thread-actions .close-thread,
.bp-messages-wrap .chat-header .thread-actions .bm-close {
    display: none !important;
}

/* Note: If the X is the 'back' arrow on the left, use this instead:
.bp-messages-wrap .chat-header a.back { display: none !important; } 
But usually, you want to keep the back arrow for navigation. The 'X' is often on the right.
If the X is on the right side actions area: */
.bp-messages-wrap .chat-header .thread-actions .close {
    display: none !important;
}


/* 3. MAKE NAME BIGGER */
.bp-messages-wrap .chat-header .thread-info .name {
    font-size: 18px !important; /* Adjust size as needed */
    font-weight: 700 !important; /* Make it bold */
    color: #000000 !important; /* Ensure it's black/readable */
    line-height: 1.2 !important;
}

/* Center the text vertically if removing the sub-name messed up alignment */
.bp-messages-wrap .chat-header .thread-info-data {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 40px !important; /* Ensure header height stays consistent */
}







/* --- BWMF: FORCE VISIBLE REACTIONS --- */

/* 1. CONTAINER: Force it to exist and float */
#buddypress .bp-messages-wrap .message-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important; /* Always visible */
    
    position: absolute !important;
    z-index: 999 !important;
    bottom: -12px !important; /* Sit slightly below the bubble */
    
    background: transparent !important;
    padding: 0 !important;
    gap: 8px !important;
    height: 30px !important;
    pointer-events: auto !important;
}

/* 2. POSITIONING (Left vs Right) */

/* Incoming (They sent): Float icons to the RIGHT of their bubble */
#buddypress .bp-messages-wrap .bm-messages-stack.incoming .message-controls {
    right: -45px !important; 
    left: auto !important;
}

/* Outgoing (You sent): Float icons to the LEFT of your bubble */
#buddypress .bp-messages-wrap .bm-messages-stack.outgoing .message-controls {
    left: -45px !important; 
    right: auto !important;
}

/* 3. ENSURE PARENT HAS CONTEXT */
/* This ensures the absolute positioning above knows where '0' is */
#buddypress .bp-messages-wrap .bm-message {
    position: relative !important;
    overflow: visible !important; /* Allow buttons to float outside */
}

/* 4. STYLE THE BUTTONS (Heart, Reply, etc.) */
#buddypress .bp-messages-wrap .message-controls span,
#buddypress .bp-messages-wrap .message-controls .favorite,
#buddypress .bp-messages-wrap .message-controls .bpbm-more,
#buddypress .bp-messages-wrap .message-controls .bpbm-reply {
    font-size: 14px !important;
    color: #999 !important; /* Grey Icon */
    background: #ffffff !important;
    border: 1px solid #eee !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
}

/* 5. ACTIVE HEART (Red when liked) */
#buddypress .bp-messages-wrap .message-controls .favorite.active svg,
#buddypress .bp-messages-wrap .message-controls .favorited svg {
    fill: #ff3b30 !important;
    color: #ff3b30 !important;
}







/* --- BWMF: CHAPTER CARD STYLING --- */
.bwmf-chapter-badge {
    margin-bottom: 20px; /* Space below the card */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bwmf-chapter-badge .label {
    font-size: 11px;
    font-weight: 800;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-left: 5px;
}

.bwmf-chapter-badge .chapter-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px; /* Modern rounded corners */
    padding: 8px 16px 8px 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%; /* Full width on mobile */
    max-width: 350px;
    box-sizing: border-box;
}

.bwmf-chapter-badge .chapter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    border-color: #007AFF;
}

.bwmf-chapter-badge .chapter-card img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin-right: 12px;
    object-fit: cover;
    border: 1px solid #f0f0f0;
}

.bwmf-chapter-badge .chapter-card .chapter-name {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    flex-grow: 1; /* Pushes arrow to the right */
}

.bwmf-chapter-badge .chapter-card i {
    color: #ccc;
    font-size: 14px;
}


/* --- BWMF PINK PILLS (Balanced Size) --- */
.bwmf-pink-pills span,
.bwmf-pink-pills span.bwmf-pill {
    /* 1. BALANCED DIMENSIONS */
    padding: 3px 10px !important;      /* Slightly more breathing room */
    font-size: 11px !important;        /* Readable but small */
    line-height: 1.3 !important;
    
    /* 2. COMPACT SPACING */
    margin: 2px 4px 2px 0 !important;  /* Tight spacing */
    
    /* 3. COLORS & SHAPE */
    border: 1px solid #D4889E !important; 
    background-color: #FFF0F5 !important;
    color: #A84865 !important;
    border-radius: 12px !important;    /* Smooth pill shape */
    
    /* 4. LAYOUT OVERRIDES */
    display: inline-block !important;
    width: auto !important;
}





/* 2. INJECT "MESSAGE" INTO THE LINK */
.bm-lc-button::after {
    content: "Message" !important;
    font-size: 13px !important;
    display: block !important;
    text-align: center !important;
}

/* 3. WALL-TO-WALL 50/50 LAYOUT */
.bwmf-buttons-container, 
.bwmf-visitor-only, 
.bwmf-owner-only {
    display: flex !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 15px 0 !important;
}

.bwmf-msg-btn-wrap, 
.bwmf-connect-btn-wrap {
    flex: 1 !important;
    width: 50% !important;
}

/* 4. UNIFIED PILL STYLE */
.bwmf-buttons-container a, 
.bwmf-buttons-container .generic-button a,
.bm-lc-button {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    height: 40px !important;
    line-height: 20px !important;
    border-radius: 50px !important;
    border: 1px solid #555 !important;
    background: transparent !important;
    color: #555 !important;
    box-sizing: border-box !important;
}

/* --- BWMF SMART BUTTONS (Full Width) --- */

/* 1. Container Layout */
.bwmf-smart-actions {
    display: flex;
    gap: 10px; /* Space between the two buttons */
    width: 100%;
    margin-bottom: 12px;
    box-sizing: border-box; /* Ensure padding doesn't break width */
}

/* 1. MAKE BUTTONS WALL-TO-WALL & EQUAL SIZE (50/50) */
.bwmf-buttons-container, 
.bwmf-visitor-only, 
.bwmf-owner-only {
    display: flex !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

.bwmf-msg-btn-wrap, 
.bwmf-connect-btn-wrap {
    flex: 1 !important;
}

/* 2. ENSURE BOTH BUTTONS LOOK IDENTICAL (THIN GREY PILL) */
.bwmf-buttons-container a, 
.bwmf-buttons-container .generic-button a,
.bwmf-buttons-container .bp-better-messages-live-chat-button {
    flex: 1 !important;
    display: block !important;
    text-align: center !important;
    padding: 10px 0 !important; /* Thin profile */
    border-radius: 50px !important; /* Pill shape */
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* 3. CHANGE "LIVE CHAT" TO "MESSAGE" */
.bp-better-messages-live-chat-button {
    font-size: 0 !important; /* Hides original text */
}

.bp-better-messages-live-chat-button::after {
    content: "Message" !important;
    font-size: 13px !important; /* Restores font size */
    display: block !important;
    visibility: visible !important;
}


/* 1. HIDE THE "LIVE CHAT" TEXT SPAN YOU FOUND */
.bm-lc-button .bm-button-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. INJECT THE "MESSAGE" TEXT */
.bm-lc-button::after {
    content: "Message" !important;
    font-size: 13px !important;
    color: #555 !important;
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
}

/* 3. ENSURE 50/50 WALL-TO-WALL SIZING */
.bwmf-buttons-container, 
.bwmf-visitor-only,
.bwmf-owner-only {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 8px 0 !important;
}

.bwmf-msg-btn-wrap, 
.bwmf-connect-btn-wrap {
    flex: 1 !important;
    width: 50% !important;
}

/* 4. PILL STYLING & EQUAL HEIGHT */
.bwmf-buttons-container a, 
.bwmf-buttons-container .generic-button a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    height: 40px !important; /* Locks height to be identical */
    line-height: 20px !important;
    border-radius: 50px !important;
    border: 1px solid #555 !important;
    background: transparent !important;
    color: #555 !important;
}



/* --- BWMF MENU HEADER (Larger Version) --- */

/* 1. Main Container */
.bwmf-menu-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px; /* More breathing room */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Stronger pop */
    margin-bottom: 25px;
}

/* 2. Left Side (Avatar + Text) */
.bwmf-profile-area {
    display: flex;
    align-items: center;
    gap: 15px; /* More gap */
    flex-grow: 1;
}

/* 3. Avatar (Larger) */
.bwmf-menu-avatar {
    width: 80px !important; /* Increased from 55px */
    height: 80px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 4. Text Info */
.bwmf-menu-name {
    font-family: 'Poppins', sans-serif;
    font-size: 24px; /* Increased from 17px */
    font-weight: 700;
    color: #333;
    line-height: 1.1;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.bwmf-menu-handle {
    font-size: 14px;
    color: #888;
    display: block;
    margin-bottom: 4px;
}

.bwmf-view-profile {
    font-size: 12px;
    font-weight: 600;
    color: #D4889E; /* Pink Brand Color */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 5. Settings Icon (Larger) */
.bwmf-settings-icon-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    border-radius: 50%;
    color: #555;
    transition: all 0.2s ease;
}
.bwmf-settings-icon-btn svg {
    width: 24px;
    height: 24px;
}



/* --- BWMF MENU PAGE ALIGNMENT FIX (Tighter Spacing) --- */

/* 1. Reset Our Custom Items to be Full Width */
.bwmf-menu-header-container,
.bwmf-menu-grid {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important; /* Reduced from 20px */
}

/* 2. Fix "Complete Your Profile" Widget */
.widget_bp_core_completion_widget, 
.bb-profile-progress-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important; /* Reduced from 20px */
    padding: 15px 20px !important; /* Slightly tighter padding inside */
    background: #fff !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}

/* 3. Fix "Local Chapter" / Generic List Widgets */
.bwmf-local-chapter, 
.elementor-widget-wp-widget-bp_groups_widget,
.bb-groups-list-widget {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    margin-bottom: 10px !important; /* Reduced from 20px */
    padding: 15px !important;
}
/* This targets standard Elementor/BB list items to ensure they align */
.bwmf-local-chapter, 
.elementor-widget-wp-widget-bp_groups_widget,
.bb-groups-list-widget {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
}/* End custom CSS */