/*
 * GX Profile Page Redesign
 * BuddyBoss xProfile public view — modern card layout
 * Uses design tokens from gx-layout.css
 * Version: 1.0
 */

/* ================================================================
   1. Profile Header Enhancements
   ================================================================ */

/* Purple ring around avatar */
.users-header #item-header-avatar img.avatar,
#cover-image-container #item-header-avatar img.avatar {
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 3px var(--gx-primary), 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    border-radius: 50% !important;
}

/* Member display name */
.users-header .user-nicename {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
}

/* Member type / role badge */
.users-header .bp-member-type {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--gx-primary-light) !important;
    color: var(--gx-primary) !important;
    border: 1px solid rgba(57, 39, 143, 0.22) !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 12px !important;
    letter-spacing: 0.5px !important;
    margin-left: 8px !important;
    text-transform: uppercase !important;
}

/* Join date / last-active meta row */
.users-header .item-meta {
    font-size: 13px !important;
    color: var(--gx-text-muted) !important;
    margin-top: 4px !important;
}

.users-header .item-meta .mention-name {
    color: var(--gx-primary) !important;
    font-weight: 500 !important;
}

/* ================================================================
   2. Primary Profile Navigation (#object-nav)
   ================================================================ */

.bb-profile-grid #object-nav {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
}

.bb-profile-grid #object-nav > ul {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid var(--gx-card-border) !important;
    padding: 0 !important;
    background: none !important;
    flex-wrap: wrap !important;
}

.bb-profile-grid #object-nav > ul > li {
    list-style: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.bb-profile-grid #object-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gx-text-muted) !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
    transition: var(--gx-transition) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.bb-profile-grid #object-nav > ul > li > a:hover {
    color: var(--gx-text-primary) !important;
    background: none !important;
    border-bottom-color: rgba(57, 39, 143, 0.25) !important;
}

.bb-profile-grid #object-nav > ul > li.selected > a,
.bb-profile-grid #object-nav > ul > li.current > a {
    color: var(--gx-primary) !important;
    border-bottom-color: var(--gx-primary) !important;
    font-weight: 600 !important;
    background: none !important;
}

.bb-profile-grid #object-nav > ul > li > a .count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background: var(--gx-primary-light) !important;
    color: var(--gx-primary) !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    line-height: 1 !important;
}

/* ================================================================
   3. Profile Cards (group-separator-block)
   ================================================================ */

/* Reset the global .bp-widget card (from gx-layout.css) on the group block */
.bp-profile-wrapper .group-separator-block .bp-widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Card container */
.bp-profile-wrapper .group-separator-block {
    background: var(--gx-card-bg) !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-card-radius) !important;
    box-shadow: var(--gx-card-shadow) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Card header */
.bp-profile-wrapper .profile-loop-header {
    display: flex !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(57, 39, 143, 0.12) !important;
    background: linear-gradient(
        135deg,
        rgba(57, 39, 143, 0.04) 0%,
        rgba(122, 78, 204, 0.08) 100%
    ) !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* Title with left accent bar */
.bp-profile-wrapper .profile-loop-header .bb-profile-title {
    position: relative !important;
    padding-left: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    letter-spacing: 0.1px !important;
    margin: 0 !important;
    text-transform: none !important;
}

.bp-profile-wrapper .profile-loop-header .bb-profile-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: var(--gx-primary) !important;
    border-radius: var(--gx-radius-full) !important;
}

/* Edit button — clean pill */
.bp-profile-wrapper .profile-loop-header .push-right.button.outline.small {
    margin-left: auto !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background: var(--bb-primary-button-background-regular) !important;
    border: 1px solid var(--bb-primary-button-background-regular) !important;
    border-radius: var(--gx-radius-lg) !important;
    padding: 5px 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.bp-profile-wrapper .profile-loop-header .push-right.button.outline.small:hover {
    background: var(--bb-primary-button-background-hover) !important;
    color: var(--bb-primary-button-text-hover) !important;
    border-color: var(--bb-primary-button-border-hover) !important;
}

/* ================================================================
   4. Field Rows — Table → Flex Layout
   ================================================================ */

.bp-profile-wrapper .profile-fields.bp-tables-user {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    border-collapse: separate !important;
    padding: 4px 24px !important;
    margin: 0 !important;
}

/* thead/tbody reset */
.bp-profile-wrapper .profile-fields.bp-tables-user thead,
.bp-profile-wrapper .profile-fields.bp-tables-user tbody,
.bp-profile-wrapper .profile-fields.bp-tables-user tfoot {
    display: block !important;
}

/* Each field row */
.bp-profile-wrapper .profile-fields.bp-tables-user tr {
    display: flex !important;
    align-items: flex-start !important;
    padding: 14px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
    background: transparent !important;
    gap: 0 !important;
}

.bp-profile-wrapper .profile-fields.bp-tables-user tr:last-child {
    border-bottom: none !important;
}

/* Both cells */
.bp-profile-wrapper .profile-fields.bp-tables-user td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
    vertical-align: top !important;
}

/* Label cell */
.bp-profile-wrapper .profile-fields.bp-tables-user td.label {
    width: 36% !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gx-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding-right: 16px !important;
    padding-top: 1px !important;
}

/* Value cell */
.bp-profile-wrapper .profile-fields.bp-tables-user td.data {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gx-text-secondary) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Strip paragraph margins inside data cells */
.bp-profile-wrapper .profile-fields.bp-tables-user td.data p,
.bp-profile-wrapper .profile-fields.bp-tables-user td.data ul,
.bp-profile-wrapper .profile-fields.bp-tables-user td.data ol {
    margin: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* ================================================================
   5. Content Creator Info — Premium Card Accent
   ================================================================ */

/* Gradient accent bar for Content Creator Info */
.bp-profile-wrapper .group-separator-block:has(.bp-widget.content-creator-info) .bb-profile-title::before {
    background: linear-gradient(
        to bottom,
        var(--gx-primary),
        var(--gx-primary-contrast)
    ) !important;
}

/* ================================================================
   6. Interests & Niches Chips  (injected by gx-profile.js)
   ================================================================ */

.gx-interests-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gx-interest-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 11px !important;
    background: var(--gx-primary-light) !important;
    color: var(--gx-primary) !important;
    border: 1px solid rgba(57, 39, 143, 0.18) !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* ================================================================
   7. Dark Mode Compatibility
   ================================================================ */

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper .group-separator-block {
    background: #121212 !important;
    border-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper .profile-loop-header {
    background: #121212 !important;
    border-bottom-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper .profile-loop-header .bb-profile-title {
    color: #fff !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper .profile-fields.bp-tables-user tr {
    border-bottom-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper .profile-fields.bp-tables-user td.label {
    color: #888 !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper .profile-fields.bp-tables-user td.data {
    color: #ccc !important;
}

.bb-dark-mode.bb-dark-theme .bb-profile-grid #object-nav > ul {
    border-bottom-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme .bb-profile-grid #object-nav > ul > li > a {
    color: #888 !important;
}

.bb-dark-mode.bb-dark-theme .bb-profile-grid #object-nav > ul > li.selected > a {
    color: #a06aff !important;
    border-bottom-color: #a06aff !important;
}

.bb-dark-mode.bb-dark-theme .users-header .user-nicename {
    color: #fff !important;
}

.bb-dark-mode.bb-dark-theme .gx-interest-chip {
    background: rgba(122, 78, 204, 0.15) !important;
    color: #a06aff !important;
    border-color: rgba(160, 106, 255, 0.25) !important;
}

/* ================================================================
   8. Responsive
   ================================================================ */

@media (max-width: 768px) {
    .bp-profile-wrapper .profile-loop-header {
        padding: 14px 16px !important;
    }

    .bp-profile-wrapper .profile-fields.bp-tables-user {
        padding: 4px 16px !important;
    }

    .bp-profile-wrapper .profile-fields.bp-tables-user td.label {
        width: 40% !important;
    }

    .bb-profile-grid #object-nav > ul > li > a {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Stack label over value on small screens */
    .bp-profile-wrapper .profile-fields.bp-tables-user tr {
        flex-direction: column !important;
        gap: 3px !important;
        padding: 12px 0 !important;
    }

    .bp-profile-wrapper .profile-fields.bp-tables-user td.label {
        width: 100% !important;
        padding-right: 0 !important;
        padding-bottom: 1px !important;
    }

    .bp-profile-wrapper .profile-fields.bp-tables-user td.data {
        font-size: 13px !important;
    }

    .bb-profile-grid #object-nav > ul {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .bb-profile-grid #object-nav > ul::-webkit-scrollbar {
        display: none !important;
    }
}

/* ================================================================
   PROFILE EDIT PAGE
   Structure (from profile.php / edit.php):
     header.profile-header           — "Edit Profile" + View Profile btn
     .bp-profile-wrapper             — flex row (no .need-separator)
       #subnav.bp-subnavs            — left sidebar nav
       .bp-profile-content           — right content column
         .profile.edit
           h2.screen-heading         — "Edit 'Details' Information"
           #profile-edit-form
             ul.button-tabs.button-nav
             .editfield > fieldset   — each field card
             .field-visibility-settings-header
             .submit                 — save button
   ================================================================ */

/* ----------------------------------------------------------------
   9. Edit Profile Header  (Edit Profile h1 + View Profile btn)
   ---------------------------------------------------------------- */

header.profile-header {
    display: flex !important;
    align-items: center !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
    margin-bottom: 24px !important;
}

header.profile-header .bb-profile-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    letter-spacing: -0.2px !important;
    margin: 0 !important;
}

header.profile-header .push-right.button.outline.small {
    margin-left: auto !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background: var(--bb-primary-button-background-regular) !important;
    border: 1px solid var(--bb-primary-button-background-regular) !important;
    border-radius: var(--gx-radius-lg) !important;
    /* padding: 7px 16px !important; */
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: inherit !important;
}

header.profile-header .push-right.button.outline.small:hover {
    background: var(--bb-primary-button-background-hover) !important;
    color: var(--bb-primary-button-text-hover) !important;
    border-color: var(--bb-primary-button-border-hover) !important;
}

/* ----------------------------------------------------------------
   10. Edit Sidebar  (Edit / Profile Photo / Cover Photo)
   ---------------------------------------------------------------- */

.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs {
    background: var(--gx-card-bg) !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-card-radius) !important;
    box-shadow: var(--gx-card-shadow) !important;
    overflow: hidden !important;
    padding: 0 !important;
    align-self: flex-start !important;
    height: auto !important;
    min-height: auto !important;
}

.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 15px 10px !important;
    border: none !important;
}

.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
}

.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gx-text-secondary) !important;
    background: none !important;
    border: none !important;
    border-radius: var(--gx-radius-md) !important;
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
}

.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li > a:hover {
    background: var(--gx-primary-light) !important;
    color: var(--gx-primary) !important;
}

.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li.selected > a,
.bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li.current > a {
    background: var(--bb-primary-button-background-regular) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------------------
   11. Screen Heading  ("Edit 'Details' Information")
   ---------------------------------------------------------------- */

.profile.edit h2.screen-heading {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    letter-spacing: -0.1px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------------
   12. Profile Group Tabs  (Details / Contact / Creator / Social)
   ---------------------------------------------------------------- */

#profile-edit-form .button-tabs.button-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    background: none !important;
    border-bottom: 2px solid var(--gx-card-border) !important;
    gap: 0 !important;
}

#profile-edit-form .button-tabs.button-nav li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

#profile-edit-form .button-tabs.button-nav li a {
    display: block !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gx-text-muted) !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
    white-space: nowrap !important;
}

#profile-edit-form .button-tabs.button-nav li a:hover {
    color: var(--gx-text-primary) !important;
    border-bottom-color: rgba(57, 39, 143, 0.3) !important;
    background: none !important;
}

#profile-edit-form .button-tabs.button-nav li.current a {
    color: var(--gx-primary) !important;
    border-bottom-color: var(--gx-primary) !important;
    font-weight: 600 !important;
    background: none !important;
}

/* ----------------------------------------------------------------
   13. Field Containers  (.editfield > fieldset)
       Higher specificity overrides custom.css #profile-edit-form fieldset
   ---------------------------------------------------------------- */
.bp-profile-wrapper {
    gap: 10px;
}
.bp-profile-content .profile:not(.public) {
    padding: 0 !important;
}
.bb-template-v2 #buddypress .bp-search-results-wrapper .search_results, .bb-template-v2 #page #buddypress #item-body .bp-profile-wrapper:not(.need-separator) .bp-profile-content {
    background: var(--gx-card-bg) !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-card-radius) !important;
    box-shadow: var(--gx-card-shadow) !important;
    overflow: hidden !important;
    padding: 20px !important;
    align-self: flex-start !important;
}

.bs-styled-radio+.bb-radio-label:before,
.bs-styled-radio+label:before,
.bs-styled-checkbox+label:before {
    width: 18px;
    height: 18px;
}

.bs-styled-checkbox:checked+label:after {
    top: 2px;
}

html body #profile-edit-form .editfield {
    margin-bottom: 16px !important;
}

html body #profile-edit-form .editfield > fieldset, .gx-integrations-card fieldset {
    background: var(--gx-card-bg) !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-card-radius) !important;
    box-shadow: var(--gx-card-shadow) !important;
    padding: 20px 24px !important;
    margin: 0 !important;
}

/* Field label / legend */
html body #profile-edit-form .editfield > fieldset legend,
html body #profile-edit-form .editfield > fieldset .bp-field-legend,
.gx-integrations-card fieldset legend {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--gx-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 0 6px !important;
    background: var(--gx-card-bg) !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

/* ----------------------------------------------------------------
   14. Form Inputs, Textareas, Selects
   ---------------------------------------------------------------- */

html body #profile-edit-form input[type="text"],
html body #profile-edit-form input[type="email"],
html body #profile-edit-form input[type="url"],
html body #profile-edit-form input[type="tel"],
html body #profile-edit-form input[type="number"] {
    width: 100% !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    color: var(--gx-text-primary) !important;
    background: #f8fafc !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-radius-md) !important;
    transition: border-color var(--gx-transition), box-shadow var(--gx-transition) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
    height: 40px !important;
}

html body #profile-edit-form textarea {
    width: 100% !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    color: var(--gx-text-primary) !important;
    background: #f8fafc !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-radius-md) !important;
    transition: border-color var(--gx-transition), box-shadow var(--gx-transition) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 90px !important;
    resize: vertical !important;
}

html body #buddypress #profile-edit-form select {
    width: 100% !important;
    padding: 9px 36px 9px 14px !important;
    font-size: 14px !important;
    color: var(--gx-text-primary) !important;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-radius-md) !important;
    transition: border-color var(--gx-transition), box-shadow var(--gx-transition) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 40px !important;
}

/* Focus states */
html body #profile-edit-form input[type="text"]:focus,
html body #profile-edit-form input[type="email"]:focus,
html body #profile-edit-form input[type="url"]:focus,
html body #profile-edit-form input[type="tel"]:focus,
html body #profile-edit-form input[type="number"]:focus,
html body #profile-edit-form textarea:focus,
html body #buddypress #profile-edit-form select:focus {
    border-color: var(--gx-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--gx-primary-light) !important;
    outline: none !important;
}

/* Date field row (Day / Month / Year selects) */
html body #profile-edit-form .bp-datebox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

html body #profile-edit-form .bp-datebox label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--gx-text-muted) !important;
    margin-right: 4px !important;
}

html body #buddypress #profile-edit-form .bp-datebox select {
    width: auto !important;
    min-width: 80px !important;
    flex: 1 !important;
}

#buddypress #profile-edit-form label:not(.bp-screen-reader-text),
#buddypress #profile-edit-form legend:not(.bp-screen-reader-text) {
    font-size: 12px !important;
}

#buddypress #profile-edit-form .datebox-selects label {
    margin-bottom: 5px !important;
}

/* ----------------------------------------------------------------
   14b. Bio / Rich-Text Editor (wp_editor + medium-editor)
   ---------------------------------------------------------------- */

/* Outer fieldset card — extra breathing room for the editor */
html body #profile-edit-form .editfield:has(.wp-editor-wrap) > fieldset,
html body #profile-edit-form .editfield:has(.medium-editor-element) > fieldset {
    padding-bottom: 16px !important;
}

/* ── Editor frame ── */
html body #profile-edit-form .wp-editor-wrap {
    border: 1.5px solid var(--gx-card-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(57, 39, 143, 0.06), 0 0 0 0 transparent !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    margin-top: 6px !important;
}


/* ── Top toolbar row (Visual / Code tabs + media buttons) ── */
html body #profile-edit-form .wp-editor-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
    padding: 6px 10px !important;
    gap: 0 !important;
}

/* ── Visual / Code tab toggle ── */
html body #profile-edit-form .wp-editor-tabs {
    display: inline-flex !important;
    gap: 2px !important;
    background: #eef0f5 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    border: none !important;
}

/* Base — both buttons */
html body #buddypress #profile-edit-form .wp-editor-tabs button.wp-switch-editor,
html body #buddypress #profile-edit-form .wp-editor-tabs a.wp-switch-editor {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 13px !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

html body #buddypress #profile-edit-form .wp-editor-tabs button.wp-switch-editor:hover,
html body #buddypress #profile-edit-form .wp-editor-tabs a.wp-switch-editor:hover {
    color: var(--bb-primary-button-background-regular) !important;
    background: rgba(57, 39, 143, 0.08) !important;
}

/* ── Active tab — filled purple pill ── */
/* Managed by JS (.gx-tab-active) + WP's own .active + wrapper class fallback */
html body #buddypress #profile-edit-form .wp-editor-tabs button.switch-tmce.active,
html body #buddypress #profile-edit-form .wp-editor-tabs a.switch-tmce.active,
html body #buddypress #profile-edit-form .wp-editor-tabs button.switch-html.active,
html body #buddypress #profile-edit-form .wp-editor-tabs a.switch-html.active,
html body #profile-edit-form .wp-editor-wrap.tmce-active .wp-editor-tabs .switch-tmce,
html body #profile-edit-form .wp-editor-wrap.html-active .wp-editor-tabs .switch-html,
html body #buddypress #profile-edit-form .wp-editor-tabs button.wp-switch-editor[aria-pressed="true"],
html body #buddypress #profile-edit-form .wp-editor-tabs a.wp-switch-editor[aria-pressed="true"],
html body #profile-edit-form .wp-editor-tabs button.wp-switch-editor[aria-pressed="true"],
html body #profile-edit-form .wp-editor-tabs a.wp-switch-editor[aria-pressed="true"],
.wp-editor-tabs .wp-switch-editor.gx-tab-active {
    color: #fff !important;
    background: var(--bb-primary-button-background-regular) !important;
    box-shadow: 0 2px 8px rgba(57, 39, 143, 0.35) !important;
    font-weight: 700 !important;
    border: none !important;
}


/* ── Quicktags toolbar (Code mode only — don't force display, WP JS manages show/hide) ── */
html body #profile-edit-form .quicktags-toolbar {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
}

/* Only set display:flex when the toolbar is actually visible (html-active wrapper) */
html body #profile-edit-form .wp-editor-wrap.html-active .quicktags-toolbar {
    display: flex !important;
}

html body #profile-edit-form .quicktags-toolbar input.ed_button,
html body #profile-edit-form .quicktags-toolbar input[type="button"] {
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gx-text-secondary) !important;
    background: #fff !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    line-height: 24px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body #profile-edit-form .quicktags-toolbar input.ed_button:hover,
html body #profile-edit-form .quicktags-toolbar input[type="button"]:hover {
    background: var(--gx-primary-light) !important;
    border-color: rgba(57, 39, 143, 0.3) !important;
    color: var(--gx-primary) !important;
    box-shadow: 0 2px 6px rgba(57, 39, 143, 0.12) !important;
}

html body #profile-edit-form .quicktags-toolbar input.ed_button:active,
html body #profile-edit-form .quicktags-toolbar input[type="button"]:active {
    background: var(--gx-primary) !important;
    border-color: var(--gx-primary) !important;
    color: #fff !important;
    transform: scale(0.96) !important;
}

/* ── Editor container + TinyMCE iframe ── */
html body #profile-edit-form .wp-editor-container {
    background: #fff !important;
    border: none !important;
}

html body #profile-edit-form .wp-editor-container iframe.mce-edit-area,
html body #profile-edit-form .mce-edit-area {
    background: #fff !important;
}

/* ── Textarea (Code mode) — never force display; let WP JS handle show/hide ── */
html body #profile-edit-form .wp-editor-area {
    border: none !important;
    background: #fff !important;
    min-height: 140px !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace !important;
    color: var(--gx-text-primary) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    outline: none !important;
    line-height: 1.6 !important;
}

/* ── TinyMCE — strip ALL inner borders/shadows/outlines ── */
html body #profile-edit-form .wp-editor-wrap .mce-container,
html body #profile-edit-form .wp-editor-wrap .mce-container.mce-panel,
html body #profile-edit-form .wp-editor-wrap .mce-container-body,
html body #profile-edit-form .wp-editor-wrap .mce-stack-layout,
html body #profile-edit-form .wp-editor-wrap .mce-stack-layout-item,
html body #profile-edit-form .wp-editor-wrap .mce-flow-layout,
html body #profile-edit-form .wp-editor-wrap .mce-flow-layout-item {
    /* border: none !important; */
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    outline: none !important;
}

/* ── TinyMCE toolbar strip ── */
html body #profile-edit-form .mce-toolbar-grp {
    background: #f4f6fb !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
    margin: 0 !important;
}

html body #profile-edit-form .mce-toolbar {
    background: transparent !important;
}

/* ── Separator between button groups ── */
html body #profile-edit-form .mce-toolbar .mce-btn-group:not(:first-child) {
    border-left: 1px solid var(--gx-card-border) !important;
    margin-left: 4px !important;
    padding-left: 4px !important;
}

/* ── Individual TinyMCE buttons — base ── */
html body #profile-edit-form .mce-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: all 0.12s ease !important;
}

html body #profile-edit-form .mce-btn button {
    padding: 0 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    border-radius: 5px !important;
    transition: color 0.12s ease !important;
}

html body #profile-edit-form .mce-btn i {
    color: inherit !important;
    padding: 2px !important;
}

/* ── Hover ── */
html body #profile-edit-form .mce-btn:hover {
    background: var(--gx-primary-light) !important;
    border-color: rgba(57, 39, 143, 0.18) !important;
    box-shadow: none !important;
}

html body #profile-edit-form .mce-btn:hover button {
    color: var(--gx-primary) !important;
}

/* ── Active / Pressed (e.g. Bold is ON) ── */
html body #profile-edit-form .mce-btn.mce-active,
html body #profile-edit-form .mce-btn.mce-active:hover {
    background: var(--bb-primary-button-background-regular) !important;
    border-color:var(--bb-primary-button-background-regular) !important;
    box-shadow: 0 2px 6px rgba(57, 39, 143, 0.3) !important;
}

html body #profile-edit-form .mce-btn.mce-active button,
html body #profile-edit-form .mce-btn.mce-active:hover button,
html body #profile-edit-form .mce-btn.mce-active i,
html body #profile-edit-form .mce-btn.mce-active:hover i {
    color: #fff !important;
}

/* ── TinyMCE content edit area ── */
html body #profile-edit-form .mce-edit-area {
    border: none !important;
    background: #fff !important;
}

/* ── TinyMCE statusbar (P + STRONG path) ── */
html body #profile-edit-form .mce-statusbar {
    background: #f4f6fb !important;
    border-top: 1px solid var(--gx-card-border) !important;
    border-radius: 0 0 11px 11px !important;
    padding: 3px 10px !important;
    min-height: 24px !important;
}

html body #profile-edit-form .mce-statusbar .mce-path {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    line-height: 1 !important;
}

html body #profile-edit-form .mce-path-item {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
}

html body #profile-edit-form .mce-path-item:hover {
    background: var(--gx-primary-light) !important;
    color: var(--gx-primary) !important;
}

/* html body #profile-edit-form .mce-path-item:last-child {
    color: var(--gx-primary) !important;
    background: rgba(57, 39, 143, 0.08) !important;
} */

/* Separator between path items */
html body #profile-edit-form .mce-path-item + .mce-path-item::before {
    content: '›' !important;
    color: #cbd5e1 !important;
    margin-right: 4px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

html body #profile-edit-form .mce-wordcount {
    font-size: 10px !important;
    color: #94a3b8 !important;
    padding: 2px 4px !important;
    line-height: 1 !important;
}

html body #profile-edit-form .mce-resizehandle {
    opacity: 0.3 !important;
    transition: opacity 0.15s ease !important;
}

html body #profile-edit-form .mce-resizehandle:hover {
    opacity: 0.7 !important;
}

/* ── Profile Integrations card (Social Profile tab) ── */
.gx-integrations-card {
    margin-top: 20px !important;
}

.gx-integrations-card .gx-integration-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
}

.gx-integrations-card .gx-integration-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.gx-integrations-card .gx-integration-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gx-text-primary) !important;
    min-width: 80px !important;
}

.gx-integrations-card .gx-integration-link {
    font-size: 13px !important;
    color: var(--gx-primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: opacity 0.15s ease !important;
}

.gx-integrations-card .gx-integration-link:hover {
    opacity: 0.75 !important;
    text-decoration: underline !important;
}

.gx-integrations-card .gx-integration-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--bb-primary-button-background-regular) !important;
    border: 1px solid var(--bb-primary-button-background-regular) !important;
    border-radius: var(--gx-radius-md) !important;
    padding: 6px 16px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    min-height: auto !important;
}

.gx-integrations-card .gx-integration-btn:hover {
    background: var(--bb-primary-button-background-hover) !important;
    color: var(--bb-primary-button-background-regular) !important;
}

/* dark mode */
.bb-dark-mode.bb-dark-theme .gx-integrations-card .gx-integration-label {
    color: #e2e8f0 !important;
}

.bb-dark-mode.bb-dark-theme .gx-integrations-card .gx-integration-row {
    border-bottom-color: #403f3f !important;
}

/* ── Medium-editor (BuddyBoss alternative rich-text) ── */
html body #profile-edit-form .medium-editor-element {
    min-height: 140px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: var(--gx-text-primary) !important;
    background: #fff !important;
    border: 1.5px solid var(--gx-card-border) !important;
    border-radius: 12px !important;
    outline: none !important;
    line-height: 1.7 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(57, 39, 143, 0.06) !important;
    margin-top: 6px !important;
}

html body #profile-edit-form .medium-editor-element:focus {
    border-color: var(--gx-primary) !important;
    box-shadow: 0 0 0 3px var(--gx-primary-light) !important;
}

html body #profile-edit-form .medium-editor-toolbar {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
    background: #1e1b3a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html body #profile-edit-form .medium-editor-toolbar li button {
    color: #fff !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

html body #profile-edit-form .medium-editor-toolbar li button:hover,
html body #profile-edit-form .medium-editor-toolbar li.medium-editor-button-active button {
    background: var(--gx-primary) !important;
    color: #fff !important;
}

/* ── Dark mode ── */
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-wrap {
    background: #1c1c1c !important;
    border-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-tools,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .quicktags-toolbar,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-toolbar-grp,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-statusbar {
    background: #262626 !important;
    border-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-tabs {
    background: rgba(255, 255, 255, 0.06) !important;
}

.bb-dark-mode.bb-dark-theme html body #buddypress #profile-edit-form .wp-editor-tabs button.wp-switch-editor,
.bb-dark-mode.bb-dark-theme html body #buddypress #profile-edit-form .wp-editor-tabs a.wp-switch-editor {
    color: #666 !important;
}

.bb-dark-mode.bb-dark-theme html body #buddypress #profile-edit-form .wp-editor-tabs button.switch-tmce.active,
.bb-dark-mode.bb-dark-theme html body #buddypress #profile-edit-form .wp-editor-tabs a.switch-html.active,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-wrap.tmce-active .wp-editor-tabs .switch-tmce,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-wrap.html-active .wp-editor-tabs .switch-html {
    background: #7c3aed !important;
    color: #fff !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-btn button {
    color: #aaa !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-btn:hover {
    background: rgba(122, 78, 204, 0.2) !important;
    border-color: rgba(160, 106, 255, 0.3) !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-btn:hover button {
    color: #a06aff !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-btn.mce-active {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-path-item {
    color: #666 !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .mce-path-item:last-child {
    color: #a06aff !important;
    background: rgba(122, 78, 204, 0.15) !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .quicktags-toolbar input.ed_button,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .quicktags-toolbar input[type="button"] {
    background: #262626 !important;
    border-color: #403f3f !important;
    color: #ccc !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .quicktags-toolbar input.ed_button:hover,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .quicktags-toolbar input[type="button"]:hover {
    background: rgba(122, 78, 204, 0.2) !important;
    border-color: rgba(160, 106, 255, 0.4) !important;
    color: #a06aff !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-area,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .wp-editor-container {
    background: #1c1c1c !important;
    color: #e2e8f0 !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .medium-editor-element {
    background: #1c1c1c !important;
    border-color: #403f3f !important;
    color: #e2e8f0 !important;
}

/* ----------------------------------------------------------------
   15. Visibility Controls
   ---------------------------------------------------------------- */

#profile-edit-form p.field-visibility-settings-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--gx-card-border) !important;
}

#profile-edit-form .current-visibility-level {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gx-text-muted) !important;
    background: rgba(100, 116, 139, 0.1) !important;
    border-radius: var(--gx-radius-full) !important;
    padding: 2px 10px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.2px !important;
}

/* Override custom.css purple button for visibility toggle */
#profile-edit-form button.visibility-toggle-link.button {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--gx-primary) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: var(--gx-transition) !important;
}

#profile-edit-form button.visibility-toggle-link.button:hover {
    background: none !important;
    color: var(--gx-primary-hover) !important;
    border: none !important;
}

/* Visibility settings panel */
#profile-edit-form .field-visibility-settings {
    background: #f8fafc !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-radius-md) !important;
    padding: 14px 16px !important;
    margin-top: 10px !important;
}

/* Inner fieldset inside visibility panel — reset card styles */
html body #profile-edit-form .field-visibility-settings fieldset {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body #profile-edit-form .field-visibility-settings fieldset legend {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gx-text-secondary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Radio option rows */
#profile-edit-form .field-visibility-settings .bp-radio-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 4px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    cursor: pointer !important;
}

#profile-edit-form .field-visibility-settings .bp-radio-wrap:last-of-type {
    border-bottom: none !important;
}

#profile-edit-form .field-visibility-settings input[type="radio"].bs-styled-radio {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: var(--gx-primary) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#profile-edit-form .field-visibility-settings .bp-radio-wrap label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gx-text-primary) !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

#profile-edit-form .field-visibility-settings .bp-radio-wrap label::before {
    width: 18px;
    height: 18px;
}

#profile-edit-form button.field-visibility-settings-close.button {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--gx-text-muted) !important;
    background: none !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-radius-md) !important;
    padding: 4px 12px !important;
    margin-top: 12px !important;
    cursor: pointer !important;
    transition: var(--gx-transition) !important;
    line-height: inherit;
}

#profile-edit-form button.field-visibility-settings-close.button:hover {
    background: var(--gx-card-border) !important;
    color: var(--gx-text-primary) !important;
    border-color: var(--gx-card-border) !important;
}

/* ----------------------------------------------------------------
   16. Save Changes Button
   ---------------------------------------------------------------- */

#profile-edit-form .submit {
    margin-top: 8px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

#profile-edit-form .submit #profile-group-edit-submit {
    background: var(--bb-primary-button-background-regular) !important;
    color: #fff !important;
    border: 1px solid var(--bb-primary-button-background-regular) !important;
    border-radius: var(--gx-radius-lg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 42px !important;
    padding: 0 28px !important;
    cursor: pointer !important;
    transition: var(--gx-transition) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

#profile-edit-form .submit #profile-group-edit-submit:hover {
    background: var(--bb-primary-button-background-hover) !important;
    color: var(--bb-primary-button-text-hover) !important;
    border-color: var(--bb-primary-button-border-hover) !important;
}

/* ----------------------------------------------------------------
   17. Dark Mode — Edit Page
   ---------------------------------------------------------------- */

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .editfield > fieldset {
    background: #121212 !important;
    border-color: #403f3f !important;
    box-shadow: none !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form .editfield > fieldset legend,
.bb-dark-mode.bb-dark-theme html body #profile-edit-form .editfield > fieldset .bp-field-legend {
    background: #121212 !important;
    color: #888 !important;
}

.bb-dark-mode.bb-dark-theme html body #profile-edit-form input[type="text"],
.bb-dark-mode.bb-dark-theme html body #profile-edit-form input[type="email"],
.bb-dark-mode.bb-dark-theme html body #profile-edit-form input[type="url"],
.bb-dark-mode.bb-dark-theme html body #profile-edit-form input[type="tel"],
.bb-dark-mode.bb-dark-theme html body #profile-edit-form input[type="number"],
.bb-dark-mode.bb-dark-theme html body #profile-edit-form textarea,
.bb-dark-mode.bb-dark-theme html body #buddypress #profile-edit-form select {
    background: #1c1c1c !important;
    border-color: #403f3f !important;
    color: #fff !important;
}

.bb-dark-mode.bb-dark-theme html body #buddypress #profile-edit-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") !important;
    background-color: #1c1c1c !important;
}

.bb-dark-mode.bb-dark-theme #profile-edit-form .button-tabs.button-nav {
    border-bottom-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme #profile-edit-form .button-tabs.button-nav li a {
    color: #888 !important;
}

.bb-dark-mode.bb-dark-theme #profile-edit-form .button-tabs.button-nav li.current a {
    color: #a06aff !important;
    border-bottom-color: #a06aff !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs {
    background: #121212 !important;
    border-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li > a {
    color: #ccc !important;
}

.bb-dark-mode.bb-dark-theme header.profile-header {
    border-bottom-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme header.profile-header .bb-profile-title {
    color: #fff !important;
}

.bb-dark-mode.bb-dark-theme #profile-edit-form p.field-visibility-settings-header {
    border-top-color: #403f3f !important;
}

.bb-dark-mode.bb-dark-theme #profile-edit-form .field-visibility-settings {
    background: #1c1c1c !important;
    border-color: #403f3f !important;
}

/* ----------------------------------------------------------------
   18. Responsive — Edit Page
   ---------------------------------------------------------------- */

@media (max-width: 1050px) {
    /* Allow horizontal scroll — override the card's overflow:hidden */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs {
        overflow: visible !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
    }

    /* Hide the native select dropdown */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .bp-navs__dropdown {
        display: none !important;
    }

    /* Horizontal scrollable pill tabs */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #page #buddypress #item-body .bp-profile-wrapper #subnav a:before {
        margin-right: 0!important;
    }

    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav::-webkit-scrollbar {
        display: none !important;
    }

    /* Keep each tab from shrinking */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li {
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* Vertical divider between tabs */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li:not(:last-child)::after {
        content: '' !important;
        position: absolute !important;
        right: -3px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 1px !important;
        height: 16px !important;
        background: var(--gx-card-border) !important;
        pointer-events: none !important;
    }

    #buddypress .profile.edit .button-nav a {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    /* Scrollable group tabs on mobile */
    #profile-edit-form .button-tabs.button-nav {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #profile-edit-form .button-tabs.button-nav::-webkit-scrollbar {
        display: none !important;
    }

    html body #profile-edit-form .editfield > fieldset {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    /* Switch back to vertical card layout */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs {
        overflow: hidden !important;
    }

    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        padding: 10px !important;
        overflow-x: visible !important;
    }

    /* Full-width links in vertical layout */
    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li {
        flex-shrink: unset !important;
        width: 100% !important;
    }

    .bp-profile-wrapper:not(.need-separator) > #subnav.bp-subnavs .subnav li > a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Restore icon spacing for vertical layout */
    #page #buddypress #item-body .bp-profile-wrapper #subnav a:before {
        margin-right: 8px !important;
    }

    #buddypress .profile.edit .button-nav a {
        margin: 0;
    }
}

/* ================================================================
   19. Profile Photo / Cover Photo Upload Page
   ================================================================ */

/* ── Page heading ── */
h2.screen-heading.change-avatar-screen,
h2.screen-heading.change-cover-image-screen {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    letter-spacing: -0.1px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

.drag-drop .drag-drop-inside p {
    font-size: 14px !important;
}
#buddypress input#bp-browse-button,
button.button.avatar-crop-submit {
    font-size: 14px;
    border: 1px solid!important;
}

.bb-mobile-panel-header .user-name {
    font-size: 14px;
}

.my-account-link a {
    font-size: 12px;
}