/* =========================================
   LOGIN PAGE (Page ID 75)
   Full Screen App Layout
   ========================================= */

/* Hide Divi header */
body.page-id-75 #main-header,
body.page-id-75 #top-header {
    display: none !important;
}

/* Remove Divi header spacing */
body.page-id-75 #page-container {
    padding-top: 0 !important;
}

/* Full screen */
body.page-id-75 {
    height: 100vh;
    overflow: hidden;
}

/* Full width content */
body.page-id-75 #main-content,
body.page-id-75 .container,
body.page-id-75 .et-l,
body.page-id-75 .et_builder_inner_content,
body.page-id-75 article,
body.page-id-75 .entry-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Center login section vertically */
body.page-id-75 .et_pb_section {
    min-height: calc(100vh - 40px) !important;
    display: flex;
    align-items: center;
}

/* Row sizing */
body.page-id-75 .et_pb_row {
    width: 100% !important;
    max-width: 1200px !important;
}


/* =========================================
   LOGIN GLASS CARD
   ========================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.45);
    pointer-events: none;
    z-index: 0;
}

.et_pb_login {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    padding: 30px;
}


/* =========================================
   LOGIN PAGE FOOTER
   ========================================= */

body.page-id-75 #footer-widgets {
    display: none !important;
}

body.page-id-75 #main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

body.page-id-75 #footer-bottom {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 0 !important;
}

body.page-id-75 #footer-bottom .container {
    width: 100% !important;
    max-width: 1200px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 auto !important;
}

body.page-id-75 #footer-info {
    float: none !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================
   GLOBAL DIVI FOOTER
   Same alignment as Login Page
   ========================================= */

/* =========================================
   CENTERED FIXED FOOTER COPYRIGHT
   ========================================= */

#footer-widgets {
    display: none !important;
}

#main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

#footer-bottom {
    padding: 0 !important;
}

#footer-bottom .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#footer-info {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* =================================================
   LOGGED OUT USER MESSAGE
   Does NOT affect Divi Login Module
   ================================================= */

body.page-id-75 .logout-message {

    position: relative;
    z-index: 5;

    width: auto !important;

    background: rgba(255,255,255,0.75);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 6px;

    border: 1px solid rgba(255,255,255,0.55);

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    padding: 14px 0px;

    margin: 25px 30px 25px 30px;

    color: #222 !important;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

    text-align: center;

    text-shadow: none !important;

    box-sizing: border-box;
}


/* =================================================
   LOGGED IN PANEL BUTTONS
   ================================================= */

body.page-id-75 .custom-account-button,
body.page-id-75 .custom-logout-button {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    padding: 12px 28px;

    min-height: 42px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 500;

    line-height: 1;

    text-decoration: none !important;

    margin: 0 10px 0 0;

    border: none;

    outline: none;

    box-shadow: none;

    vertical-align: middle;

}


/* Continue to Account */

body.page-id-75 .custom-account-button {

    background: #2c7be5 !important;

    color: #ffffff !important;

}


/* Sign Out */

body.page-id-75 .custom-logout-button {

    background: rgba(255,255,255,0.85) !important;

    color: #222 !important;

    border: 1px solid rgba(0,0,0,0.10);

}


/* Remove hover highlighting */

body.page-id-75 .custom-account-button:hover,
body.page-id-75 .custom-logout-button:hover {

    opacity: .85;

    text-decoration: none !important;

}


/* Keep buttons aligned */

body.page-id-75 .custom-account-box a {

    text-decoration: none !important;

}

/* =================================================
   RESTORE LOGGED-IN PANEL BACKGROUND
   ================================================= */

body.page-id-75 .custom-account-box {

    background: rgba(255,255,255,0.75) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 6px;

    border: 1px solid rgba(255,255,255,0.55);

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    padding: 30px;

}


/* =================================================
   LOGGED-IN BUTTONS ONLY
   ================================================= */

body.page-id-75 .custom-account-box .custom-account-button,
body.page-id-75 .custom-account-box .custom-logout-button {

    display: inline-block !important;

    padding: 12px 25px !important;

    border-radius: 6px !important;

    margin-right: 10px !important;

    text-decoration: none !important;

    box-shadow: none !important;

}


/* Continue */

body.page-id-75 .custom-account-box .custom-account-button {

    background: #2c7be5 !important;

    color: #fff !important;

}


/* Sign Out */

body.page-id-75 .custom-account-box .custom-logout-button {

    background: rgba(255,255,255,0.85) !important;

    color: #222 !important;

    border: 1px solid rgba(0,0,0,.08) !important;

}


/* Remove link effects */

body.page-id-75 .custom-account-box a:hover {

    text-decoration: none !important;

    opacity: .85;

}

/* =================================================
   LOGGED-IN PANEL SPACING
   ================================================= */

body.page-id-75 .custom-account-box p {

    margin-bottom: 35px !important;

}

/* =========================================
   FOOTER LEFT ALIGNMENT
   Match page content spacing
   ========================================= */

#footer-info {
   margin-left: 50px !important;
}

/* =========================================
   FOLLO APP LAUNCHER
   8 APPS PER ROW
   ========================================= */

.follo-app-grid {

    display: grid !important;

    grid-template-columns: repeat(8, 1fr);

    gap: 30px 25px;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}


/* Individual App */

.follo-app {

    text-align: center;

}


/* App Circle */

.follo-app .app-circle {

    width: 95px;

    height: 95px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 12px auto;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

    transition: all .25s ease;

}


/* Icon */

.follo-app .app-circle img {

    width: 55px;

    height: 55px;

    object-fit: contain;

}


/* App Name */

.follo-app .app-name {

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    white-space: nowrap;

}


/* Hover */

.follo-app:hover .app-circle {

    transform: scale(1.08);

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);

}


/* Tablet */

@media(max-width:1100px){

    .follo-app-grid {

        grid-template-columns: repeat(6, 1fr);

    }

}


/* Mobile */

@media(max-width:767px){

    .follo-app-grid {

        grid-template-columns: repeat(4, 1fr);

        gap:20px;

    }


    .follo-app .app-circle {

        width:75px;

        height:75px;

    }


    .follo-app .app-circle img {

        width:42px;

        height:42px;

    }

}

.register-link {

    margin-top:20px;

    text-align:center;

    font-size:14px;

}


.register-link a {

    color:#2c7be5 !important;

    font-weight:600;

    text-decoration:none;

}

/* Hide registration link for logged-in users */
body.logged-in .register-link {
    display: none !important;
}

/* =========================================
   CREATE ACCOUNT MESSAGE
   Match logout-message glass style
   ========================================= */

body.page-id-75 .register-link {

    position: relative;
    z-index: 5;

    width: 100% !important;

    background: rgba(255,255,255,0.75);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 6px;

    border: 1px solid rgba(255,255,255,0.55);

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    padding: 14px 20px;

    margin-top: 25px !important;

    color: #222 !important;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

    text-align: center;

    text-shadow: none !important;

    box-sizing: border-box;

}


/* Create Account link */

body.page-id-75 .register-link a {

    color: #2c7be5 !important;

    font-weight: 700;

    text-decoration: none !important;

    margin-left: 6px;

}


body.page-id-75 .register-link a:hover {

    opacity: .75;

}


/* Hide for logged-in users */

body.logged-in.page-id-75 .register-link {

    display: none !important;

}

/* =========================================
   FOLLO REGISTER FORM GLASS STYLE
   ========================================= */


/* Main registration card */

.follo-register-form {

    background: rgba(255,255,255,0.75) !important;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-radius:18px;

    border:1px solid rgba(255,255,255,0.55);

    box-shadow:0 20px 60px rgba(0,0,0,.15);

    padding:30px !important;

}


/* Registration title */

.follo-register-form:before {

    content:"Create Your FOLLO Account";

    display:block;

    text-align:center;

    color:#222;

    font-size:24px;

    font-weight:600;

    margin-bottom:25px;

}


/* Input fields */

.follo-register-form input[type="text"],
.follo-register-form input[type="email"],
.follo-register-form input[type="password"] {

    width:100% !important;

    box-sizing:border-box;

    padding:13px 15px !important;

    margin-bottom:15px !important;

    border-radius:8px !important;

    border:1px solid rgba(0,0,0,0.12) !important;

    background:rgba(255,255,255,0.85) !important;

    font-size:14px;

    color:#222;

}


/* Placeholder text */

.follo-register-form input::placeholder {

    color:#777;

}


/* Create Account button */

.follo-register-form button {

    width:100% !important;

    padding:13px !important;

    margin-top:10px;

    border-radius:8px !important;

    border:none !important;

    background:#2c7be5 !important;

    color:#ffffff !important;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

}


/* Button hover */

.follo-register-form button:hover {

    opacity:.85;

}


/* Mobile */

@media (max-width:768px){

    .follo-register-form {

        padding:20px !important;

    }

}

/* =========================================
   FOLLO ADMIN BAR CLEANUP
   Keep Howdy/User Menu
   Hide WordPress Branding
   ========================================= */

/* Hide WordPress logo menu */
#wp-admin-bar-wp-logo {
    display: none !important;
}

/* Hide WordPress about link */
#wp-admin-bar-about {
    display: none !important;
}

/* Hide WordPress documentation */
#wp-admin-bar-wporg {
    display: none !important;
}

#wp-admin-bar-documentation {
    display: none !important;
}

/* Hide support/forums */
#wp-admin-bar-support-forums {
    display: none !important;
}

/* Hide feedback */
#wp-admin-bar-feedback {
    display: none !important;
}


/* Keep user menu */
#wp-admin-bar-my-account {
    display: block !important;
}

/* =====================================
   FOLLO APP LAUNCHER STYLES
===================================== */


/* Section Titles */

.app-section-title {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}

/* =====================================
   SPACE BEFORE FOLLO APPS TITLE
===================================== */

.my-apps-grid + .app-section-title {

    margin-top: 125px !important;

}



/* Section Header (My Apps + Add App Button) */

.follo-section-header {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 60px;

    margin-bottom: 25px;

}


/* Add App Button */

.follo-add-app-button {

    padding: 10px 22px;

    border-radius: 50px;

    border: none;

    background: #2563eb;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all .25s ease;

}

.follo-add-app-button:hover {

    background: #3b82f6;

    transform: translateY(-2px);

}


/* Remove App Button */

.follo-remove-app-button {

    padding: 10px 22px;

    border-radius: 50px;

    border: none;

    background: #f5f5f5;

    color: #555;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all .25s ease;

}

.follo-remove-app-button:hover {

    background: #ffe8e8;

    color: #e53935;

    transform: translateY(-2px);

}

.follo-add-app-button:active,
.follo-remove-app-button:active {

    transform: translateY(0);

}



/* App Grid */

.follo-app-grid {

    margin-bottom: 50px;

}



/* Empty My Apps Message */

.follo-empty-apps {

    padding: 25px;

    margin-top: 10px;

    margin-bottom: 20px;

    border-radius: 20px;

    background: rgba(255,255,255,0.08);

    text-align: center;

    font-size: 16px;

}

/* =====================================
   FOLLO ADD APP POPUP
===================================== */


.follo-modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.6);

    z-index:9999;

    align-items:center;

    justify-content:center;

}



.follo-modal-content {

    background:white;

    width:90%;

    max-width:400px;

    padding:30px;

    border-radius:25px;

    text-align:center;

}



.follo-close-modal {

    float:right;

    font-size:28px;

    cursor:pointer;

}



#follo-app-url {

    width:100%;

    padding:12px;

    border-radius:12px;

    margin:15px 0;

}



#follo-save-app {

    padding:12px 25px;

    border-radius:50px;

    border:none;

    cursor:pointer;

}


/* =====================================
   FEATURED APPS
===================================== */

.follo-featured-section {

    background: #f8f9fb;

    padding: 30px;

    border-radius: 20px;

    border: 1px solid rgba(0,0,0,0.05);

    box-shadow: 0 12px 30px rgba(0,0,0,.08);

    margin-bottom: 40px;

}


.follo-featured-section .featured-subtitle {

    margin-top: 8px;

    margin-bottom: 25px;

    font-size: 14px;

    opacity: .7;

}


/* View More / View Less Button */

.featured-view-all-wrap {

    margin-top: 25px;

    padding-bottom: 10px;

    text-align: right;

}


.featured-toggle-button {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    padding: 10px 22px !important;

    border-radius: 50px !important;

    border: none !important;

    background: #2563eb !important;

    color: #fff !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition: all .25s ease;

}


.featured-toggle-button:hover {

    background: #3b82f6 !important;

    transform: translateY(-2px);

}


.featured-toggle-button:active {

    transform: translateY(0);

}


.featured-hidden {

    display:none;

}



/* This is for Continue with Google */
/* Make all Nextend wrappers full width */
.nsl-container,
.nsl-container-block,
.nsl-container-buttons,
.nsl-container-buttons > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Make the Google button fill the link */
.nsl-button-google {
    display: flex !important;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.nsl-button-label-container {
    flex: 1;
    text-align: center;
}

/* User app remove button */

.follo-remove-single-app {

    display: none;

    position: absolute;

    top: -8px;

    right: -8px;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: none;

    background: #e63946;

    color: white;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    z-index: 5;

}



/* Show only when My Apps is in remove mode */

.my-apps-grid.follo-remove-mode .follo-remove-single-app {

    display: flex;

}



/* Allow X positioning */

.follo-app {

    position: relative;

}

.follo-remove-single-app:hover {

    background: #b91c1c;

    transform: scale(1.1);

}


.follo-confirm-remove-button {

    display:none;

    padding:10px 22px;

    border-radius:50px;

    border:none;

    background:#e63946;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

}




.follo-app.marked-for-removal {

    opacity:0.45;

}


.follo-app.marked-for-removal .app-circle {

    transform:scale(.95);

}

.follo-app-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

}

/* =========================================
   LOGGED-IN HOMEPAGE
   ========================================= */

body.page-id-123 {

    min-height: 100vh;

}

body.page-id-123 #main-content {

    min-height: calc(100vh - 40px);

}

body.page-id-123 .et_pb_section:first-child {

    min-height: calc(100vh - 40px);

}


/* =========================================
   FOOTER - MATCH LOGIN PAGE AND LOGGED-IN HOMEPAGE
   Login Page ID: 75
   Logged-in Homepage ID: 178
   ========================================= */


/* Footer background + height */

body.page-id-75 #footer-bottom,
body.page-id-178 #footer-bottom {

    background: #000 !important;

    display: flex !important;

    align-items: center !important;

    min-height: 40px !important;

    height: 40px !important;

    padding: 0 !important;

}


/* Footer container alignment */

body.page-id-75 #footer-bottom .container,
body.page-id-178 #footer-bottom .container {

    width: 100% !important;

    max-width: 1200px !important;

    display: flex !important;

    align-items: center !important;

    margin: 0 auto !important;

    padding: 0 !important;

}


/* Copyright text alignment */

body.page-id-75 #footer-info,
body.page-id-178 #footer-info {

    float: none !important;

    margin: 0 0 0 50px !important;

    padding: 0 !important;

    width: auto !important;

    font-size: 12px !important;

    line-height: 1 !important;

    text-align: left !important;

}


/* =====================================
   APP SECTION TITLES
===================================== */

.app-section-title {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

    position: relative;

}


/* Featured Apps title stays normal */
.follo-featured-section + .app-section-title {

    margin-top: 75px !important;

}


/* My Apps title spacing */
.follo-section-header {

    margin-top: 85px !important;

    margin-bottom: 25px !important;

}


/* =====================================
   FOLLO APPS - GLASS BOTTOM EDGE
   Space Before My Apps
===================================== */

.follo-apps-section {

    padding-bottom: 35px !important;

    position: relative !important;

}


.follo-apps-section::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 25px;

    background: rgba(248,249,251,0.95);

    border-radius: 0 0 20px 20px;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.10);

}


/* =====================================
   MY APPS - GLASS BOTTOM EDGE
   Space Before Copyright Footer
===================================== */

.my-apps-grid {

    padding-bottom: 100px !important;

    margin-bottom: 0 !important;

    position: relative !important;

}


.my-apps-grid::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 25px;

    background: rgba(248,249,251,0.95);

    border-radius: 0 0 20px 20px;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.10);

}


/* Space between glass edge and fixed footer */

body.page-id-178 #main-content {

    padding-bottom: 150px !important;

}



/* =========================================================
   FOLLO BARCODE + QR CONNECT LINKS
========================================================= */

#wpadminbar
#follo-member-card
.follo-member-connect-link {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    text-decoration: none !important;

    border: 0 !important;

    background: transparent !important;

    cursor: pointer !important;

}


#wpadminbar
#follo-member-card
.follo-member-connect-link:hover {

    text-decoration: none !important;

}


/* =========================================================
   FOLLO FRIEND CONNECTION NOTICE
========================================================= */

.follo-friend-status-notice {

    position: fixed;

    left: 50%;
    bottom: 28px;

    z-index: 999999;

    transform: translateX(-50%);

    max-width: 90%;

    padding: 13px 22px;

    box-sizing: border-box;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(55,66,73,0.97),
            rgba(31,38,43,0.97)
        );

    border:
        1px solid rgba(255,255,255,0.16);

    border-radius: 12px;

    box-shadow:
        0 14px 40px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.08);

    font-size: 14px;
    line-height: 20px;

    text-align: center;

    backdrop-filter: blur(12px);
}


/* =========================================================
   FOLLO BUDDYPRESS / WP ADMIN BAR NESTED MENUS
   Allow child menus to open left without being clipped
   ========================================================= */

/*
 * The account menu is attached to the right side of the screen,
 * so BuddyPress child menus must be allowed to escape the
 * main dropdown and open toward the left.
 */
#wpadminbar,
#wpadminbar .quicklinks,
#wpadminbar #wp-admin-bar-my-account,
#wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper,
#wpadminbar #wp-admin-bar-my-account .ab-submenu,
#wpadminbar #wp-admin-bar-my-account .menupop,
#wpadminbar #wp-admin-bar-my-account .menupop > .ab-sub-wrapper {
    overflow: visible !important;
}


/* ---------------------------------------------------------
   PARENT BUDDYPRESS ROW
   Each menu row becomes the positioning anchor for its child.
   --------------------------------------------------------- */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop {
    position: relative !important;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   CHILD FLYOUT
   Open LEFT because the account menu is on the right edge.
   --------------------------------------------------------- */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper {

    position: absolute !important;

    top: 0 !important;
    right: 100% !important;
    left: auto !important;
    bottom: auto !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

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

    overflow: visible !important;

    transform: none !important;

    z-index: 2147483000 !important;
}


/* WordPress normally hides nested wrappers.
   Show only the child belonging to the hovered/focused row. */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop:hover
> .ab-sub-wrapper,

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop:focus-within
> .ab-sub-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   RESET THE UL INSIDE THE CHILD WRAPPER
   The wrapper handles positioning, not the UL.
   --------------------------------------------------------- */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper
> .ab-submenu {

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

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

    height: auto !important;
    max-height: none !important;

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

    overflow: visible !important;
}


/* ---------------------------------------------------------
   CHILD MENU ROWS
   --------------------------------------------------------- */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper
> .ab-submenu
> li {

    position: relative !important;

    width: 100% !important;

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

    overflow: visible !important;

    border-bottom:
        1px solid rgba(255,255,255,0.10) !important;
}


#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper
> .ab-submenu
> li:last-child {
    border-bottom: none !important;
}


/* ---------------------------------------------------------
   CHILD MENU LINKS
   --------------------------------------------------------- */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper
> .ab-submenu
> li
> .ab-item {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;

    box-sizing: border-box !important;

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

    line-height: 22px !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   KEEP CHILD FLYOUT ABOVE DIVI CONTENT / FOOTER
   --------------------------------------------------------- */

#wpadminbar #wp-admin-bar-my-account,
#wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper {
    z-index: 2147482000 !important;
}


/* =========================================================
   BUDDYPRESS LOWER MENU FLYOUTS
   Prevent bottom-edge cutoff
   ========================================================= */

#wpadminbar
#wp-admin-bar-my-account
#wp-admin-bar-my-account-settings
> .ab-sub-wrapper,

#wpadminbar
#wp-admin-bar-my-account
#wp-admin-bar-my-account-invitations
> .ab-sub-wrapper {

    top: auto !important;
    bottom: 0 !important;

    right: 100% !important;
    left: auto !important;

    z-index: 2147483000 !important;
}



/* =========================================================
   FOLLO MEMBER CARD
   BARCODE + QR + EXPAND MODAL
   CLEAN FINAL VERSION
========================================================= */


/* =========================================================
   MEMBER CARD
========================================================= */

#wpadminbar
#follo-member-card {

    display: block !important;
    position: relative !important;

    float: none !important;
    clear: both !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;

    overflow: visible !important;

    background: #293137 !important;

    border-radius: 3px !important;

    text-align: left !important;
}


/* =========================================================
   CONNECT LINKS
========================================================= */

#wpadminbar
#follo-member-card
.follo-member-connect-link {

    display: block !important;
    position: relative !important;

    float: none !important;
    clear: both !important;

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

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

    line-height: normal !important;

    text-decoration: none !important;

    border: 0 !important;

    background: transparent !important;

    cursor: zoom-in !important;
}


/* =========================================================
   BARCODE
========================================================= */

#wpadminbar
#follo-member-card
.follo-member-barcode-link {

    height: 52px !important;
    min-height: 52px !important;
}


#wpadminbar
#follo-member-card
.follo-member-barcode-wrap {

    display: block !important;
    position: relative !important;

    float: none !important;

    width: 100% !important;
    height: 52px !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius: 3px !important;
}


#wpadminbar
#follo-member-card
.follo-barcode-lines {

    display: flex !important;

    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;

    width: 100% !important;
    height: 42px !important;

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

    overflow: hidden !important;

    background: #ffffff !important;
}


#wpadminbar
#follo-member-card
.follo-barcode-black,

#wpadminbar
#follo-member-card
.follo-barcode-space {

    display: block !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    height: 42px !important;

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


#wpadminbar
#follo-member-card
.follo-barcode-black {

    background: #000000 !important;
}


#wpadminbar
#follo-member-card
.follo-barcode-space {

    background: #ffffff !important;
}


/* =========================================================
   OR SCAN QR
========================================================= */

#wpadminbar
#follo-member-card
.follo-member-code-divider {

    display: block !important;
    position: relative !important;

    float: none !important;
    clear: both !important;

    width: 100% !important;

    height: 28px !important;
    min-height: 28px !important;

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

    box-sizing: border-box !important;

    color: #aeb7bd !important;

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

    line-height: 28px !important;

    letter-spacing: 1px !important;

    text-align: center !important;
    text-transform: uppercase !important;

    overflow: visible !important;

    z-index: 2 !important;
}


/* =========================================================
   QR CODE
========================================================= */

#wpadminbar
#follo-member-card
.follo-member-qr-link {

    display: block !important;
    position: relative !important;

    float: none !important;
    clear: both !important;

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

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


#wpadminbar
#follo-member-card
.follo-member-qr-wrap {

    display: flex !important;
    position: relative !important;

    float: none !important;

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

    width: 100% !important;

    height: 161px !important;
    min-height: 161px !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius: 3px !important;
}


#wpadminbar
#follo-member-card
.follo-member-qr {

    display: block !important;
    position: static !important;

    float: none !important;

    width: 145px !important;
    height: 145px !important;

    max-width: 145px !important;

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

    border: 0 !important;

    background: #ffffff !important;
}


/* =========================================================
   BUDDYPRESS MENU MUST FOLLOW CARD
========================================================= */

#wpadminbar
#wp-admin-bar-my-account-buddypress {

    display: block !important;
    position: relative !important;

    float: none !important;
    clear: both !important;

    top: auto !important;
    bottom: auto !important;
}


/* =========================================================
   EXPAND MODAL BACKDROP
========================================================= */

#follo-code-modal.follo-code-modal {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 2147483647 !important;

    display: none !important;

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

    width: 100vw !important;
    height: 100vh !important;

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

    box-sizing: border-box !important;

    background: rgba(8, 12, 15, 0.92) !important;

    backdrop-filter: blur(12px);
}


#follo-code-modal.follo-code-modal.is-open {

    display: flex !important;
}


/* =========================================================
   MODAL PANEL
========================================================= */

#follo-code-modal
.follo-code-modal-inner {

    position: relative !important;

    width: 440px !important;
    max-width: 92vw !important;

    max-height: 92vh !important;

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

    box-sizing: border-box !important;

    overflow: auto !important;

    background: #ffffff !important;

    border-radius: 20px !important;

    text-align: center !important;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.58) !important;
}


#follo-code-modal
.follo-code-modal-title {

    margin: 0 40px 20px !important;

    color: #20272c !important;

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

    line-height: 24px !important;
}


#follo-code-modal
.follo-code-modal-content {

    display: flex !important;

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

    width: 100% !important;

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


/* =========================================================
   EXPANDED QR
========================================================= */

#follo-code-modal
.follo-expanded-qr {

    display: block !important;

    width: 340px !important;
    height: 340px !important;

    max-width: 76vw !important;
    max-height: 76vw !important;

    margin: 0 auto !important;
}


/* =========================================================
   EXPANDED BARCODE
========================================================= */

#follo-code-modal
.follo-expanded-barcode {

    display: block !important;

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

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

    box-sizing: border-box !important;

    background: #ffffff !important;
}


#follo-code-modal
.follo-expanded-barcode
.follo-barcode-lines {

    display: flex !important;

    width: 100% !important;
    height: 130px !important;
}


#follo-code-modal
.follo-expanded-barcode
.follo-barcode-black,

#follo-code-modal
.follo-expanded-barcode
.follo-barcode-space {

    height: 130px !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

#follo-code-modal
.follo-code-modal-close {

    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    width: 38px !important;
    height: 38px !important;

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

    border: 0 !important;

    border-radius: 50% !important;

    background: #eeeeee !important;

    color: #222222 !important;

    font-size: 27px !important;

    line-height: 38px !important;

    text-align: center !important;

    cursor: pointer !important;
}


/* =========================================================
   MODAL HINT
========================================================= */

#follo-code-modal
.follo-code-modal-hint {

    margin-top: 16px !important;

    color: #68737a !important;

    font-size: 12px !important;

    line-height: 18px !important;
}


/* =========================================================
   CONNECT BUTTON
========================================================= */

#follo-code-modal
.follo-code-modal-connect {

    display: inline-block !important;

    margin-top: 16px !important;

    padding: 11px 24px !important;

    color: #ffffff !important;

    background: #293137 !important;

    border-radius: 8px !important;

    text-decoration: none !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}


/* =========================================================
   FOLLO LOGGED-IN PANEL BUTTON SPACING
========================================================= */

.custom-account-box
.custom-account-button {

    display: inline-block;

    margin-right: 20px !important;

}


.custom-account-box
.custom-logout-button {

    display: inline-block;

}


/* Mobile */
@media (max-width: 480px) {

    .custom-account-box
    .custom-account-button {

        margin-right: 20px !important;

        margin-bottom: 15px !important;

    }

}


/* =========================================================
   FOLLO HOMEPAGE IDENTITY BAR
   FULL-WIDTH PROFESSIONAL VERSION
========================================================= */

.follo-home-identity {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        58px
        58px;

    grid-template-areas:
        "welcome barcode qr"
        "id      barcode qr"
        "help    barcode qr";

    align-items: center;

    gap: 2px 12px;

    width: 100%;
    max-width: none;

    margin:
        0
        0
        34px;

    padding:
        20px
        24px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #303a40 0%,
            #252d32 100%
        );

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius:
        18px;

    box-shadow:
        0 14px 38px rgba(25,35,40,0.12),
        inset 0 1px 0 rgba(255,255,255,0.06);

    text-align: left;
}


/* =========================================================
   WELCOME
========================================================= */

.follo-home-welcome {

    grid-area: welcome;

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 6px;

    margin: 0 0 3px;

    padding: 0;

    color: #ffffff;
}


.follo-home-welcome-label {

    font-size: 18px;

    font-weight: 400;

    line-height: 24px;
}


.follo-home-welcome-name {

    font-size: 19px;

    font-weight: 700;

    line-height: 24px;

    overflow-wrap: anywhere;
}


/* =========================================================
   FOLLO ID
========================================================= */

.follo-home-id-label {

    display: none;
}


.follo-home-id-number {

    grid-area: id;

    margin: 0;

    padding: 0;

    color: #b9c1c6;

    font-size: 12px;

    font-weight: 600;

    line-height: 18px;

    letter-spacing: 0.7px;
}


/* =========================================================
   HELPER TEXT
========================================================= */

.follo-home-code-help {

    grid-area: help;

    margin: 5px 0 0;

    padding: 0;

    color: #859198;

    font-size: 10px;

    line-height: 15px;
}


/* =========================================================
   REMOVE DIVIDER
========================================================= */

.follo-home-code-divider {

    display: none !important;
}


/* =========================================================
   SHARED CODE BUTTON
========================================================= */

.follo-home-code-button {

    position: relative;

    display: flex !important;

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

    width: 58px !important;
    height: 58px !important;

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

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,0.12) !important;

    border-radius:
        14px !important;

    background:
        rgba(255,255,255,0.07) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 5px 14px rgba(0,0,0,0.10);

    cursor: pointer !important;

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease;
}


.follo-home-code-button:hover {

    background:
        rgba(255,255,255,0.13) !important;

    border-color:
        rgba(255,255,255,0.22) !important;

    transform:
        translateY(-1px);
}


/* =========================================================
   BARCODE ICON
========================================================= */

.follo-home-barcode-button {

    grid-area: barcode;
}


.follo-home-barcode {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 30px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: transparent;

    border-radius: 0;
}


/*
 * Turn real barcode into miniature barcode icon.
 */
.follo-home-barcode
.follo-barcode-lines {

    display: flex !important;

    align-items: stretch !important;

    justify-content: center !important;

    width: auto !important;
    height: 27px !important;

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

    overflow: visible !important;

    background: transparent !important;

    transform:
        scaleX(0.14);

    transform-origin:
        center center;
}


.follo-home-barcode
.follo-barcode-black,

.follo-home-barcode
.follo-barcode-space {

    height: 27px !important;
}


.follo-home-barcode
.follo-barcode-black {

    background:
        #ffffff !important;
}


.follo-home-barcode
.follo-barcode-space {

    background:
        transparent !important;
}


/* =========================================================
   QR ICON
========================================================= */

.follo-home-qr-button {

    grid-area: qr;
}


.follo-home-qr-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px !important;
    height: 36px !important;

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

    box-sizing: border-box;

    overflow: hidden;

    background:
        #ffffff;

    border-radius:
        5px;
}


.follo-home-qr {

    display: block;

    width: 30px !important;
    height: 30px !important;

    max-width: 30px !important;

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


/* =========================================================
   TOOLTIP LABELS
========================================================= */

.follo-home-barcode-button:after,
.follo-home-qr-button:after {

    position: absolute;

    left: 50%;
    bottom: -28px;

    z-index: 5;

    transform:
        translateX(-50%);

    padding:
        4px
        7px;

    border-radius:
        5px;

    background:
        #151a1d;

    color:
        #ffffff;

    font-size:
        9px;

    line-height:
        14px;

    white-space:
        nowrap;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.15s ease;
}


.follo-home-barcode-button:after {

    content:
        "Barcode";
}


.follo-home-qr-button:after {

    content:
        "QR Code";
}


.follo-home-barcode-button:hover:after,
.follo-home-qr-button:hover:after {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   MODAL
========================================================= */

#follo-home-code-modal {

    position: fixed !important;

    inset: 0 !important;

    z-index: 2147483647 !important;

    display: none !important;

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

    width: 100vw !important;
    height: 100vh !important;

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

    box-sizing: border-box !important;

    background:
        rgba(8,12,15,0.91) !important;

    backdrop-filter:
        blur(12px);
}


#follo-home-code-modal.is-open {

    display: flex !important;
}


/* =========================================================
   MODAL PANEL
========================================================= */

#follo-home-code-modal
.follo-home-code-modal-inner {

    position: relative !important;

    width: 450px !important;

    max-width: 92vw !important;

    max-height: 92vh !important;

    margin: 0 !important;

    padding: 30px !important;

    box-sizing: border-box !important;

    overflow: auto !important;

    background:
        #ffffff !important;

    border-radius:
        22px !important;

    text-align: center !important;

    box-shadow:
        0 32px 90px rgba(0,0,0,0.58) !important;
}


#follo-home-code-modal
.follo-home-code-modal-title {

    margin:
        0
        42px
        20px !important;

    color:
        #20272c !important;

    font-size:
        19px !important;

    font-weight:
        700 !important;

    line-height:
        25px !important;
}


#follo-home-code-modal
.follo-home-code-modal-content {

    display: flex !important;

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

    width: 100% !important;

    margin: 0 !important;
}


/* =========================================================
   EXPANDED QR
========================================================= */

#follo-home-code-modal
.follo-home-expanded-qr {

    display: block !important;

    width: 340px !important;
    height: 340px !important;

    max-width: 74vw !important;
    max-height: 74vw !important;

    margin:
        0
        auto !important;
}


/* =========================================================
   EXPANDED BARCODE
========================================================= */

#follo-home-code-modal
.follo-home-expanded-barcode {

    display: flex !important;

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

    width: 100% !important;

    min-height: 170px !important;

    padding:
        20px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

    background:
        #ffffff !important;
}


#follo-home-code-modal
.follo-home-expanded-barcode
.follo-barcode-lines {

    display: flex !important;

    align-items: stretch !important;

    width: auto !important;
    height: 130px !important;

    margin: 0 auto !important;

    transform:
        scaleX(1.05);

    transform-origin:
        center;
}


#follo-home-code-modal
.follo-home-expanded-barcode
.follo-barcode-black {

    height:
        130px !important;

    background:
        #000000 !important;
}


#follo-home-code-modal
.follo-home-expanded-barcode
.follo-barcode-space {

    height:
        130px !important;

    background:
        #ffffff !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

#follo-home-code-modal
.follo-home-code-modal-close {

    position: absolute !important;

    top: 11px !important;
    right: 11px !important;

    width: 40px !important;
    height: 40px !important;

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

    border: 0 !important;

    border-radius:
        50% !important;

    background:
        #eeeeee !important;

    color:
        #222222 !important;

    font-size:
        27px !important;

    line-height:
        40px !important;

    cursor:
        pointer !important;
}


#follo-home-code-modal
.follo-home-code-modal-help {

    margin-top:
        17px !important;

    color:
        #68737a !important;

    font-size:
        12px !important;

    line-height:
        18px !important;
}


#follo-home-code-modal
.follo-home-connect-button {

    display:
        inline-block !important;

    margin-top:
        16px !important;

    padding:
        11px
        26px !important;

    color:
        #ffffff !important;

    background:
        #293137 !important;

    border-radius:
        8px !important;

    text-decoration:
        none !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


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

@media (max-width: 600px) {

    .follo-home-identity {

        grid-template-columns:
            minmax(0, 1fr)
            52px
            52px;

        gap:
            2px
            8px;

        margin-bottom:
            25px;

        padding:
            16px;

        border-radius:
            14px;
    }


    .follo-home-welcome-label {

        font-size:
            16px;
    }


    .follo-home-welcome-name {

        font-size:
            16px;
    }


    .follo-home-code-button {

        width:
            52px !important;

        height:
            52px !important;

        border-radius:
            12px !important;
    }


    .follo-home-code-help {

        display:
            none;
    }

}


/* =========================================================
   FOLLO HOMEPAGE BARCODE + QR ACTION ICONS
   FINAL PROFESSIONAL OVERRIDE
   PUT AT VERY BOTTOM OF custom.css
========================================================= */


/* ---------------------------------------------------------
   RIGHT-SIDE ACTION BUTTONS
--------------------------------------------------------- */

.follo-home-identity
button.follo-home-code-action {

    position: relative !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    width: 58px !important;

    height: 58px !important;

    min-width: 58px !important;

    min-height: 58px !important;

    max-width: 58px !important;

    max-height: 58px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(255,255,255,0.18) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.07) 48%,
            rgba(0,0,0,0.10) 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 7px 18px rgba(0,0,0,0.20) !important;

    color: #ffffff !important;

    cursor: pointer !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* glossy highlight */

.follo-home-identity
button.follo-home-code-action::before {

    content: "" !important;

    position: absolute !important;

    top: 4px !important;

    left: 6px !important;

    right: 6px !important;

    height: 22px !important;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.16),
            rgba(255,255,255,0)
        ) !important;

    pointer-events: none !important;
}


/* hover */

.follo-home-identity
button.follo-home-code-action:hover {

    transform:
        translateY(-2px) !important;

    border-color:
        rgba(255,255,255,0.34) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.22),
            rgba(255,255,255,0.10) 50%,
            rgba(0,0,0,0.08)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 10px 24px rgba(0,0,0,0.25) !important;
}


/* ---------------------------------------------------------
   COMPLETELY HIDE THE WORDS "BARCODE" / "QR CODE"
--------------------------------------------------------- */

.follo-home-identity
.follo-home-action-label {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    margin: -1px !important;

    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;

    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   BARCODE ICON
========================================================= */

.follo-home-identity
.follo-home-barcode-icon {

    position: relative !important;

    z-index: 3 !important;

    display: block !important;

    flex: none !important;

    width: 34px !important;

    height: 30px !important;

    margin: 0 !important;

    padding: 0 !important;

    background:
        repeating-linear-gradient(
            90deg,

            #ffffff 0px,
            #ffffff 2px,

            transparent 2px,
            transparent 4px,

            #ffffff 4px,
            #ffffff 7px,

            transparent 7px,
            transparent 9px,

            #ffffff 9px,
            #ffffff 10px,

            transparent 10px,
            transparent 13px
        ) !important;

    border: 0 !important;

    border-radius: 1px !important;

    filter:
        drop-shadow(
            0 1px 1px rgba(0,0,0,0.40)
        ) !important;
}


/* =========================================================
   QR ICON
   HIDE REAL MEMBER QR IN THE SMALL BUTTON
========================================================= */

.follo-home-identity
.follo-home-qr-icon {

    position: relative !important;

    z-index: 3 !important;

    display: block !important;

    flex: none !important;

    width: 34px !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 0 !important;

    border-radius: 4px !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,0.30) !important;
}


/*
 * Do not display the actual QR image
 * as the tiny button icon.
 */
.follo-home-identity
.follo-home-qr-icon img {

    display: none !important;
}


/* QR finder boxes */

.follo-home-identity
.follo-home-qr-icon::before {

    content: "" !important;

    position: absolute !important;

    inset: 3px !important;

    background:

        /* top left */
        linear-gradient(#293137,#293137)
            0 0 / 10px 10px no-repeat,

        linear-gradient(#ffffff,#ffffff)
            2px 2px / 6px 6px no-repeat,

        linear-gradient(#293137,#293137)
            4px 4px / 2px 2px no-repeat,


        /* top right */
        linear-gradient(#293137,#293137)
            18px 0 / 10px 10px no-repeat,

        linear-gradient(#ffffff,#ffffff)
            20px 2px / 6px 6px no-repeat,

        linear-gradient(#293137,#293137)
            22px 4px / 2px 2px no-repeat,


        /* bottom left */
        linear-gradient(#293137,#293137)
            0 18px / 10px 10px no-repeat,

        linear-gradient(#ffffff,#ffffff)
            2px 20px / 6px 6px no-repeat,

        linear-gradient(#293137,#293137)
            4px 22px / 2px 2px no-repeat,


        /* centre/details */
        linear-gradient(#293137,#293137)
            14px 13px / 4px 4px no-repeat,

        linear-gradient(#293137,#293137)
            20px 13px / 3px 7px no-repeat,

        linear-gradient(#293137,#293137)
            13px 20px / 7px 3px no-repeat,

        linear-gradient(#293137,#293137)
            22px 22px / 5px 5px no-repeat,

        linear-gradient(#293137,#293137)
            16px 25px / 3px 3px no-repeat !important;

    pointer-events: none !important;
}


/* =========================================================
   TOOLTIP
========================================================= */

.follo-home-identity
button.follo-home-code-action::after {

    position: absolute !important;

    left: 50% !important;

    bottom: -34px !important;

    z-index: 1000 !important;

    transform:
        translateX(-50%)
        translateY(-3px) !important;

    padding:
        5px 8px !important;

    color:
        #ffffff !important;

    background:
        rgba(12,16,19,0.96) !important;

    border:
        1px solid rgba(255,255,255,0.10) !important;

    border-radius:
        6px !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.28) !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;

    line-height:
        14px !important;

    white-space:
        nowrap !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease !important;
}


.follo-home-identity
button.follo-home-barcode-button::after {

    content:
        "Show Barcode" !important;
}


.follo-home-identity
button.follo-home-qr-button::after {

    content:
        "Show QR Code" !important;
}


.follo-home-identity
button.follo-home-code-action:hover::after {

    opacity: 1 !important;

    visibility: visible !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}


/* =========================================================
   SPACE BETWEEN ICONS
========================================================= */

.follo-home-identity
.follo-home-barcode-button {

    justify-self: end !important;
}


.follo-home-identity
.follo-home-qr-button {

    justify-self: end !important;
}


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

@media (max-width: 600px) {

    .follo-home-identity
    button.follo-home-code-action {

        width: 50px !important;

        height: 50px !important;

        min-width: 50px !important;

        min-height: 50px !important;

        max-width: 50px !important;

        max-height: 50px !important;

        border-radius:
            12px !important;
    }


    .follo-home-identity
    .follo-home-barcode-icon {

        width:
            29px !important;

        height:
            26px !important;
    }


    .follo-home-identity
    .follo-home-qr-icon {

        width:
            30px !important;

        height:
            30px !important;
    }


    .follo-home-identity
    button.follo-home-code-action::after {

        display:
            none !important;
    }

}

/* =========================================================
   FOLLO HOMEPAGE ID LABEL
   FORCE "YOUR ID:" TO DISPLAY
========================================================= */

.follo-home-identity
.follo-home-id {

    display: flex !important;

    align-items: baseline !important;

    flex-wrap: wrap !important;

    gap: 5px !important;

    margin: 0 !important;

    padding: 0 !important;
}


.follo-home-identity
.follo-home-id-label {

    display: inline !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #9eabb2 !important;

    font-size: 11px !important;

    font-weight: 500 !important;

    line-height: 18px !important;
}


.follo-home-identity
.follo-home-id-number {

    display: inline !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #dce3e6 !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 18px !important;

    letter-spacing: 0.5px !important;
}


/* =========================================================
   FOLLO LOGGED-IN HOMEPAGE
   COMPLETE MOBILE / TABLET APP LAYOUT FIX
   ---------------------------------------------------------
   Fixes:
   - Featured Apps overflow
   - FOLLO Apps overflow
   - My Apps overflow
   - Portrait phones
   - Landscape phones
   - Pixel 3 XL
   - View More / View Less spacing
   - Fixed footer covering apps
   - Long app names
   ========================================================= */


/* =========================================================
   1. TABLET + MOBILE
   Includes landscape phones
========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------------------
       KEEP PAGE CONTENT INSIDE SCREEN
    ----------------------------------------------------- */

    body.page-id-123,
    body.page-id-178 {

        overflow-x: hidden !important;
    }


    body.page-id-123 #page-container,
    body.page-id-178 #page-container,

    body.page-id-123 #main-content,
    body.page-id-178 #main-content,

    body.page-id-123 .entry-content,
    body.page-id-178 .entry-content {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        overflow-x: hidden !important;
    }


    /* -----------------------------------------------------
       DIVI ROW SAFETY
    ----------------------------------------------------- */

    body.page-id-123 .et_pb_row,
    body.page-id-178 .et_pb_row {

        width: 90% !important;

        max-width: 1080px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       APP GRID
       Landscape phones/tablets = 4 columns
    ===================================================== */

    .follo-app-grid {

        display: grid !important;

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

        column-gap: 20px !important;

        row-gap: 30px !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin:
            0
            auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       INDIVIDUAL APP
    ----------------------------------------------------- */

    .follo-app {

        position: relative !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    /* -----------------------------------------------------
       APP CIRCLE
    ----------------------------------------------------- */

    .follo-app .app-circle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 82px !important;

        height: 82px !important;

        min-width: 82px !important;

        min-height: 82px !important;

        max-width: 82px !important;

        max-height: 82px !important;

        flex:
            0 0 82px !important;

        margin:
            0
            auto
            10px !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       APP LOGO
    ----------------------------------------------------- */

    .follo-app
    .app-circle
    img {

        display: block !important;

        width: 44px !important;

        height: 44px !important;

        max-width: 44px !important;

        max-height: 44px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


    /* -----------------------------------------------------
       APP NAME
    ----------------------------------------------------- */

    .follo-app
    .app-name {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding:
            0
            3px !important;

        box-sizing: border-box !important;

        font-size: 12px !important;

        line-height: 16px !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;

        word-break: normal !important;
    }


    /* =====================================================
       FEATURED APPS CARD
    ===================================================== */

    .follo-featured-section {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        padding:
            26px
            22px
            30px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    .follo-featured-section
    .featured-subtitle {

        margin-bottom:
            28px !important;
    }


    /* =====================================================
       VIEW MORE / VIEW LESS
    ===================================================== */

    .follo-featured-section
    .featured-view-all-wrap {

        display: block !important;

        clear: both !important;

        width: 100% !important;

        max-width: 100% !important;

        margin:
            0 !important;

        padding:
            40px
            0
            6px !important;

        box-sizing: border-box !important;

        text-align: left !important;
    }


    .follo-featured-section
    .featured-toggle-button {

        display: inline-flex !important;

        position: relative !important;

        z-index: 2 !important;

        margin: 0 !important;
    }


    /* =====================================================
       FOLLO APPS
    ===================================================== */

    .follo-apps-section {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding-left:
            20px !important;

        padding-right:
            20px !important;

        padding-bottom:
            45px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =====================================================
       MY APPS
    ===================================================== */

    .my-apps-grid {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

        padding-bottom:
            60px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =====================================================
       HEADERS / ACTION BUTTONS
    ===================================================== */

    .follo-section-header {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        flex-wrap: wrap !important;

        gap: 12px !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .app-section-title {

        max-width: 100% !important;

        overflow-wrap: anywhere !important;
    }

}



/* =========================================================
   2. NORMAL PORTRAIT PHONES
   3 APPS PER ROW
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       APP GRID
    ===================================================== */

    .follo-app-grid {

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

        column-gap:
            12px !important;

        row-gap:
            28px !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0
            auto !important;

        padding:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /* -----------------------------------------------------
       APP CIRCLE
    ----------------------------------------------------- */

    .follo-app
    .app-circle {

        width:
            72px !important;

        height:
            72px !important;

        min-width:
            72px !important;

        min-height:
            72px !important;

        max-width:
            72px !important;

        max-height:
            72px !important;

        flex:
            0 0 72px !important;

        margin-bottom:
            9px !important;
    }


    /* -----------------------------------------------------
       APP IMAGE
    ----------------------------------------------------- */

    .follo-app
    .app-circle
    img {

        width:
            40px !important;

        height:
            40px !important;

        max-width:
            40px !important;

        max-height:
            40px !important;
    }


    /* -----------------------------------------------------
       APP NAME
    ----------------------------------------------------- */

    .follo-app
    .app-name {

        font-size:
            12px !important;

        line-height:
            16px !important;
    }


    /* =====================================================
       FEATURED APPS
    ===================================================== */

    .follo-featured-section {

        padding:
            22px
            16px
            30px !important;

        border-radius:
            18px !important;
    }


    .follo-featured-section
    .featured-subtitle {

        margin-bottom:
            26px !important;

        font-size:
            13px !important;

        line-height:
            18px !important;
    }


    /* -----------------------------------------------------
       IMPORTANT:
       LARGE GAP BEFORE VIEW MORE
    ----------------------------------------------------- */

    .follo-featured-section
    .featured-view-all-wrap {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        margin:
            0 !important;

        padding:
            44px
            0
            8px !important;

        box-sizing:
            border-box !important;

        text-align:
            left !important;
    }


    /* =====================================================
       SECTION TITLES
    ===================================================== */

    .app-section-title {

        font-size:
            24px !important;

        line-height:
            30px !important;
    }


    /* =====================================================
       MY APPS BUTTONS
    ===================================================== */

    .follo-add-app-button,
    .follo-remove-app-button,
    .follo-confirm-remove-button {

        padding:
            9px
            16px !important;

        font-size:
            13px !important;
    }


    /* =====================================================
       VERY IMPORTANT:
       FOOTER MUST NOT COVER CONTENT ON MOBILE
    ===================================================== */

    body.page-id-123 #main-footer,
    body.page-id-178 #main-footer {

        position:
            static !important;

        left:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        width:
            100% !important;

        margin-top:
            45px !important;

        z-index:
            auto !important;
    }


    body.page-id-123 #footer-bottom,
    body.page-id-178 #footer-bottom {

        height:
            auto !important;

        min-height:
            48px !important;

        padding:
            14px
            12px !important;

        box-sizing:
            border-box !important;
    }


    body.page-id-123 #footer-bottom .container,
    body.page-id-178 #footer-bottom .container {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        justify-content:
            center !important;
    }


    body.page-id-123 #footer-info,
    body.page-id-178 #footer-info {

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        text-align:
            center !important;

        font-size:
            11px !important;

        line-height:
            17px !important;
    }


    /*
     * Fixed footer is gone on mobile,
     * therefore huge desktop bottom padding is unnecessary.
     */

    body.page-id-123 #main-content,
    body.page-id-178 #main-content {

        padding-bottom:
            30px !important;
    }


    /* =====================================================
       FOLLO APPS / MY APPS MOBILE SPACING
    ===================================================== */

    .follo-apps-section {

        padding-left:
            14px !important;

        padding-right:
            14px !important;

        padding-bottom:
            38px !important;
    }


    .my-apps-grid {

        padding-bottom:
            35px !important;
    }


    .follo-section-header {

        margin-top:
            55px !important;

        margin-bottom:
            24px !important;
    }


    /*
     * Old desktop spacing is 125px.
     * Reduce it on a phone.
     */

    .my-apps-grid
    + .app-section-title {

        margin-top:
            55px !important;
    }

}



/* =========================================================
   3. SMALL PHONES
   2 APPS PER ROW
========================================================= */

@media (max-width: 430px) {

    .follo-app-grid {

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

        column-gap:
            18px !important;

        row-gap:
            26px !important;
    }


    .follo-app
    .app-circle {

        width:
            74px !important;

        height:
            74px !important;

        min-width:
            74px !important;

        min-height:
            74px !important;

        max-width:
            74px !important;

        max-height:
            74px !important;

        flex:
            0 0 74px !important;
    }


    .follo-app
    .app-circle
    img {

        width:
            41px !important;

        height:
            41px !important;
    }


    .follo-featured-section {

        padding:
            20px
            14px
            28px !important;
    }


    .follo-featured-section
    .featured-view-all-wrap {

        padding-top:
            40px !important;
    }

}



/* =========================================================
   4. LANDSCAPE PHONES
   Prevent 6 oversized desktop-style apps
========================================================= */

@media
    (orientation: landscape)
    and (max-width: 950px) {

    .follo-app-grid {

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

        column-gap:
            18px !important;

        row-gap:
            28px !important;

        width:
            100% !important;

        max-width:
            100% !important;
    }


    .follo-app
    .app-circle {

        width:
            70px !important;

        height:
            70px !important;

        min-width:
            70px !important;

        min-height:
            70px !important;

        max-width:
            70px !important;

        max-height:
            70px !important;

        flex:
            0 0 70px !important;
    }


    .follo-app
    .app-circle
    img {

        width:
            38px !important;

        height:
            38px !important;
    }


    .follo-app
    .app-name {

        font-size:
            11px !important;

        line-height:
            15px !important;
    }


    /*
     * Landscape screenshots are especially short,
     * so never leave the footer fixed.
     */

    body.page-id-123 #main-footer,
    body.page-id-178 #main-footer {

        position:
            static !important;

        bottom:
            auto !important;

        margin-top:
            40px !important;
    }


    body.page-id-123 #main-content,
    body.page-id-178 #main-content {

        padding-bottom:
            25px !important;
    }

}


/* =========================================================
   FOLLO MOBILE FOOTER
   FORCE COPYRIGHT PERFECTLY CENTERED
========================================================= */

@media (max-width: 767px) {

    body.page-id-123 #main-footer,
    body.page-id-178 #main-footer {

        width: 100% !important;

        text-align: center !important;
    }


    body.page-id-123 #footer-bottom,
    body.page-id-178 #footer-bottom {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        min-height: 48px !important;

        margin: 0 !important;

        padding: 12px 15px !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    body.page-id-123 #footer-bottom .container,
    body.page-id-178 #footer-bottom .container {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    body.page-id-123 #footer-info,
    body.page-id-178 #footer-info {

        display: block !important;

        float: none !important;

        clear: both !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        text-align: center !important;

        font-size: 11px !important;

        line-height: 18px !important;
    }


    body.page-id-123 #footer-info *,
    body.page-id-178 #footer-info * {

        float: none !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        text-align: center !important;
    }

}

/* =========================================================
   FOLLO MAIN HOMEPAGE
   MOBILE FOOTER COPYRIGHT - TRUE CENTER
   Works logged in OR logged out
========================================================= */

@media (max-width: 767px) {

    /*
     * Main site footer.
     * Do not depend on logged-in page IDs.
     */
    body.home #main-footer,
    body.page-id-75 #main-footer {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: center !important;
    }


    body.home #footer-bottom,
    body.page-id-75 #footer-bottom {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        min-height: 48px !important;

        margin: 0 !important;

        padding: 12px 15px !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    body.home #footer-bottom .container,
    body.page-id-75 #footer-bottom .container {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    /*
     * THIS is the important override.
     *
     * Your older CSS applies:
     * margin-left: 50px !important;
     *
     * We must explicitly cancel it.
     */
    body.home #footer-info,
    body.page-id-75 #footer-info {

        display: block !important;

        float: none !important;

        clear: both !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;

        font-size: 11px !important;

        line-height: 18px !important;
    }


    body.home #footer-info a,
    body.page-id-75 #footer-info a {

        display: inline !important;

        float: none !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: center !important;
    }

}

/* =========================================================
   FOLLO LOGIN PAGE
   MOBILE LANDSCAPE SCROLL / FULL CONTENT FIX

   Fixes:
   - Landscape page being cut off
   - Cannot scroll
   - Google login not visible
   - Create Account not visible
   - Footer covering content

   Login Page ID: 75
========================================================= */


/* =========================================================
   LANDSCAPE PHONES
========================================================= */

@media
    (orientation: landscape)
    and (max-width: 950px) {

    /* -----------------------------------------------------
       ALLOW THE PAGE TO GROW + SCROLL
    ----------------------------------------------------- */

    html {

        height: auto !important;

        min-height: 100% !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;
    }


    body.page-id-75 {

        height: auto !important;

        min-height: 100vh !important;
        min-height: 100svh !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* -----------------------------------------------------
       PAGE CONTAINER
    ----------------------------------------------------- */

    body.page-id-75
    #page-container {

        height: auto !important;

        min-height: 100vh !important;
        min-height: 100svh !important;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       MAIN CONTENT
    ----------------------------------------------------- */

    body.page-id-75
    #main-content {

        position: relative !important;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;

        padding-bottom: 30px !important;
    }


    /* =====================================================
       IMPORTANT:
       REMOVE FULL-SCREEN FLEX CENTERING IN LANDSCAPE
    ===================================================== */

    body.page-id-75
    .et_pb_section {

        display: block !important;

        align-items: initial !important;

        justify-content: initial !important;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;

        padding-top: 20px !important;

        padding-bottom: 25px !important;
    }


    body.page-id-75
    .et_pb_section:first-child {

        display: block !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       DIVI INNER CONTENT
    ----------------------------------------------------- */

    body.page-id-75
    .et-l,

    body.page-id-75
    .et_builder_inner_content,

    body.page-id-75
    article,

    body.page-id-75
    .entry-content {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       DIVI ROW
    ----------------------------------------------------- */

    body.page-id-75
    .et_pb_row {

        position: relative !important;

        width: 88% !important;

        max-width: 1000px !important;

        height: auto !important;

        min-height: 0 !important;

        margin-left: auto !important;

        margin-right: auto !important;

        overflow: visible !important;
    }


    /* =====================================================
       LOGIN CARD
       Let the card use normal document flow
    ===================================================== */

    body.page-id-75
    .et_pb_login {

        position: relative !important;

        width: 100% !important;

        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        margin-top: 0 !important;

        margin-bottom: 22px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       LOGIN INPUTS
    ----------------------------------------------------- */

    body.page-id-75
    .et_pb_login
    input[type="text"],

    body.page-id-75
    .et_pb_login
    input[type="password"] {

        width: 100% !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       GOOGLE LOGIN
       Make sure it stays in normal page flow
    ===================================================== */

    body.page-id-75
    .nsl-container,

    body.page-id-75
    .nsl-container-block,

    body.page-id-75
    .nsl-container-buttons {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        margin-top: 20px !important;

        margin-bottom: 20px !important;

        overflow: visible !important;
    }


    body.page-id-75
    .nsl-container-buttons
    > a {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;
    }


    /* =====================================================
       CREATE ACCOUNT AREA
    ===================================================== */

    body.page-id-75
    .register-link {

        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        margin-top: 22px !important;

        margin-bottom: 25px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       FOOTER
       DO NOT FIX IT OVER THE CONTENT IN LANDSCAPE
    ===================================================== */

    body.page-id-75
    #main-footer {

        position: static !important;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        width: 100% !important;

        height: auto !important;

        margin: 20px 0 0 !important;

        z-index: auto !important;
    }


    body.page-id-75
    #footer-bottom {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: auto !important;

        min-height: 48px !important;

        margin: 0 !important;

        padding:
            12px
            15px !important;

        box-sizing: border-box !important;
    }


    body.page-id-75
    #footer-bottom
    .container {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }


    body.page-id-75
    #footer-info {

        float: none !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: center !important;

        font-size: 11px !important;

        line-height: 17px !important;
    }

}

/* =========================================================
   FOLLO LOGIN PAGE
   LANDSCAPE FOOTER + BOTTOM SPACING FIX
   Page ID: 75
========================================================= */

@media
    (orientation: landscape)
    and (max-width: 950px) {

    /* -----------------------------------------------------
       STOP LOGIN PAGE FROM CREATING HUGE EMPTY SPACE
    ----------------------------------------------------- */

    body.page-id-75,
    body.page-id-75 #page-container,
    body.page-id-75 #main-content,
    body.page-id-75 article,
    body.page-id-75 .entry-content,
    body.page-id-75 .et-l,
    body.page-id-75 .et_builder_inner_content {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       DIVI SECTIONS MUST END AFTER THEIR CONTENT
    ----------------------------------------------------- */

    body.page-id-75 .et_pb_section,
    body.page-id-75 .et_pb_section:first-child {

        display: block !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       LAST LOGIN SECTION
       GIVE IT NORMAL BOTTOM SPACE
    ----------------------------------------------------- */

    body.page-id-75
    .et_pb_section:last-of-type {

        padding-bottom: 30px !important;

        margin-bottom: 0 !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    body.page-id-75 #main-footer {

        position: relative !important;

        display: block !important;

        clear: both !important;

        float: none !important;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #000000 !important;

        z-index: 10 !important;
    }


    /* -----------------------------------------------------
       FOOTER BOTTOM BAR
    ----------------------------------------------------- */

    body.page-id-75 #footer-bottom {

        position: relative !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: auto !important;

        min-height: 52px !important;

        margin: 0 !important;

        padding:
            14px
            20px !important;

        box-sizing: border-box !important;

        background: #000000 !important;

        text-align: center !important;
    }


    /* -----------------------------------------------------
       FOOTER INNER CONTAINER
    ----------------------------------------------------- */

    body.page-id-75
    #footer-bottom
    .container {

        position: relative !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        float: none !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        margin: 0 auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    /* -----------------------------------------------------
       COPYRIGHT
    ----------------------------------------------------- */

    body.page-id-75 #footer-info {

        position: static !important;

        display: block !important;

        float: none !important;

        clear: both !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        color: #777777 !important;

        font-size: 11px !important;

        font-weight: 400 !important;

        line-height: 18px !important;

        text-align: center !important;

        white-space: normal !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    body.page-id-75 #footer-info a {

        float: none !important;

        margin: 0 !important;

        padding: 0 !important;

        color: inherit !important;

        text-align: center !important;
    }


    /* -----------------------------------------------------
       REMOVE THE OLD GLOBAL 50PX FOOTER OFFSET
    ----------------------------------------------------- */

    body.page-id-75 #footer-info {

        margin-left: 0 !important;

        margin-right: 0 !important;
    }

}


/* =========================================================
   FOLLO LOGIN PAGE
   LANDSCAPE - REMOVE WHITE GAP ABOVE FOOTER
   KEEP BACKGROUND CONTINUOUS
   Page ID: 75
========================================================= */

@media
    (orientation: landscape)
    and (max-width: 950px) {

    /* -----------------------------------------------------
       PAGE BACKGROUND MUST STAY DARK / CONTINUOUS
    ----------------------------------------------------- */

    body.page-id-75,
    body.page-id-75 #page-container,
    body.page-id-75 #main-content,
    body.page-id-75 article,
    body.page-id-75 .entry-content,
    body.page-id-75 .et-l,
    body.page-id-75 .et_builder_inner_content {

        background-color:
            #000000 !important;

        margin-bottom:
            0 !important;

        padding-bottom:
            0 !important;
    }


    /* -----------------------------------------------------
       KEEP THE LOGIN BACKGROUND SECTION TOUCHING FOOTER
    ----------------------------------------------------- */

    body.page-id-75
    .et_pb_section:last-of-type {

        margin-bottom:
            0 !important;

        padding-bottom:
            35px !important;

        background-color:
            #000000 !important;
    }


    /* -----------------------------------------------------
       REMOVE EXTRA GAP AFTER CREATE ACCOUNT
    ----------------------------------------------------- */

    body.page-id-75
    .register-link {

        margin-bottom:
            20px !important;
    }


    /* -----------------------------------------------------
       FOOTER MUST START IMMEDIATELY AFTER CONTENT
    ----------------------------------------------------- */

    body.page-id-75
    #main-footer {

        position:
            relative !important;

        display:
            block !important;

        clear:
            both !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            #000000 !important;
    }


    body.page-id-75
    #footer-bottom {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            52px !important;

        height:
            auto !important;

        margin:
            0 !important;

        padding:
            14px 20px !important;

        box-sizing:
            border-box !important;

        background:
            #000000 !important;
    }


    /* -----------------------------------------------------
       TRUE CENTER COPYRIGHT
    ----------------------------------------------------- */

    body.page-id-75
    #footer-bottom
    .container {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        text-align:
            center !important;
    }


    body.page-id-75
    #footer-info {

        display:
            block !important;

        float:
            none !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        color:
            #777777 !important;

        text-align:
            center !important;

        font-size:
            11px !important;

        line-height:
            18px !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }

}

/* =========================================================
   FOLLO FINAL MOBILE + DARK THEME FIXES
   Reviewed / cleaned version
   Keep this section at the VERY BOTTOM of custom.css.

   Fixes:
   1. Featured Apps View More / View Less spacing.
   2. Homepage barcode / QR visibility in dark theme.
   3. Homepage helper text visible on mobile.
   4. FOLLO Apps / My Apps bottom-strip artifact.
   5. BuddyPress / WordPress admin-bar child menus on mobile.
   6. Dark-theme contrast and card separation.

   IMPORTANT:
   JavaScript must NOT be placed inside custom.css.
========================================================= */


/* =========================================================
   1. FEATURED APPS
   Give the final app row breathing room before the toggle.
   Uses the selectors already present in this stylesheet.
========================================================= */

.follo-featured-section .follo-app-grid {
    margin-bottom: 0 !important;
}

.follo-featured-section .featured-view-all-wrap {
    display: block !important;
    clear: both !important;

    /* The toggle wrapper is inside the app CSS grid.
       Force it onto its own full-width row. */
    grid-column: 1 / -1 !important;

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

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

    box-sizing: border-box !important;
    text-align: left !important;
}

.follo-featured-section .featured-toggle-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .follo-featured-section .follo-app-grid {
        row-gap: 30px !important;
    }

    .follo-featured-section .featured-view-all-wrap {
        grid-column: 1 / -1 !important;
        padding-top: 48px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 430px) {
    .follo-featured-section .featured-view-all-wrap {
        grid-column: 1 / -1 !important;
        padding-top: 48px !important;
    }
}


/* =========================================================
   2. HOMEPAGE IDENTITY CARD
   Better dark-theme contrast without making the page black.
========================================================= */

.follo-home-identity {
    background:
        linear-gradient(
            135deg,
            #364149 0%,
            #2b343a 100%
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.follo-home-welcome,
.follo-home-welcome-label,
.follo-home-welcome-name {
    color: #f7f9fa !important;
}

.follo-home-id-number,
.follo-home-id,
.follo-home-id-label {
    color: #cbd3d8 !important;
}


/* =========================================================
   3. "TAP THE BARCODE OR QR..." HELP TEXT
   The earlier mobile rule hides this at <= 600px.
   This final override intentionally restores it.
========================================================= */

.follo-home-code-help {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin: 6px 0 0 !important;

    color: #b7c1c8 !important;

    font-size: 11px !important;
    line-height: 16px !important;
}

@media (max-width: 600px) {
    .follo-home-code-help {
        display: block !important;

        grid-column: 1 / -1 !important;
        grid-row: auto !important;

        margin-top: 10px !important;

        font-size: 11px !important;
        line-height: 16px !important;
    }
}


/* =========================================================
   4. BARCODE + QR ACTION BUTTONS
   Improve visibility and tap feedback.
========================================================= */

.follo-home-identity button.follo-home-code-action,
.follo-home-code-button {
    border:
        1px solid rgba(255, 255, 255, 0.18) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.07) 55%,
            rgba(0, 0, 0, 0.08) 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.20) !important;
}

.follo-home-identity button.follo-home-code-action:active,
.follo-home-code-button:active {
    background:
        rgba(255, 255, 255, 0.16) !important;

    transform:
        translateY(1px) !important;
}


/* =========================================================
   5. BARCODE VISIBILITY
   Keep every scannable barcode on a true white surface.
   Do not invert barcode colors in dark mode.
========================================================= */

/* Admin / BuddyPress member card barcode */
#wpadminbar #follo-member-card .follo-member-barcode-wrap,
#wpadminbar #follo-member-card .follo-barcode-lines {
    background: #ffffff !important;
}

#wpadminbar #follo-member-card .follo-barcode-black {
    background: #000000 !important;
}

#wpadminbar #follo-member-card .follo-barcode-space {
    background: #ffffff !important;
}


/* Homepage expanded barcode */
#follo-home-code-modal .follo-home-expanded-barcode,
#follo-home-code-modal .follo-home-expanded-barcode .follo-barcode-lines {
    background: #ffffff !important;
}

#follo-home-code-modal
.follo-home-expanded-barcode
.follo-barcode-black {
    background: #000000 !important;
}

#follo-home-code-modal
.follo-home-expanded-barcode
.follo-barcode-space {
    background: #ffffff !important;
}


/* Older / secondary code modal */
#follo-code-modal .follo-expanded-barcode,
#follo-code-modal .follo-expanded-barcode .follo-barcode-lines {
    background: #ffffff !important;
}

#follo-code-modal
.follo-expanded-barcode
.follo-barcode-black {
    background: #000000 !important;
}

#follo-code-modal
.follo-expanded-barcode
.follo-barcode-space {
    background: #ffffff !important;
}


/* =========================================================
   6. QR VISIBILITY
   QR codes also need a true white quiet-zone / background.
========================================================= */

#wpadminbar #follo-member-card .follo-member-qr-wrap,
#wpadminbar #follo-member-card .follo-member-qr,
.follo-home-qr-wrap,
.follo-home-qr,
#follo-home-code-modal .follo-home-expanded-qr,
#follo-code-modal .follo-expanded-qr {
    background: #ffffff !important;
}


/* =========================================================
   7. CODE MODALS
   Keep the surrounding modal dark, but the actual code white.
   This produces clear separation in dark theme.
========================================================= */

#follo-home-code-modal.follo-home-code-modal,
#follo-code-modal.follo-code-modal {
    background:
        rgba(5, 9, 12, 0.90) !important;

    backdrop-filter:
        blur(10px);
    -webkit-backdrop-filter:
        blur(10px);
}

#follo-home-code-modal .follo-home-code-modal-inner {
    background: #171b1e !important;

    border:
        1px solid rgba(255, 255, 255, 0.08) !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.58) !important;
}

#follo-home-code-modal .follo-home-code-modal-title {
    color: #f4f6f7 !important;
}

#follo-home-code-modal .follo-home-code-modal-help {
    color: #aeb9c0 !important;
}

#follo-home-code-modal .follo-home-code-modal-close {
    background: #2b3034 !important;
    color: #ffffff !important;
}

#follo-code-modal .follo-code-modal-inner {
    background: #171b1e !important;

    border:
        1px solid rgba(255, 255, 255, 0.08) !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.58) !important;
}

#follo-code-modal .follo-code-modal-title {
    color: #f4f6f7 !important;
}

#follo-code-modal .follo-code-modal-hint {
    color: #aeb9c0 !important;
}

#follo-code-modal .follo-code-modal-close {
    background: #2b3034 !important;
    color: #ffffff !important;
}


/* =========================================================
   8. REMOVE THE "CURVED STRIP" ARTIFACT
   The original strip is created by:
      .follo-apps-section::after
      .my-apps-grid::after

   Use the real section/grid surfaces instead of fake bottom
   pseudo-elements.
========================================================= */

.follo-apps-section::after,
.my-apps-grid::after {
    content: none !important;
    display: none !important;
}


/* Preserve the rounded bottom directly on the real section. */
.follo-apps-section,
.my-apps-grid {
    border-radius: 0 0 22px 22px !important;
}


/* Make sure the section background itself is continuous. */
.follo-apps-section,
.my-apps-grid {
    background-color: transparent;
}


/* =========================================================
   9. FEATURED APPS APPEARANCE
   IMPORTANT:
   Do NOT override the original Featured Apps colors here.

   The original stylesheet intentionally defines:
       background: #f8f9fb;
       border: 1px solid rgba(0,0,0,0.05);
       box-shadow: 0 12px 30px rgba(0,0,0,.08);

   Keeping that original styling preserves the appearance you
   already had before these mobile/dark-theme fixes.
========================================================= */


/* =========================================================
   10. BUDDYPRESS / WORDPRESS ADMIN-BAR CHILD MENUS
   MOBILE FIX

   The earlier desktop rules open nested menus as LEFT flyouts
   on hover/focus. That pattern is unreliable on touch devices.

   On phones/tablets, place nested BuddyPress menus inline and
   leave them visible. This needs CSS only and avoids hover.
========================================================= */

@media (max-width: 782px) {

    #wpadminbar,
    #wpadminbar .quicklinks,
    #wpadminbar #wp-admin-bar-my-account,
    #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper,
    #wpadminbar #wp-admin-bar-my-account .ab-submenu,
    #wpadminbar #wp-admin-bar-my-account .menupop,
    #wpadminbar #wp-admin-bar-my-account .menupop > .ab-sub-wrapper {
        overflow: visible !important;
    }


    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop {
        height: auto !important;
        min-height: 44px !important;
        overflow: visible !important;
    }


    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop
    > .ab-sub-wrapper {

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 0 4px 16px !important;

        box-sizing: border-box !important;

        transform: none !important;

        background: transparent !important;

        overflow: visible !important;
    }


    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop
    > .ab-sub-wrapper
    > .ab-submenu {

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

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

        background: transparent !important;
    }


    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop
    > .ab-sub-wrapper
    > .ab-submenu
    > li {

        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 40px !important;

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


    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop
    > .ab-sub-wrapper
    > .ab-submenu
    > li
    > .ab-item {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 9px 16px !important;

        box-sizing: border-box !important;

        color: #d7dde1 !important;

        line-height: 22px !important;

        white-space: normal !important;
    }
}


/* =========================================================
   11. MOBILE POLISH
========================================================= */

@media (max-width: 600px) {

    .follo-home-identity {
        row-gap: 6px !important;
    }

    .follo-home-welcome-label,
    .follo-home-welcome-name {
        line-height: 22px !important;
    }

    .follo-home-id-number,
    .follo-home-id,
    .follo-home-id-label {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    #follo-home-code-modal .follo-home-code-modal-inner,
    #follo-code-modal .follo-code-modal-inner {
        width: calc(100vw - 32px) !important;
        max-width: 460px !important;

        padding: 24px 18px !important;

        border-radius: 18px !important;
    }

    #follo-home-code-modal .follo-home-expanded-barcode,
    #follo-code-modal .follo-expanded-barcode {
        padding: 16px !important;

        border-radius: 8px !important;
    }
}



/* =========================================================
   FINAL FEATURED APPS TOGGLE SAFETY OVERRIDE
   The toggle is a child of the Featured Apps grid, so it must
   span every grid column. Without this, it can sit underneath
   the last app icon as though it were another app cell.
========================================================= */

.follo-featured-section .follo-app-grid > .featured-view-all-wrap,
.follo-featured-section .featured-view-all-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding-top: 72px !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
    text-align: left !important;
}

@media (max-width: 600px) {
    .follo-featured-section .follo-app-grid > .featured-view-all-wrap,
    .follo-featured-section .featured-view-all-wrap {
        grid-column: 1 / -1 !important;
        padding-top: 72px !important;
    }
}



/* =========================================================
   FEATURED APPS - DEFINITIVE BUTTON GAP FIX

   The wrapper padding was not affecting the rendered button
   consistently in the actual Featured Apps markup.

   Apply the spacing directly to the View More / View Less
   button instead. This works for both collapsed and expanded
   states, on desktop and mobile.
========================================================= */

.follo-featured-section .featured-view-all-wrap {
    padding-top: 0 !important;
}

.follo-featured-section .featured-toggle-button {
    margin-top: 46px !important;
}

@media (max-width: 768px) {
    .follo-featured-section .featured-view-all-wrap {
        padding-top: 0 !important;
    }

    .follo-featured-section .featured-toggle-button {
        margin-top: 50px !important;
    }
}


/* =========================================================
   END DEFINITIVE FEATURED APPS BUTTON GAP FIX
========================================================= */



/* =========================================================
   FOLLO BUDDYPRESS NESTED MENUS
   DESKTOP + MOBILE RECURSIVE SUBMENU FIX

   Supports:
   Parent
   └── Child
       └── Subchild
           └── Deeper child

   Desktop:
   - Nested flyouts open to the LEFT.
   - Hover/focus works at every depth.

   Mobile:
   - Nested children stay collapsed by default.
   - The existing JavaScript toggles
     .follo-mobile-menu-open on ANY li.menupop.
   - Every depth can expand inline.
========================================================= */


/* =========================================================
   DESKTOP / GENERAL
   Recursive positioning for every nested BuddyPress level.
========================================================= */

#wpadminbar
#wp-admin-bar-my-account
li.menupop {
    position: relative !important;
    overflow: visible !important;
}

#wpadminbar
#wp-admin-bar-my-account
li.menupop
> .ab-sub-wrapper {
    overflow: visible !important;
}


/* Hide nested flyouts until their own row is active. */
#wpadminbar
#wp-admin-bar-my-account
.ab-sub-wrapper
li.menupop
> .ab-sub-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    position: absolute !important;

    top: 0 !important;
    right: 100% !important;
    bottom: auto !important;
    left: auto !important;

    width: 190px !important;
    min-width: 190px !important;
    max-width: none !important;

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

    transform: none !important;

    z-index: 2147483200 !important;
}


/* Show nested flyout on hover/focus at ANY depth. */
#wpadminbar
#wp-admin-bar-my-account
.ab-sub-wrapper
li.menupop:hover
> .ab-sub-wrapper,

#wpadminbar
#wp-admin-bar-my-account
.ab-sub-wrapper
li.menupop:focus-within
> .ab-sub-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Normalize every nested UL. */
#wpadminbar
#wp-admin-bar-my-account
.ab-sub-wrapper
li.menupop
> .ab-sub-wrapper
> .ab-submenu {
    display: block !important;

    position: static !important;

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

    height: auto !important;
    max-height: none !important;

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

    overflow: visible !important;
}


/* Keep nested rows usable. */
#wpadminbar
#wp-admin-bar-my-account
.ab-sub-wrapper
li.menupop
> .ab-sub-wrapper
> .ab-submenu
> li {
    position: relative !important;

    width: 100% !important;

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

    overflow: visible !important;
}


/* =========================================================
   MOBILE
   Recursive inline accordion behavior for every depth.
========================================================= */

@media (max-width: 782px) {

    /*
     * Reset ALL nested flyouts so they live inside the parent
     * dropdown rather than opening off-screen.
     */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    li.menupop
    > .ab-sub-wrapper {

        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 0 4px 16px !important;

        box-sizing: border-box !important;

        transform: none !important;

        background: transparent !important;

        overflow: visible !important;

        z-index: auto !important;
    }


    /*
     * The JavaScript adds .follo-mobile-menu-open to the exact
     * li.menupop that the user tapped. This selector works at
     * every submenu depth.
     */
    #wpadminbar
    #wp-admin-bar-my-account
    li.menupop.follo-mobile-menu-open
    > .ab-sub-wrapper {

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Disable desktop hover-opening on touch layouts.
     * A submenu opens only through the JS open class.
     */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    li.menupop:hover
    > .ab-sub-wrapper,

    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    li.menupop:focus-within
    > .ab-sub-wrapper {

        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }


    /*
     * Keep an actively-open mobile submenu visible even if the
     * row also happens to have :hover or :focus-within.
     */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    li.menupop.follo-mobile-menu-open:hover
    > .ab-sub-wrapper,

    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    li.menupop.follo-mobile-menu-open:focus-within
    > .ab-sub-wrapper {

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Normalize every opened nested UL. */
    #wpadminbar
    #wp-admin-bar-my-account
    li.menupop
    > .ab-sub-wrapper
    > .ab-submenu {

        display: block !important;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

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

        background: transparent !important;

        overflow: visible !important;
    }


    /* Nested rows at every depth. */
    #wpadminbar
    #wp-admin-bar-my-account
    li.menupop
    > .ab-sub-wrapper
    > .ab-submenu
    > li {

        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 40px !important;

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

        overflow: visible !important;
    }


    /* Nested links at every depth. */
    #wpadminbar
    #wp-admin-bar-my-account
    li.menupop
    > .ab-sub-wrapper
    > .ab-submenu
    > li
    > .ab-item {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 9px 16px !important;

        box-sizing: border-box !important;

        line-height: 22px !important;

        white-space: normal !important;
    }


    /*
     * Add a little more indentation for deeper levels so the
     * hierarchy is visually obvious on phones.
     */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    .ab-sub-wrapper {
        padding-left: 18px !important;
    }

    #wpadminbar
    #wp-admin-bar-my-account
    .ab-sub-wrapper
    .ab-sub-wrapper
    .ab-sub-wrapper {
        padding-left: 20px !important;
    }
}


/* =========================================================
   END FOLLO BUDDYPRESS NESTED MENU FIX
========================================================= */



/* =========================================================
   MY APPS - MOBILE REMOVE MODE LAYOUT FIX

   Problem:
   When Remove App mode is active, Add App + Cancel +
   Remove Selected were forced into one crowded row and the
   red X buttons could sit outside the app cells.

   Mobile layout:
   - My Apps title remains on its own row.
   - Action area uses a clean 2-column grid.
   - Remove Selected spans the full row.
   - Delete X stays inside each app cell.
========================================================= */

@media (max-width: 767px) {

    /* Keep title and controls cleanly separated. */
    .follo-section-header {
        display: block !important;
        width: 100% !important;
    }

    .follo-section-header .app-section-title {
        display: block !important;
        width: 100% !important;
        margin: 0 0 22px !important;
    }

    /* Action buttons become their own responsive grid. */
    .follo-app-actions {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 12px !important;

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

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

        box-sizing: border-box !important;
    }

    .follo-app-actions
    .follo-add-app-button,

    .follo-app-actions
    .follo-remove-app-button {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding:
            11px
            14px !important;

        box-sizing: border-box !important;

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

        white-space: nowrap !important;
    }

    /* Confirmation action gets its own full-width row. */
    .follo-app-actions
    .follo-confirm-remove-button {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding:
            12px
            16px !important;

        box-sizing: border-box !important;

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

        white-space: nowrap !important;
    }

    /* Keep each app cell self-contained. */
    .my-apps-grid .follo-app {
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* Move the delete badge inside the app cell. */
    .my-apps-grid
    .follo-remove-single-app {
        top: -6px !important;
        right: 6px !important;

        width: 30px !important;
        height: 30px !important;

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

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

        font-size: 18px !important;
        line-height: 30px !important;

        box-sizing: border-box !important;

        z-index: 10 !important;
    }
}


/* Smaller phones: keep buttons comfortable and readable. */
@media (max-width: 430px) {

    .follo-app-actions {
        gap: 10px !important;
    }

    .follo-app-actions
    .follo-add-app-button,

    .follo-app-actions
    .follo-remove-app-button,

    .follo-app-actions
    .follo-confirm-remove-button {
        font-size: 13px !important;
    }

    .my-apps-grid
    .follo-remove-single-app {
        right: 4px !important;
    }
}


/* =========================================================
   END MY APPS MOBILE REMOVE MODE LAYOUT FIX
========================================================= */


/* =========================================================
   END FOLLO FINAL MOBILE + DARK THEME FIXES
========================================================= */


/* =========================================================
   FOLLO MOBILE BUDDYPRESS CHILD MENU - TAP TO OPEN/CLOSE
   FINAL OVERRIDE

   Requires the companion JavaScript file:
   follo-mobile-child-menu.js

   Why this is needed:
   CSS hover/focus is not a reliable interaction model on touch
   devices. The JS adds/removes .follo-mobile-open on the
   BuddyPress parent row. These rules only affect <= 782px.
========================================================= */

@media (max-width: 782px) {

    /* Keep the account dropdown and nested rows from clipping. */
    #wpadminbar,
    #wpadminbar .quicklinks,
    #wpadminbar #wp-admin-bar-my-account,
    #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper,
    #wpadminbar #wp-admin-bar-my-account .ab-submenu,
    #wpadminbar #wp-admin-bar-my-account .menupop {
        overflow: visible !important;
    }

    /* Parent rows remain normal mobile menu rows. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop {
        position: relative !important;
        height: auto !important;
        min-height: 44px !important;
        overflow: visible !important;
    }

    /* Hide child submenu by default on phones/tablets. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop
    > .ab-sub-wrapper,

    /* Override earlier desktop :hover / :focus-within rules. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop:hover
    > .ab-sub-wrapper,

    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop:focus-within
    > .ab-sub-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* JS-controlled open state. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop.follo-mobile-menu-open
    > .ab-sub-wrapper,

    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop.follo-mobile-menu-open:hover
    > .ab-sub-wrapper,

    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop.follo-mobile-menu-open:focus-within
    > .ab-sub-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 0 4px 20px !important;

        box-sizing: border-box !important;
        transform: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* Child UL itself. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop.follo-mobile-menu-open
    > .ab-sub-wrapper
    > .ab-submenu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

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

        background: transparent !important;
        overflow: visible !important;
    }

    /* Child rows. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop.follo-mobile-menu-open
    > .ab-sub-wrapper
    > .ab-submenu
    > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Child links. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop.follo-mobile-menu-open
    > .ab-sub-wrapper
    > .ab-submenu
    > li
    > .ab-item {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 9px 16px !important;

        box-sizing: border-box !important;

        color: #d7dde1 !important;
        line-height: 22px !important;
        white-space: normal !important;
    }

    /* Give parent rows a clear tap target. */
    #wpadminbar
    #wp-admin-bar-my-account
    .ab-submenu > li.menupop
    > .ab-item {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }
}

/* =========================================================
   END FOLLO MOBILE BUDDYPRESS CHILD MENU FIX
========================================================= */

/* =========================================================
   MY APPS - DEFINITIVE MOBILE DELETE BADGE POSITION

   Anchor the red X to the CENTERED app icon instead of the
   outer grid cell. This prevents the right-most badge from
   drifting toward / beyond the screen edge.
========================================================= */

@media (max-width: 767px) {

    .my-apps-grid
    .follo-app {
        position: relative !important;
        overflow: visible !important;
    }

    .my-apps-grid
    .follo-remove-single-app {

        /* Do NOT position from the right edge of the grid cell. */
        right: auto !important;

        /*
         * The app circle is centered in each cell.
         * Put the X on the upper-right edge of that circle.
         */
        left: calc(50% + 22px) !important;
        top: -8px !important;

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

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

        display: none;

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

        box-sizing: border-box !important;

        border-radius: 50% !important;

        transform: none !important;

        z-index: 20 !important;
    }

    .my-apps-grid.follo-remove-mode
    .follo-remove-single-app {
        display: flex !important;
    }

    .my-apps-grid
    .follo-remove-single-app:hover {
        transform: scale(1.08) !important;
        transform-origin: center center !important;
    }
}


/* Small phones use slightly smaller circles. */
@media (max-width: 430px) {

    .my-apps-grid
    .follo-remove-single-app {
        left: calc(50% + 19px) !important;
        top: -7px !important;
    }
}


/* =========================================================
   END DEFINITIVE MOBILE DELETE BADGE POSITION
========================================================= */

/* =========================================================
   MY APPS - MOBILE REMOVE BADGE CLIPPING FIX

   Root cause:
   An earlier mobile rule sets:
       .my-apps-grid { overflow: hidden !important; }

   That clips the red delete badges whenever they overlap the
   app circle/cell. Keep the badges visible and add a small
   horizontal safety gutter so the outside columns have room.
========================================================= */

@media (max-width: 767px) {

    .my-apps-grid {
        overflow: visible !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        box-sizing: border-box !important;
    }

    /*
     * Because .my-apps-grid is also the app grid, preserve the
     * 3-column mobile layout inside the new safety gutters.
     */
    .my-apps-grid.follo-app-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        column-gap: 12px !important;
    }

    /*
     * Anchor the badge to the centered icon.
     * 72px mobile icon circle = 36px radius.
     * This places the 30px badge partly over the upper-right
     * edge of the circle without pushing it outside the grid.
     */
    .my-apps-grid
    .follo-remove-single-app {
        right: auto !important;
        left: calc(50% + 18px) !important;
        top: -7px !important;

        width: 30px !important;
        height: 30px !important;

        transform: none !important;
    }
}


/* Very small phones use 2 columns and slightly smaller circles. */
@media (max-width: 430px) {

    .my-apps-grid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .my-apps-grid.follo-app-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 18px !important;
    }

    .my-apps-grid
    .follo-remove-single-app {
        left: calc(50% + 17px) !important;
        top: -7px !important;
    }
}


/* =========================================================
   END MY APPS MOBILE REMOVE BADGE CLIPPING FIX
========================================================= */


/* =========================================================
   FOLLO TOP BAR BRAND TEXT
   Properly centered on desktop + mobile
========================================================= */

.follo-admin-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 32px !important;

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

    width: auto !important;
    max-width: none !important;

    overflow: visible !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    text-indent: 0 !important;

    color: #ffffff !important;

    vertical-align: middle !important;
}


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

@media (max-width: 782px) {

    .follo-admin-text {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 46px !important;

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

        font-size: 16px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

}


/* =========================================================
   FOLLO TOP BAR - VERTICAL ALIGNMENT FIX
========================================================= */

/* Move the actual Follo text down slightly */
.follo-admin-text {
    position: relative !important;
    top: 3px !important;
}


/* Mobile */
@media (max-width: 782px) {

    .follo-admin-text {
        top: 4px !important;
    }

}


/* =========================================================
   FOLLO - BUDDYPRESS MODERN UI
========================================================= */


/* ---------------------------------------------------------
   FOLLO HEADER SEARCH
   Clean integrated version for the Follo JS search shell.
   Divi's native expanded search is disabled to avoid conflicts.
--------------------------------------------------------- */

/* Disable Divi's original expanding search overlay. */
.et_search_outer {
    display: none !important;
}

/* Give the text menu a little breathing room before search. */
#top-menu-nav {
    margin-right: 18px !important;
}



/* Hide primary navigation while Follo search is open. */
#top-menu-nav {
    transition:
        opacity .16s ease,
        visibility .16s ease !important;
}

#top-menu-nav.follo-menu-search-open {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Shell created by follo-apps.js. */
.follo-search-shell {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    transform: translateY(-11px) !important;
    z-index: 10000 !important;
}

/* Keep Divi's search trigger compact and fixed in place. */
.follo-search-shell #et_top_search {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #dce1e5 !important;
    border-radius: 999px !important;
    background: #f5f7f9 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
    z-index: 2 !important;
}

.follo-search-shell #et_top_search:hover {
    background: #edf1f4 !important;
    border-color: #cbd3d9 !important;
    transform: none !important;
}

/* Magnifying glass. */
.follo-search-shell #et_search_icon {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.follo-search-shell #et_search_icon:before {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #536471 !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.follo-search-shell #et_top_search:hover #et_search_icon:before {
    color: #0f1419 !important;
}

/* Expanding panel: opens to the LEFT of the fixed search icon. */
.follo-search-panel {
    position: absolute !important;
    top: 0 !important;
    right: calc(100% + 10px) !important;
    width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    transition:
        width .24s ease,
        opacity .15s ease,
        visibility .15s ease !important;
    z-index: 1 !important;
}

.follo-search-shell.follo-search-open .follo-search-panel {
    width: 280px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.follo-search-panel form {
    position: relative !important;
    display: block !important;
    width: 280px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Input. */
.follo-search-panel input[type="search"] {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 42px 0 16px !important;
    box-sizing: border-box !important;
    border: 1px solid #d7dde2 !important;
    border-radius: 999px !important;
    outline: none !important;
    background: #ffffff !important;
    color: #0f1419 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.08) !important;
}

.follo-search-panel input[type="search"]:focus {
    border-color: var(--follo-theme-color, #0f559d) !important;
    box-shadow: 0 0 0 3px rgba(15,85,157,.10) !important;
}

.follo-search-panel input[type="search"]::placeholder {
    color: #87929c !important;
    opacity: 1 !important;
}

/* X close button. */
.follo-search-close {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #687680 !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.follo-search-close:hover {
    background: #edf1f4 !important;
    color: #111111 !important;
}

/* Make sure the expanding panel is not clipped by Divi wrappers. */
#main-header,
#main-header .container,
.et_menu_container {
    overflow: visible !important;
}

/* Mobile: use Divi's mobile menu; hide the desktop Follo search shell. */
@media (max-width: 980px) {
    .follo-search-shell {
        display: none !important;
    }
}


/* ---------------------------------------------------------
   BUDDYPRESS MAIN CONTENT
--------------------------------------------------------- */

body.buddypress #main-content {
    background: #f5f7f9;
}


body.buddypress #main-content > .container {
    width: 100%;
    max-width: 1180px;
    padding: 30px 24px;
}


body.buddypress #left-area {
    width: 100% !important;
    padding-right: 0 !important;
}


/* Remove Divi's line beside the normal sidebar layout */
body.buddypress #main-content .container:before {
    display: none !important;
}


/* ---------------------------------------------------------
   BUDDYPRESS CONTENT CARD
--------------------------------------------------------- */

body.buddypress #buddypress {
    background: #ffffff;

    border: 1px solid #e4e7eb;
    border-radius: 16px;

    padding: 28px;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.04);
}


/* ---------------------------------------------------------
   HEADINGS / LABELS
--------------------------------------------------------- */

body.buddypress #buddypress h1,
body.buddypress #buddypress h2,
body.buddypress #buddypress h3 {
    color: #16181c;
    font-weight: 700;
}


body.buddypress #buddypress label {
    display: block;

    margin-bottom: 8px;

    color: #536471;

    font-size: 14px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   TEXT FIELDS / SELECTS / TEXTAREAS
--------------------------------------------------------- */

body.buddypress #buddypress input[type="text"],
body.buddypress #buddypress input[type="email"],
body.buddypress #buddypress input[type="url"],
body.buddypress #buddypress input[type="password"],
body.buddypress #buddypress input[type="number"],
body.buddypress #buddypress select,
body.buddypress #buddypress textarea {

    width: 100%;

    min-height: 46px;

    padding: 11px 14px;

    border: 1px solid #cfd5da;
    border-radius: 10px;

    background: #ffffff;

    color: #16181c;

    font-size: 15px;

    box-shadow: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


body.buddypress #buddypress textarea {
    min-height: 120px;
    resize: vertical;
}


body.buddypress #buddypress input:focus,
body.buddypress #buddypress select:focus,
body.buddypress #buddypress textarea:focus {

    outline: none;

    border-color: var(--follo-theme-color, #0f559d);

    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--follo-theme-color, #0f559d) 14%, transparent);
}


/* ---------------------------------------------------------
   FILE UPLOAD
--------------------------------------------------------- */

body.buddypress #buddypress input[type="file"] {

    width: 100%;

    padding: 10px;

    border: 1px dashed #cfd5da;
    border-radius: 10px;

    background: #f8fafb;

    color: #536471;
}


body.buddypress #buddypress input[type="file"]::file-selector-button {

    margin-right: 12px;

    padding: 9px 16px;

    border: 0;
    border-radius: 999px;

    background: #eff3f4;

    color: #0f1419;

    font-weight: 700;

    cursor: pointer;
}


body.buddypress #buddypress input[type="file"]::file-selector-button:hover {
    background: #e3e8eb;
}


/* ---------------------------------------------------------
   CHECKBOXES
--------------------------------------------------------- */

body.buddypress #buddypress input[type="checkbox"] {

    width: 18px;
    height: 18px;

    margin-right: 7px;

    accent-color: var(--follo-theme-color, #0f559d);

    vertical-align: middle;
}


/* ---------------------------------------------------------
   RANGE SLIDER
--------------------------------------------------------- */

body.buddypress #buddypress input[type="range"] {

    width: 100%;

    accent-color: var(--follo-theme-color, #0f559d);

    cursor: pointer;
}


/* ---------------------------------------------------------
   PRIMARY BUTTONS
   Facebook / X inspired pill style
--------------------------------------------------------- */

body.buddypress #buddypress button,
body.buddypress #buddypress input[type="submit"],
body.buddypress #buddypress .button,
body.buddypress #buddypress a.button {

    min-height: 42px;

    padding: 10px 20px !important;

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

    background: var(--follo-theme-color, #0f559d) !important;

    color: var(--follo-theme-text, #ffffff) !important;

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

    line-height: 20px !important;

    cursor: pointer;

    box-shadow: none !important;

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


body.buddypress #buddypress button:hover,
body.buddypress #buddypress input[type="submit"]:hover,
body.buddypress #buddypress .button:hover,
body.buddypress #buddypress a.button:hover {

    background: var(--follo-theme-color, #0f559d) !important;

    filter: brightness(0.90);
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   CANCEL / SECONDARY BUTTONS
--------------------------------------------------------- */

body.buddypress #buddypress .button.secondary,
body.buddypress #buddypress button.secondary,
body.buddypress #buddypress .cancel,
body.buddypress #buddypress a.cancel {

    background: #eff3f4 !important;

    color: #0f1419 !important;

    border: 1px solid #d8dde1 !important;
}


body.buddypress #buddypress .button.secondary:hover,
body.buddypress #buddypress button.secondary:hover,
body.buddypress #buddypress .cancel:hover,
body.buddypress #buddypress a.cancel:hover {

    background: #e4e8eb !important;
}


/* ---------------------------------------------------------
   LINKS
--------------------------------------------------------- */

body.buddypress #buddypress a {
    color: #0a66c2;
}


body.buddypress #buddypress a:hover {
    color: #084f96;
}


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

@media (max-width: 767px) {

    body.buddypress #main-content > .container {
        padding: 16px 12px;
    }


    body.buddypress #buddypress {
        padding: 18px 15px;

        border-radius: 12px;
    }


    body.buddypress #buddypress button,
    body.buddypress #buddypress input[type="submit"],
    body.buddypress #buddypress .button {

        min-height: 44px;
    }

}

/* =========================================================
   FOLLO ACTIVITY MEMBER PREVIEW
========================================================= */

body.buddypress #buddypress .bp-member-short-description {
    padding: 24px 28px 26px !important;
    box-sizing: border-box;
}

body.buddypress #buddypress .bp-profile-button {
    margin-top: 18px !important;
    padding: 0 0 4px !important;
}

body.buddypress #buddypress .bp-profile-button .button {
    margin: 0 !important;
}

/* =========================================================
   FOLLO ACTIVITY ACTION BUTTONS
   Comment / Favorite / Delete
========================================================= */

body.buddypress #buddypress .activity-meta.action {
    display: flex !important;
    align-items: center;
    gap: 8px;

    padding: 12px 0 !important;
    margin-top: 14px !important;

    border-top: 1px solid #edf0f2;
}

body.buddypress #buddypress .activity-meta.action .generic-button {
    margin: 0 !important;
}

body.buddypress #buddypress .activity-meta.action .button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 42px !important;
    height: 38px !important;
    min-height: 38px !important;

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

    border: 1px solid #dfe3e6 !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    color: #536471 !important;

    box-shadow: none !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

body.buddypress #buddypress .activity-meta.action .button:hover {
    background: color-mix(
        in srgb,
        var(--follo-theme-color, #0f559d) 9%,
        white
    ) !important;

    color: var(--follo-theme-color, #0f559d) !important;

    border-color: color-mix(
        in srgb,
        var(--follo-theme-color, #0f559d) 25%,
        #dfe3e6
    ) !important;

    transform: translateY(-1px);
}

/* Favorite selected */
body.buddypress #buddypress .activity-meta.action .unfav {
    background: color-mix(
        in srgb,
        var(--follo-theme-color, #0f559d) 12%,
        white
    ) !important;

    color: var(--follo-theme-color, #0f559d) !important;
}

/* Delete stays visually separate */
body.buddypress #buddypress .activity-meta.action .delete-activity:hover {
    background: #fff1f2 !important;
    color: #c62828 !important;
    border-color: #f1c5c8 !important;
}

/* Comment count */
body.buddypress #buddypress .activity-meta.action .comment-count {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   FOLLO SOCIAL PAGE FOLDER
   UPSIDE-DOWN + RIGHT-SIDE OVERLAP VERSION
   ========================================================= */


/* =========================================================
   1. WELCOME CARD
   Keep it above the purple folder
   ========================================================= */

.follo-home-identity {
    position: relative;
    z-index: 3;

    margin-bottom: 0 !important;
}


/* =========================================================
   2. SHORTCODE WRAPPER
   Move folder to RIGHT side
   Pull it slightly upward underneath Welcome card
   ========================================================= */

.follo-social-shortcode-wrap {
    position: relative;
    z-index: 2;

    display: block;

    width: 330px;
    max-width: 100%;

    /*
     * Push folder to the RIGHT side
     */
    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 0 !important;

    /*
     * Slight overlap underneath Welcome box
     */
    transform: translateY(-14px) !important;
}


/* =========================================================
   3. DIVI / WORDPRESS SHORTCODE WRAPPER
   Make containing module full width so margin-left:auto works
   ========================================================= */

.et_pb_code:has(.follo-social-shortcode-wrap),
.et_pb_text:has(.follo-social-shortcode-wrap),
.wp-block-shortcode:has(.follo-social-shortcode-wrap) {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    /*
     * Keep space below folder before Your Follo Apps
     */
    margin-bottom: 55px !important;
}


/* =========================================================
   4. FOLDER LINK
   ========================================================= */

.follo-folder-down {
    position: relative;

    display: block;

    width: 330px;
    max-width: 100%;

    margin: 0 !important;

    /*
     * Bottom padding only exists to make room
     * for the upside-down SOCIAL tab.
     */
    padding: 0 0 28px 0 !important;

    box-sizing: border-box;

    color: #ffffff !important;
    text-decoration: none !important;

    filter:
        drop-shadow(
            0 10px 18px rgba(82, 65, 200, 0.20)
        );

    transition:
        transform .2s ease,
        filter .2s ease;
}


/* =========================================================
   5. MAIN PURPLE FOLDER BODY
   ========================================================= */

.follo-folder-main {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 82px;

    gap: 12px;

    padding: 15px 18px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #6657ed 0%,
            #7357f5 100%
        );

    /*
     * Straight top edge.
     * Rounded bottom corners only.
     */
    border-radius: 0 0 14px 14px;

    overflow: hidden;
}


/* Subtle highlight */

.follo-folder-main::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.09),
            transparent 50%
        );

    pointer-events: none;
}


/* =========================================================
   6. UPSIDE-DOWN BOTTOM TAB
   ========================================================= */

.follo-folder-bottom-tab {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 1;

    display: flex;
    align-items: center;

    width: 112px;
    height: 34px;

    padding-left: 17px;

    box-sizing: border-box;

    background: #6657ed;

    color: rgba(255, 255, 255, 0.82);

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 1.4px;

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


/* Angled tab connection */

.follo-folder-bottom-tab::after {
    content: "";

    position: absolute;

    top: 0;
    right: -31px;

    z-index: -1;

    width: 43px;
    height: 22px;

    background: #6657ed;

    transform: skewX(-35deg);
    transform-origin: top left;

    border-radius: 0 0 8px 0;
}


/* =========================================================
   7. PROFILE ICON
   ========================================================= */

.follo-folder-icon {
    position: relative;
    z-index: 3;

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

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    background: rgba(255, 255, 255, 0.14);

    border-radius: 11px;

    color: #ffffff;
}

.follo-folder-icon svg {
    display: block;

    width: 19px;
    height: 19px;
}


/* =========================================================
   8. TEXT
   ========================================================= */

.follo-folder-text {
    position: relative;
    z-index: 3;

    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
}

.follo-folder-text strong {
    margin: 0;
    padding: 0;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.follo-folder-text span {
    margin: 3px 0 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.80);

    font-size: 11px;
    line-height: 1.25;
}


/* =========================================================
   9. ARROW BUTTON
   ========================================================= */

.follo-folder-arrow {
    position: relative;
    z-index: 3;

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

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    margin: 0;
    padding: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.13);

    color: #ffffff;

    font-size: 19px;
    line-height: 1;

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


/* =========================================================
   10. HOVER
   ========================================================= */

.follo-folder-down:hover {
    transform: translateY(-2px);

    filter:
        drop-shadow(
            0 14px 20px rgba(82, 65, 200, 0.27)
        );

    color: #ffffff !important;
    text-decoration: none !important;
}

.follo-folder-down:hover .follo-folder-arrow {
    transform: translateX(3px);

    background: rgba(255, 255, 255, 0.22);
}


/* =========================================================
   11. LINK STATES
   ========================================================= */

.follo-folder-down:visited,
.follo-folder-down:focus,
.follo-folder-down:active {
    color: #ffffff !important;
    text-decoration: none !important;
}


/* =========================================================
   12. WORDPRESS / DIVI CLEANUP
   ========================================================= */

.follo-social-shortcode-wrap p,
.follo-social-shortcode-wrap a {
    margin-top: 0 !important;
}

.follo-social-shortcode-wrap p:empty {
    display: none !important;

    height: 0 !important;

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


/* =========================================================
   13. TABLET
   Keep folder right-aligned
   ========================================================= */

@media (max-width: 900px) {

    .follo-social-shortcode-wrap {
        width: 320px;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: 0 !important;

        transform: translateY(-12px) !important;
    }

    .follo-folder-down {
        width: 320px;
        max-width: 100%;
    }
}


/* =========================================================
   14. MOBILE
   Center folder instead of forcing far-right
   ========================================================= */

@media (max-width: 480px) {

    .follo-home-identity {
        margin-bottom: 0 !important;
    }

    .follo-social-shortcode-wrap {
        width: 300px;
        max-width: 100%;

        /*
         * Center on small phones
         */
        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        transform: translateY(-12px) !important;
    }

    .follo-folder-down {
        width: 300px;
        max-width: 100%;

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

    .follo-folder-main {
        min-height: 76px;

        padding: 13px 15px;

        border-radius: 0 0 13px 13px;
    }

    .follo-folder-text strong {
        font-size: 13px;
    }

    .follo-folder-text span {
        font-size: 10px;
    }

    .et_pb_code:has(.follo-social-shortcode-wrap),
    .et_pb_text:has(.follo-social-shortcode-wrap),
    .wp-block-shortcode:has(.follo-social-shortcode-wrap) {
        width: 100% !important;

        margin-top: 0 !important;
        padding-top: 0 !important;

        margin-bottom: 50px !important;
    }
}

/* =========================================================
   FOLLO MOBILE — MATCH SOCIAL FOLDER TO IDENTITY CARD WIDTH
   Keep this block LAST so earlier 300px/320px folder rules do not win.
   ========================================================= */
@media (max-width: 600px) {
    .follo-social-shortcode-wrap,
    .follo-folder-down {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .follo-social-shortcode-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .follo-folder-down {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .follo-folder-main {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   FOLLO MY APPS — MODERN CONFIRMATION MODAL
========================================================= */
body.follo-modal-open {
    overflow: hidden !important;
}

.follo-confirm-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    opacity: 0 !important;
    transition: opacity .16s ease !important;
    box-sizing: border-box !important;
}

.follo-confirm-overlay.follo-confirm-visible {
    opacity: 1 !important;
}

.follo-confirm-overlay.follo-confirm-closing {
    opacity: 0 !important;
}

.follo-confirm-dialog {
    position: relative !important;
    width: min(100%, 430px) !important;
    margin: 0 !important;
    padding: 30px 30px 26px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24) !important;
    color: #172033 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transform: translateY(10px) scale(.98) !important;
    transition: transform .18s ease !important;
}

.follo-confirm-visible .follo-confirm-dialog {
    transform: translateY(0) scale(1) !important;
}

.follo-confirm-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 16px !important;
    border-radius: 50% !important;
    background: #fff1f2 !important;
    color: #c93442 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.follo-confirm-dialog h2 {
    margin: 0 0 9px !important;
    padding: 0 !important;
    color: #172033 !important;
    font-size: 23px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.follo-confirm-dialog p {
    max-width: 330px !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

.follo-confirm-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.follo-confirm-actions button,
.follo-confirm-x {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.follo-confirm-actions button {
    min-width: 125px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 650 !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.follo-confirm-cancel {
    border: 1px solid #d8dee7 !important;
    background: #fff !important;
    color: #344054 !important;
}

.follo-confirm-cancel:hover {
    background: #f7f9fc !important;
}

.follo-confirm-danger {
    border: 1px solid #b42332 !important;
    background: #c93442 !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(201, 52, 66, .18) !important;
}

.follo-confirm-danger:hover {
    background: #b42332 !important;
    transform: translateY(-1px) !important;
}

.follo-confirm-actions button:focus-visible,
.follo-confirm-x:focus-visible {
    outline: 3px solid rgba(10, 102, 194, .28) !important;
    outline-offset: 2px !important;
}

.follo-confirm-x {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #8993a4 !important;
    font-size: 25px !important;
    line-height: 1 !important;
}

.follo-confirm-x:hover {
    background: #f2f4f7 !important;
    color: #344054 !important;
}

@media (max-width: 520px) {
    .follo-confirm-overlay {
        padding: 16px !important;
    }

    .follo-confirm-dialog {
        padding: 28px 20px 20px !important;
        border-radius: 16px !important;
    }

    .follo-confirm-actions {
        flex-direction: column-reverse !important;
    }

    .follo-confirm-actions button {
        width: 100% !important;
    }
}

/* ==========================================
   PAGE 75 — TRUE CENTERED FIXED FOOTER
   Keeps footer visible on the full-screen login page
   ========================================== */

body.page-id-75 #main-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999 !important;
}

body.page-id-75 #footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

body.page-id-75 #footer-bottom .container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

body.page-id-75 #footer-info {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

body.page-id-75 #footer-info a {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   FOLLO ADMIN BAR
   SPACE LABEL / COUNTER / ARROW PROPERLY
========================================================= */

/* Main rows: Notifications, Messages, etc. */
#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-item {

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

    /* important: gives label / badge / arrow breathing room */
    column-gap: 12px !important;

    padding-left: 20px !important;
    padding-right: 18px !important;
}


/* BuddyPress numeric badge */
#wpadminbar
#wp-admin-bar-my-account
.ab-item .count,
#wpadminbar
#wp-admin-bar-my-account
.ab-item .ab-label .count,
#wpadminbar
#wp-admin-bar-my-account
.ab-item .notification-count {

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

    margin-left: 10px !important;

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

    padding: 0 6px !important;

    line-height: 20px !important;

    flex: 0 0 auto !important;
}


/* Push submenu arrow away from counter */
#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-item:after {

    margin-left: 12px !important;
}


/* =========================================================
   CHILD FLYOUT
   Unread  3
   Read    0
========================================================= */

#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper
> .ab-submenu
> li
> .ab-item {

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

    /* label left, counter right */
    justify-content: space-between !important;

    gap: 24px !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
}


/* Flyout counter */
#wpadminbar
#wp-admin-bar-my-account
.ab-submenu > li.menupop
> .ab-sub-wrapper
> .ab-submenu
> li
> .ab-item
.count {

    margin-left: auto !important;
}

/* ============================================================
   FOLLO — WP ADMIN ACCOUNT MENU
   FINAL CLEAN OVERRIDE — MATCH LOGGED-IN HOMEPAGE STYLE

   IMPORTANT:
   - WP-ADMIN ONLY
   - Keeps existing profile/avatar/logout header untouched
   - One clean charcoal menu
   - Child menus fly LEFT
   - Removes WordPress/BuddyPress left triangle
   - Adds one aligned right chevron
   ============================================================ */

body.wp-admin #wpadminbar #wp-admin-bar-my-account,
body.wp-admin #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper,
body.wp-admin #wpadminbar #wp-admin-bar-my-account .ab-submenu,
body.wp-admin #wpadminbar #wp-admin-bar-my-account li.menupop,
body.wp-admin #wpadminbar #wp-admin-bar-my-account li.menupop > .ab-sub-wrapper {
    overflow: visible !important;
}

/* Main BuddyPress menu surface only. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu {
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #3f474f !important;
    overflow: visible !important;
}

/* Main menu rows. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #3f474f !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    overflow: visible !important;
}
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li:last-child {
    border-bottom: 0 !important;
}

/* Main labels. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li > .ab-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 0 44px 0 20px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: #d6dce1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 45px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li:hover > .ab-item,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li:focus-within > .ab-item,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.hover > .ab-item {
    background: #46515b !important;
    color: #fff !important;
}

/* CRITICAL: kill the native LEFT Dashicons triangle. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper li.menupop > .ab-item:before,
body.wp-admin #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper li.menupop > .ab-item::before,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress li.menupop > .ab-item:before,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress li.menupop > .ab-item::before {
    content: none !important;
    display: none !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    font-size: 0 !important;
}

/* Remove any icon node used as a submenu arrow, but not regular counters. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress li.menupop > .ab-item > .ab-icon,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress li.menupop > .ab-item > .dashicons {
    display: none !important;
}

/* Add ONE modern right-side chevron. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-item:after,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-item::after {
    content: "›" !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 16px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: #c8d0d6 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 300 !important;
    line-height: 20px !important;
    text-align: center !important;
    pointer-events: none !important;
}

/* Child flyout: align exactly with hovered row and open LEFT. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-sub-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    right: 100% !important;
    bottom: auto !important;
    left: auto !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: #3f474f !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: -2px 5px 12px rgba(0,0,0,.22) !important;
    overflow: hidden !important;
    z-index: 2147483200 !important;
}
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop:hover > .ab-sub-wrapper,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop:focus-within > .ab-sub-wrapper,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop.hover > .ab-sub-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Child UL and rows. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-sub-wrapper > .ab-submenu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #3f474f !important;
    overflow: hidden !important;
}
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-sub-wrapper > .ab-submenu > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #3f474f !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-sub-wrapper > .ab-submenu > li:last-child {
    border-bottom: 0 !important;
}
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-sub-wrapper > .ab-submenu > li > .ab-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    background: #3f474f !important;
    color: #d6dce1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 45px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress > .ab-submenu > li.menupop > .ab-sub-wrapper > .ab-submenu > li > .ab-item:hover {
    background: #46515b !important;
    color: #fff !important;
}

/* Child leaf rows do not get chevrons. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-sub-wrapper .ab-submenu > li:not(.menupop) > .ab-item:before,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-sub-wrapper .ab-submenu > li:not(.menupop) > .ab-item:after,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-sub-wrapper .ab-submenu > li:not(.menupop) > .ab-item::before,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-sub-wrapper .ab-submenu > li:not(.menupop) > .ab-item::after {
    content: none !important;
    display: none !important;
}

/* Counters remain neatly separated. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account .count,
body.wp-admin #wpadminbar #wp-admin-bar-my-account .pending-count,
body.wp-admin #wpadminbar #wp-admin-bar-my-account .notification-count,
body.wp-admin #wpadminbar #wp-admin-bar-my-account .ab-label .count {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 19px !important;
    height: 19px !important;
    margin-left: 8px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
}

/* Lower rows open upward so they stay on screen. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-my-account-settings > .ab-sub-wrapper,
body.wp-admin #wpadminbar #wp-admin-bar-my-account #wp-admin-bar-my-account-invitations > .ab-sub-wrapper {
    top: auto !important;
    right: 100% !important;
    bottom: 0 !important;
    left: auto !important;
}

/* No blue BuddyPress active link in this dark menu. */
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-item,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-item:hover,
body.wp-admin #wpadminbar #wp-admin-bar-my-account-buddypress .ab-item:focus {
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   FOLLO FRONT-END ACCOUNT DROPDOWN — FINAL MODERN CARD LAYOUT
   ============================================================ */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    padding: 0 !important;
    background: #273139 !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
    overflow: hidden !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper > .ab-submenu,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-actions {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #273139 !important;
    box-sizing: border-box !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info {
    margin: 0 !important;
    padding: 0 !important;
    background: #273139 !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info > .ab-item {
    display: grid !important;
    grid-template-columns: 64px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 104px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 18px 14px !important;
    box-sizing: border-box !important;
    background: #273139 !important;
    color: #fff !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .avatar {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    position: static !important;
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .display-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .follo-account-email {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #b9c3ca !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .username { display:none !important; }
body:not(.wp-admin) #wpadminbar #wp-admin-bar-follo-edit-profile,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 14px 10px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    background: transparent !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-follo-edit-profile > .ab-item,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout > .ab-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr) 20px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    background: #303b44 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 9px !important;
    color: #f6f8fa !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-follo-edit-profile > .ab-item:hover,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-follo-edit-profile > .ab-item:focus,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout > .ab-item:hover,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout > .ab-item:focus {
    background: #394650 !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}
body:not(.wp-admin) #wpadminbar .follo-account-action-icon {
    position: relative !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
}
body:not(.wp-admin) #wpadminbar .follo-account-action-icon-profile::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 9px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}
body:not(.wp-admin) #wpadminbar .follo-account-action-icon-profile::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    bottom: 2px !important;
    width: 20px !important;
    height: 11px !important;
    border-radius: 11px 11px 4px 4px !important;
    background: currentColor !important;
}
body:not(.wp-admin) #wpadminbar .follo-account-action-icon-logout::before {
    content: "↪" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
}
body:not(.wp-admin) #wpadminbar .follo-account-action-label {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
}
body:not(.wp-admin) #wpadminbar .follo-account-action-chevron {
    display: block !important;
    width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c4ccd2 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    text-align: center !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout { margin-bottom:16px !important; }
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout::after {
    content:"" !important;
    display:block !important;
    width:100% !important;
    height:1px !important;
    margin:16px 0 0 !important;
    background:rgba(255,255,255,.12) !important;
}
@media (max-width:782px) {
    body:not(.wp-admin) #wpadminbar #wp-admin-bar-my-account > .ab-sub-wrapper {
        width:min(320px,calc(100vw - 12px)) !important;
        min-width:min(320px,calc(100vw - 12px)) !important;
        max-width:min(320px,calc(100vw - 12px)) !important;
    }
}

/* =========================================================
   FOLLO HOME IDENTITY — FINAL VISIBILITY / LAYOUT FIX
   Keep greeting, permanent FOLLO ID and helper copy visible.
========================================================= */
.follo-home-identity {
    grid-template-columns: minmax(0, 1fr) 58px 58px !important;
    grid-template-areas: "member barcode qr" !important;
    align-items: center !important;
    min-height: 100px !important;
    height: auto !important;
    padding: 18px 24px !important;
    overflow: visible !important;
}

.follo-home-member {
    grid-area: member !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.follo-home-welcome {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 4px !important;
}

.follo-home-id {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #cbd3d8 !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

.follo-home-id-label {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #cbd3d8 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
}

.follo-home-id-number {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    letter-spacing: .2px !important;
}

.follo-home-code-help {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 1px 0 0 !important;
    color: #b7c1c8 !important;
    font-size: 11px !important;
    line-height: 16px !important;
}

@media (max-width: 600px) {
    .follo-home-identity {
        grid-template-columns: minmax(0, 1fr) 50px 50px !important;
        min-height: 96px !important;
        padding: 16px 18px !important;
    }
}

/* ============================================================
   FOLLO FRONT-END ACCOUNT DROPDOWN — SPACING + SINGLE DIVIDER
   2026-09-12 refinement
   ============================================================ */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info > .ab-item {
    min-height: 112px !important;
    padding: 20px 18px 18px !important;
    column-gap: 17px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-info .display-name {
    margin-bottom: 7px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-follo-edit-profile,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout {
    margin-left: 12px !important;
    margin-right: 12px !important;
    margin-bottom: 9px !important;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-follo-edit-profile > .ab-item,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout > .ab-item {
    min-height: 46px !important;
    height: 46px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Remove the old extra separator generated beneath Log Out. */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout {
    margin-bottom: 11px !important;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout::after,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-logout:after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Use one clean divider only, immediately before the FOLLO ID card. */
body:not(.wp-admin) #wpadminbar #follo-member-card {
    margin: 15px 10px 10px !important;
    padding: 14px 10px 10px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}

/* Prevent inherited submenu borders from creating a second empty strip. */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-actions,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-actions > li,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-user-actions > li > .ab-item {
    border-top: 0 !important;
    border-bottom-color: transparent !important;
}

/* =========================================================
   FOLLO LOGIN — CREATE ACCOUNT PROMPT PRESENCE GUARD
   The PHP/JS guard creates this only when the Divi page does not already
   contain .register-link, so the live homepage can never show two prompts.
========================================================= */
body.page-id-75:not(.logged-in) .register-link {
    display: block !important;
}

body.page-id-75:not(.logged-in) .follo-register-link-auto {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}