/*
 * Custom Styles for BuddyBoss Child Theme
 */

/* Hide home page title */
.page-id-9 .entry-header { display: none; }

/* set a maximum width for the BuddyBoss activity feed */
.directory.activity #primary {
    max-width: 600px;  
    margin-left: auto;  /* Centers the container if it's narrower than the screen */
    margin-right: auto; /* Centers the container if it's narrower than the screen */
}

/* To set a specific maximum pixel width for images in Buddyboss Activity feed */
.activity-inner img {
    max-width: 500px !important;  
    height: auto !important; /* Ensures the image aspect ratio is maintained */
}

/* To set a maximum width for link preview images in Buddyboss Activity feed */
.activity-link-preview-image img {
    max-width: 200px !important;  
}

/* ==========================================================================
   1. BuddyBoss Profile Enhancements (Universal - Applies to all screen sizes by default)
   ========================================================================== */
/* Fix the global body font-weight */
body {
  font-weight: 400;
}

/* Hide the "Additional Information" profile tab */
#buddypress #profile-nav ul li.xprofile-additional-information {
    display: none !important;
}

/* Adjust header meta container positioning and padding */
#buddypress #member-header #item-header-content #item-header-meta {
    position: relative;
    padding-top: 0;
}

/* === Profile Header Layout and Typography === */
.profile-header-custom {
    /* We will use a more standard positioning approach for the main container */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: visible;
    height: auto;
    margin: 15px 0 4px;
    font-size: 14px;
    color: var(--bb-body-font-color);
    position: relative;
    padding: 24px;
    padding-bottom: 5px;
    margin-bottom: 0;
}

.profile-headline {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px;
    color: var(--bb-heading-text-color);
}

.profile-contact-info {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #555;
}

.profile-contact-info span {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.profile-contact-info a {
    color: var(--bb-body-font-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-contact-info a:hover {
    color: var(--bb-primary-color);
}

.profile-contact-info .bb-icon-l {
    font-size: 1em !important;
    margin-right: 0px !important;
    opacity: 1 !important;
    color: var(--bb-body-font-color) !important;
    line-height: 1 !important;
}

.profile-contact-info a:first-of-type {
    padding-right: 6px !important;
}

.separator {
    color: var(--bb-body-font-color);
    padding: 0 4px !important;
    display: inline-block !important;
}


/* === Custom SVG-Based Social Icons === */
.profile-social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 25px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
}

#buddypress .profile-social-links {
    padding: 0 !important;
    margin: 10px 0 25px !important;
}

.profile-social-links .social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

.profile-social-links .social-icon-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #000 !important;
}

.profile-social-links .social-icon-link span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    color: inherit !important;
}

.profile-social-links .social-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    transition: transform 0.2s ease !important;
    fill: #000 !important;
}

.profile-social-links .social-icon:hover svg {
    transform: scale(1.1) !important;
}

.profile-social-links .social-icon-fallback {
    background: #eee !important;
    color: #000 !important;
    font-size: 8px !important;
    text-align: center !important;
    line-height: 28px !important;
    border-radius: 4px !important;
    font-family: sans-serif !important;
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Brand Colors for SVGs */
.profile-social-links .social-icon[title="facebook"] .social-icon-link { color: #1877F2 !important; }
.profile-social-links .social-icon[title="x"] .social-icon-link { color: #000000 !important; }
.profile-social-links .social-icon[title="instagram"] .social-icon-link { color: #E4405F !important; }
.profile-social-links .social-icon[title="linkedin"] .social-icon-link { color: #0077B5 !important; }
.profile-social-links .social-icon[title="youtube"] .social-icon-link { color: #FF0000 !important; }
.profile-social-links .social-icon[title="tiktok"] .social-icon-link { color: #000000 !important; }
.profile-social-links .social-icon[title="threads"] .social-icon-link { color: #000000 !important; }
.profile-social-links .social-icon[title="bluesky"] .social-icon-link { color: #1D9BF0 !important; }
.profile-social-links .social-icon[title="whatsapp"] .social-icon-link { color: #25D366 !important; }
.profile-social-links .social-icon[title="discord"] .social-icon-link { color: #5865F2 !important; }
.profile-social-links .social-icon[title="tumblr"] .social-icon-link { color: #36465D !important; }
.profile-social-links .social-icon[title="truth social"] .social-icon-link { color: #BC1B21 !important; }
.profile-social-links .social-icon[title="mastodon"] .social-icon-link { color: #6364FF !important; }
.profile-social-links .social-icon[title="wechat"] .social-icon-link { color: #07BA07 !important; }
.profile-social-links .social-icon[title="pinterest"] .social-icon-link { color: #E60023 !important; }
.profile-social-links .social-icon[title="snapchat"] .social-icon-link { color: #FFFC00 !important; }
.profile-social-links .social-icon[title="telegram"] .social-icon-link { color: #0088CC !important; }
.profile-social-links .social-icon[title="github"] .social-icon-link { color: #181717 !important; }
.profile-social-links .social-icon[title="reddit"] .social-icon-link { color: #FF4500 !important; }
.profile-social-links .social-icon[title="twitch"] .social-icon-link { color: #9146FF !important; }
/* This is the new CSS class added by the JavaScript */
.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    /* Add a subtle shadow for a better visual effect when it's stuck */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Profile Edit Mode – Field Legend Styling
   ========================================================================== */

#buddypress #profile-edit-form .editfield fieldset legend,
#buddypress #profile-edit-form .bp-repeater-loop-item .editfield fieldset legend {
    font-size: 1.15em !important;
    font-weight: bold !important;
    color: var(--bb-heading-text-color, #333) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Specific override for Start Date - End Date */
#buddypress #profile-edit-form .editfield.field_4118 fieldset legend {
    font-size: 1.15em !important;
    font-weight: bold !important;
    color: var(--bb-heading-text-color, #333) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* ==========================================================================
   Repeater Field Visibility + Icon Fixes
   ========================================================================== */

#buddypress .bp-repeater-loop-item .repeater_tools {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

#buddypress .bp-repeater-loop-item .item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

#buddypress .bp-repeater-loop-item .item-actions .repeater_set_delete,
#buddypress .bp-repeater-loop-item .item-actions .bp-repeater-remove-item,
#buddypress .repeater_tools > .repeater_set_delete,
#buddypress .repeater_tools > .bp-repeater-remove-item,
#buddypress .bp-repeater-loop-item .item-actions a.delete-button,
#buddypress .bp-repeater-loop-item a.bp-repeater-remove-item,
#buddypress .bp-repeater-loop-item .bp-delete-button,
#buddypress .bp-repeater-loop-item .item-actions .bb-icon-trash-alt:before,
#buddypress .bp-repeater-loop-item .item-actions .dashicons-trash:before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    font-size: 1.2em !important;
    color: rgb(155, 156, 159) !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

#buddypress .bp-repeater-loop-item .item-actions .repeater_set_delete i,
#buddypress .bp-repeater-loop-item .item-actions .repeater_set_delete svg,
#buddypress .bp-repeater-loop-item .item-actions .bp-repeater-remove-item i,
#buddypress .bp-repeater-loop-item .item-actions .bp-repeater-remove-item svg,
#buddypress .repeater_tools > .repeater_set_delete i,
#buddypress .repeater_tools > .bp-repeater-remove-item i,
#buddypress .repeater_tools > .bp-repeater-remove-item svg,
#buddypress .bp-repeater-loop-item .item-actions a.delete-button i,
#buddypress .bp-repeater-loop-item .item-actions a.delete-button svg,
#buddypress .bp-repeater-loop-item a.bp-repeater-remove-item i,
#buddypress .bp-repeater-loop-item a.bp-repeater-remove-item svg,
#buddypress .bp-repeater-loop-item .bp-delete-button i,
#buddypress .bp-repeater-loop-item .bp-delete-button svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1em !important;
    line-height: 1 !important;
} 

/* ==========================================================================
   Utility Layout Cleanup
   ==========================================================================  */

.followers-wrap,
.following-wrap {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/*
* This new approach uses a general rule to hide all labels,
* and then an override to specifically make the "Basic Info" labels visible.
* This is more robust against other conflicting CSS rules.
*/
td.label {
    display: none !important;
}

/* Override the above rule to show labels ONLY for the basic info box */
.bp-widget.basic-info td.label {
    display: table-cell !important;
}

td.data {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

td.data p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

tr[class*="field_"] td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

tr[class*="field_"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

.bp-widget.overview td.data p {
    margin: 0 0 10px !important;
    line-height: 1.6 !important;
}

.bp-widget.overview td.data p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Overview Quote Styling – Enhanced
   ========================================================================== */

.bp-widget.overview blockquote {
  background-color: #f9f9f9;
  border-left: 5px solid #ccc;
  font-style: italic;
  font-size: 1.2em;
  color: #444;
  padding: 16px 24px;
  margin: 24px 0;
  position: relative;
  line-height: 1.6;
}

/* Keep text tidy inside */
.bp-widget.overview blockquote p {
  margin: 0;
  padding: 0;
}

/* Author attribution – if separated manually */
.bp-widget.overview blockquote .author {
  display: block;
  text-align: right;
  font-size: 0.95em;
  font-weight: 400;
  margin-top: 12px;
  color: #666;
  font-style: normal; /* Remove italics from attribution */
}

/* ==========================================================================
   Profile Navigation Styling – Universal Desktop
   ========================================================================== */

nav#object-nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    list-style: none !important;
}

nav#object-nav ul li {
    margin: 0 5px 5px 0 !important;
}

nav#object-nav ul li a {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-bottom: none !important;
}

nav#object-nav ul li.current a,
nav#object-nav ul li a:hover {
    background-color: #004F7A !important;
    color: #FFFFFF !important;
    border-color: #004F7A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   Edit Mode Subnav Tabs
   ========================================================================== */

#buddypress #profile-edit-form ul.button-tabs.button-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    list-style: none !important;
    margin-bottom: 20px !important;
    border-bottom: none !important;
}

#buddypress #profile-edit-form ul.button-tabs.button-nav li {
    margin: 0 5px 5px 0 !important;
}

#buddypress #profile-edit-form ul.button-tabs.button-nav li a {
    background-color: #f8f8f8 !important;
    color: #666 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border-bottom: none !important;
}

#buddypress #profile-edit-form ul.button-tabs.button-nav li.current a,
#buddypress #profile-edit-form ul.button-tabs.button-nav li a:hover {
    background-color: #DBEEF8 !important;
    color: #0077B5 !important;
    border-color: #0077B5 !important;
    box-shadow: 0 1px 3px rgba(0, 119, 181, 0.2) !important;
    transform: translateY(-1px) !important;
}


/* ==========================================================================
   Sticky Submit Button Logic (Universal)
   ========================================================================== */

#buddypress #profile-edit-form .submit {
  position: fixed !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 960px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #ffffff !important;
  padding: 15px 24px !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
  z-index: 9999 !important;
  border-top: 1px solid #eee !important;
  display: block !important;
  clear: both !important;
}

#buddypress #profile-edit-form.standard-form .submit {
  text-align: left !important;
}

#buddypress #profile-edit-form.experience .submit,
#buddypress #profile-edit-form.education .submit,
#buddypress #profile-edit-form.certifications .submit {
  text-align: right !important;
}

#buddypress #profile-edit-form .submit #btn_add_repeater_set,
#buddypress #profile-edit-form .submit input[type="submit"] {
  float: none !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

#buddypress #profile-edit-form .submit #btn_add_repeater_set {
  margin-right: 10px !important;
}

#buddypress #item-body #profile-edit-form {
  padding-bottom: 80px !important;
}

/* ==========================================================================
   Overflow Visibility Reinforcement
   ========================================================================== */

body {
  overflow-y: visible !important;
  overflow-x: visible !important;
}

#buddypress {
  overflow-y: visible !important;
  overflow-x: visible !important;
}

body:not(.page-template-page-fullscreen,.elementor-page) .site,
.site {
  overflow-x: visible !important;
  overflow-y: visible !important;
  overflow: visible !important;
}

body.buddypress-page #buddypress .profile-edit-form,
body.buddypress-page #buddypress .profile-body,
body.buddypress-page #buddypress .bp-content-flex,
body.buddypress-page #buddypress .bp-wrap,
body.buddypress-page #buddypress .buddypress-wrap,
body.buddypress-page #buddypress .main-content,
body.buddypress-page #buddypress .entry-content,
body.buddypress-page #buddypress .repeater_group_outer,
body.buddypress-page #buddypress .repeater_tools,
body.buddypress-page #buddypress .item-actions {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
/* ==========================================================================
   Mobile View Adjustments (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
  .profile-header-custom {
    display: block !important;
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center;
    padding: 15px;
    padding-bottom: 10px;
  }

  .profile-headline {
    text-align: center;
  }

  .profile-contact-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px auto !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .profile-contact-info span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .profile-contact-info .separator {
    display: inline-block !important;
    padding: 0 4px !important;
  }

  .profile-social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .profile-social-links .social-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 2px !important;
  }

  #buddypress #member-header #item-header-content #item-buttons {
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important;
  }

  #buddypress #member-header #item-header-content #item-buttons .flex {
    justify-content: center !important;
  }

  #buddypress #profile-edit-form .field-visibility-settings-toggle {
    font-size: 0.7em !important;
    padding: 8px 5px !important;
    white-space: nowrap !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #buddypress #profile-edit-form .field-visibility-settings-toggle a {
    white-space: nowrap !important;
    margin-left: 3px !important;
    display: inline-block !important;
    transform: translateY(-1px) !important;
  }

  #buddypress #profile-edit-form .submit {
    bottom: 10px !important;
    padding: 10px 15px !important;
  }

  #buddypress #item-body #profile-edit-form {
    padding-bottom: 80px !important;
  }

  nav#object-nav ul {
    justify-content: flex-start !important;
    margin-bottom: 5px !important;
  }

  nav#object-nav ul li {
    margin-bottom: 0px !important;
  }

  nav#object-nav ul li a {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: 1px solid #0077B5 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-weight: 600 !important;
  }

  nav#object-nav ul li.current a,
  nav#object-nav ul li a:hover {
    background-color: #004F7A !important;
    color: #FFFFFF !important;
    border-color: #004F7A !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  }
}
/* ==========================================================================
   BuddyBoss Profile Navigation Overrides
   ========================================================================== */

.bb-template-v2 nav#object-nav > ul > li > a {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}

.bb-template-v2 nav#object-nav > ul > li.selected > a,
.bb-template-v2 nav#object-nav > ul > li > a:hover {
  background-color: #0077B5 !important;
  color: #fff !important;
  border: none !important;
}

.bb-template-v2 nav#object-nav > ul > li.selected > a {
  border-bottom: none !important;
}

/* ==========================================================================
   BuddyBoss Mobile Nav Adjustments (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
  .bb-template-v2 nav#object-nav ul {
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .bb-template-v2 nav#object-nav ul li a .bb-single-nav-item-point {
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    background-color: #f0f0f0 !important;
    color: #333 !important;
  }

  .bb-template-v2 nav#object-nav ul li.selected a .bb-single-nav-item-point,
  .bb-template-v2 nav#object-nav ul li a:hover .bb-single-nav-item-point {
    background-color: #0077B5 !important;
    color: #fff !important;
  }

  .bb-template-v2 nav#object-nav > ul > .selected > a .bb-single-nav-item-point {
    border-bottom: none !important;
  }
}

/* ==========================================================================
   BuddyBoss "More" Dropdown Styling
   ========================================================================== */

.sub-menu.bb_more_dropdown li a {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  display: block !important;
  text-decoration: none !important;
}

.sub-menu.bb_more_dropdown li a:hover,
.sub-menu.bb_more_dropdown li.current a {
  background-color: #0077B5 !important;
  color: #fff !important;
}

/* Add spacing between More dropdown items */
.sub-menu.bb_more_dropdown li {
  margin-bottom: 6px;
}

/* ==========================================================================
   High-Specificity Tab Style Matching
   ========================================================================== */

.bb-template-v2 .buddypress-wrap nav#object-nav > ul > li > a {
  display: flex !important;
  align-items: center;
  padding: 0 15px !important;
  line-height: 29px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background-color: var(--bb-content-alternate-background-color) !important;
  color: var(--bb-body-body-text-color) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.bb-template-v2 .buddypress-wrap nav#object-nav > ul > li.selected > a,
.bb-template-v2 .buddypress-wrap nav#object-nav > ul > li > a:hover {
  background-color: #555 !important;
  color: #fafafa !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Social Icon SVG Fixes
   ========================================================================== */

.social-icon-link.social-icon-fallback {
  display: none !important;
}

.profile-social-links .social-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 8px;
  will-change: transform;
  transform: translateZ(0);
}

.profile-social-links .social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #000 !important;
}

.social-icon-isolation svg {
  all: unset;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important;
}
/* ==========================================================================
   BuddyBoss Element Suppression for Luminary Profiles
   ========================================================================== */

.member-type-luminary .followers-wrap,
.member-type-luminary .following-wrap,
.member-type-luminary .friendship-button,
.member-type-luminary .follow-button,
.member-type-luminary .send-message,
.member-type-luminary .report-content,
.member-type-luminary .block-member,
.member-type-luminary .switch-button,
.member-type-luminary .bb_more_options {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Focus Area Tag Layout
   ========================================================================== */

.focus-area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0px;
  padding: 2px;
}

.focus-tag {
  background-color: #eef2f7;
  color: #333;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-block;
  border: 1px solid #ccc;
  transition: background-color 0.2s ease;
}

.focus-tag:hover {
  background-color: #0077B5;
  color: #fff;
  border-color: #0077B5;
  cursor: default;
}

.focus-area-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
  color: #0077B5;
}

.bp-widget.focus-areas td.data .focus-tag {
  all: unset;
  background-color: #eef2f7;
  color: #333;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-block;
  border: 1px solid #ccc;
  transition: background-color 0.2s ease;
}

/* Table Cleanup */
.bp-widget.focus-areas tr {
  margin-bottom: 4px;
}
.bp-widget.focus-areas h4 {
  margin-bottom: 6px;
}
.bp-widget.focus-areas table {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.bp-widget.focus-areas tr:empty {
  display: none !important;
}
.bp-widget.focus-areas tr td.data p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Optional fallback style */
span.focus-tag {
  all: unset;
  composes: focus-tag;
}

/* ==========================================================================
   Key Initiatives Logo Grid
   ========================================================================== */
.project-logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.project-logos-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  text-decoration: none;
  position: relative;
}

.project-logos-grid img {
  height: clamp(50px, 5vw, 75px);
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.project-logos-grid img:hover {
  transform: scale(1.05);
}

.project-logos-grid div {
  font-size: 13px;
  margin-top: 6px;
  color: #333;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.project-logos-grid a:hover div {
  opacity: 1;
}

/* 📱 Mobile Adjustments */
@media (max-width: 768px) {
  .project-logos-grid {
    justify-content: center;
    gap: 10px;
  }

  .project-logos-grid img {
    height: 50px;
  }

  .project-logos-grid div {
    font-size: 12px;
  }
}


/* ==========================================================================
   Featured Interview Video Styling
   ========================================================================== */

iframe {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 32px;
}

.video-preview {
  position: relative;
  width: 100%;
  max-width: 720px;
  cursor: pointer;
  margin: 0 auto 24px;
}

.video-preview img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-family: sans-serif;
  line-height: 1;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  padding: 12px 18px;
}

.responsive-video {
  margin-top: 24px !important;
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 405px;
}

.responsive-video iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: none;
  display: block;
}

.field_9650 td.data {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field_9650 td.data p {
  display: block;
  margin: 0 0 24px 0;
  padding: 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.field_9650 td.data > p:not(:empty) {
  margin-bottom: 24px !important;
}

.field_9650 .responsive-video {
  margin-top: 24px;
}

.field_9650 iframe {
  margin-top: 0;
}


/* ==========================================================================
   Mobile Fine-Tuning (≤640px): Video Aspect Ratio, Focus Tag Gaps, Logo Sizing
   ========================================================================== */

@media (max-width: 640px) {
  .responsive-video {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .focus-area-tags {
    gap: 8px;
  }

  .luminary-logo-gallery  img {
    height: 50px;
  }
}

/* ==========================================================================
   Impact Snapshot Grid (Responsive)
   ========================================================================== */
.impact-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 40px;
}

.impact-card {
  text-align: center;
  padding: 12px 8px;
  border-radius: 8px;
  background-color: #f7f7f7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  transition: all 0.3s ease;
}

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

.impact-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  line-height: 1.2;
}

.impact-label {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .impact-snapshot-grid {
    grid-template-columns: repeat(2, 1fr); /* Force 2 cards per row */
    gap: 20px;
    padding-inline: 16px;
  }
}


/* ==========================================================================
  CSS for New Skills Fieldset
   ========================================================================== */
.skills-chip-wrapper {
  margin-top: 20px;
  margin-bottom: 40px;
}

.skills-chip-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.skills-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skills-chip {
  background-color: #f0f0f5;
  color: #333;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease;
}

.toggle-chips-btn {
  margin-top: 12px;
  background: none;
  border: none;
  color: #0077cc;
  font-size: 0.85rem;
  cursor: pointer;
}

.skills-chip-group {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e4e4; /* soft gray line */
}

.skills-chip:hover {
  background-color: #e4e4ea;
}

.hidden-chip {
  display: none;
}

/* Start hidden with opacity 0 and scale down */
.skills-chip.hidden-chip {
  display: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Active fade-in state */
.skills-chip.fade-chip {
  display: inline-block;
  opacity: 1;
  transform: scale(1);
}


/* ==========================================================================
  CSS for New Investment Focus Fieldset
   ========================================================================== */
.investment-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 48px;
}

.investment-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border-left: none;
  border-top: 4px solid #0073aa;
}

.investment-card h4 {
  font-size: 1rem;
  margin-bottom: 12px;
  color: #222;
  font-weight: 600;
}

.pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  background: #e0e0e0;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: #333;
  transition: background 0.3s;
}

.pill:hover {
  background: #d0d0d0;
}

/* Category-specific pill colors */
.stage .pill { background: #d1e7dd; }
.industry .pill { background: #cfe2ff; }
.geography .pill { background: #f8d7da; }

/* Add a soft background tint per card type */
.stage.investment-card { background-color: #f6fcf9; }
.industry.investment-card { background-color: #f7faff; }
.geography.investment-card { background-color: #fff7f8; }


/* ==========================================================================
   Brand Partners Section Styles
   ========================================================================== */
.brand-partners-section {
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid #ddd;
}

.brand-partners-title {
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.brand-logo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.brand-logo-card {
  width: 180px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-logo-card:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.brand-logo {
  height: 120px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.brand-tap-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  background: #f5f5f5;
  padding: 6px 10px;
  border-radius: 4px;
  display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .brand-logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
  }

  .brand-logo-card {
    flex: 0 1 calc(25% - 16px); /* 4 per row */
    min-width: 140px;
    max-width: 180px;
  }

  .brand-logo {
    height: 90px;
  }
}

  .brand-tap-label {
    font-size: 12px;
    padding: 4px 8px;
  }


/   * Toggle button    */
.overview-toggle {
  display: inline-block;
  margin: 12px 0;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.2s ease;
}

.overview-toggle:hover {
  background-color: #e3e3e3;
}

/* Overview container with max-height preview */
.overview-wrapper {
  max-height: 300px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

/* Gradient fade at bottom */
.overview-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* Expanded state removes height limit and fade */
.overview-wrapper.expanded {
  max-height: none;
}

.overview-wrapper.expanded::after {
  display: none;
}

/* Button styling */
.overview-toggle {
  margin: 12px 0;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.2s ease;
}

.overview-toggle:hover {
  background-color: #e3e3e3;
}

/* Social Media Reach styling for Luminary profiles */
.profile-follower-count {
  font-size: 0.85rem;           /* More compact label size */
  font-weight: 400;             /* Regular weight */
  color: #000000;               /* Solid black */
  margin: 6px 0;
}

.profile-follower-count .follower-number {
  font-size: 0.95rem;           /* Slightly larger number */
  font-weight: 500;             /* Medium-light emphasis */
  color: #000000;
}

/* Styling for registration page description text */
.custom-description {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
  margin-bottom: 12px;
}

/* --- Luminary Directory Layout Wrapper --- */
.luminary-directory-wrapper {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Sidebar placeholder for future use */
.luminary-sidebar {
  width: 250px;
  min-width: 250px;
}

/* --- Luminary Grid Styling --- */
.luminary-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- Order Dropdown Placement --- */
.directory-order-select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}
.directory-order-select label {
  display: none;
}
.directory-order-select select {
  border: 1px solid #ccc;
  background-color: #fafafa;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #444;
  white-space: nowrap;
}

/* --- Members List Grid --- */
.bp-luminary-directory .members-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* --- Luminary Card Styling --- */
.item-entry.luminary-card {
  background-color: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* --- Avatar Styling --- */
.card-avatar {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  position: relative;
}
.avatar-wrapper {
  width: 100%;
  height: 100%;
}
.avatar-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/*  Luminary Badge */
.luminary-card .luminary-badge-overlay {
  position: absolute;
  bottom: -8px;              /* Move badge to hug bottom edge of avatar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;                /* Ensure it floats above background elements */
}

.luminary-card .luminary-badge {
  display: inline-block;     /* Added for more consistent layout behavior */
  background-color: rgb(215, 223, 255);
  color: rgb(56, 93, 255);
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25px;
  padding: 5px 15px;
  border-radius: 6px;
  line-height: 13px;         /* Helps vertically balance smaller text */
  white-space: nowrap;       /* Keeps it from breaking into two lines */
  text-align: center;
}

/* --- Name Styling --- */
.card-name h4 {
  margin: 6px 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
}
.card-name h4 a {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: rgb(30, 33, 50);
  text-decoration: none;
}

/* --- Responsive Grid Adjustments --- */
@media (max-width: 768px) {
  .bp-luminary-directory .members-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .luminary-directory-wrapper {
    flex-direction: column;
  }

}

/* --- Luminary Card Grid --- */
.bp-luminary-directory .members-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 0; /* Reset to avoid conflicting margin logic */
}

/* --- Spacing Below Grid / Above Pagination --- */
.bp-luminary-directory .bp-pagination.bottom {
  margin-top: 60px;
  font-family: 'Open Sans', sans-serif;
}

/* --- Pagination Layout --- */
.bp-luminary-directory .bp-pagination.bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ✅ LEFT align everything */
  gap: 8px;
}

/* --- Viewing Count Text --- */
.bp-luminary-directory .bp-pagination.bottom .pag-count p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
  text-align: left; /* ✅ Ensure text aligns left */
}

/* --- Pagination Buttons --- */
.bp-luminary-directory .bp-pagination.bottom .bp-pagination-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start; /* ✅ Align links left */
}

.bp-luminary-directory .bp-pagination.bottom .bp-pagination-links a,
.bp-luminary-directory .bp-pagination.bottom .bp-pagination-links span {
  padding: 8px 12px;
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* --- Hover and Active States --- */
.bp-luminary-directory .bp-pagination.bottom .bp-pagination-links a:hover {
  background-color: #eee;
}

.bp-luminary-directory .bp-pagination.bottom .bp-pagination-links .current {
  background-color: rgb(56, 93, 255);
  color: #fff;
  border-color: rgb(56, 93, 255);
}

/* --- Responsive Tweaks for Smaller Screens --- */
@media (max-width: 768px) {
  .bp-luminary-directory .members-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .bp-luminary-directory .bp-pagination.bottom {
    margin-top: 40px;
    align-items: flex-start; /* ✅ Maintain left alignment on mobile */
  }

  .bp-luminary-directory .bp-pagination.bottom .bp-pagination-links {
    justify-content: flex-start;
  }

  .bp-luminary-directory .bp-pagination.bottom .bp-pagination-links a,
  .bp-luminary-directory .bp-pagination.bottom .bp-pagination-links span {
    padding: 6px 10px;
  }
}

/* --- Buddyboss Registration Form --- */
.custom-description {
  font-size: 0.9em;
  color: #555;
  margin-top: 6px;
  line-height: 1.4;
}
.custom-description strong {
  color: #222;
}

/* --- Investment Focus Section in Investor Profile --- */
.investment-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-left: 4px solid #0073aa; /* Optional accent */
}

.investment-card h4 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #222;
  font-weight: 600;
}

.pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.stage .pill {
  background-color: #d1e7dd;
  color: #1b4d3e;
}

.industry .pill {
  background-color: #cfe2ff;
  color: #003366;
}

.geography .pill {
  background-color: #f8d7da;
  color: #6b1f1f;
}

.range .pill {
  background-color: #fff3cd;
  color: #665c00;
}

.fund .pill {
  background-color: #e2e3e5;
  color: #3c3c3c;
}

.stage .pill:hover {
  background-color: #c4dbd2;
}

.industry .pill:hover {
  background-color: #b8d4ff;
}

.geography .pill:hover {
  background-color: #f3c2c7;
}

.range .pill:hover {
  background-color: #ffe8a1;
}

.fund .pill:hover {
  background-color: #d6d7d9;
}

/* --- Portfolio Card - Investor Profile --- */
.portfolio-grid {
  background-color: #f5f7fa;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Generic styling for all portfolio cards */
.portfolio-card {
  background-color: #f0f6ff; /* matches industry focus card */
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-left: 4px solid #0073aa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card content */
.portfolio-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.portfolio-meta {
  font-size: 0.85rem;
  color: #555;
}

/* Pill container */
.portfolio-meta .pill-wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;   /* horizontal spacing between pills */
  row-gap: 8px;       /* vertical spacing between wrapped rows */
  margin-top: 8px;    /* spacing from content above */
}

/* Pill styling */
.portfolio-meta .pill {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin: 0; /* reset any conflicting margins */
  flex: 0 1 auto;
  min-height: 28px;
}

/* Category-specific pill colors */
.pill.industry {
  background-color: #cfe2ff !important;
  color: #003366 !important;
}

.pill.stage {
  background-color: #d1e7dd !important;
  color: #1b4d3e !important;
}

.pill.location {
  background-color: #f8d7da !important;
  color: #6b1f1f !important;
}

/* Hover effects */
.pill.industry:hover {
  background-color: #b8d4ff !important;
}

.pill.stage:hover {
  background-color: #c4dbd2 !important;
}

.pill.location:hover {
  background-color: #f3c2c7 !important;
}

/* Portfolio link */
.portfolio-link {
  font-weight: 500;
  color: #0073aa;
  text-decoration: none;
  margin-top: 8px;
}

.portfolio-link:hover {
  text-decoration: underline;
}

.portfolio-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* Creator Snapshot Platform Icon */
.platform-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
  object-fit: contain;
}

/* Creator Snapshot Tier Badge */
.reach-tier-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 4px;
  vertical-align: middle;
}

/* Reach Value Styling */
.reach-value {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
}

/* Tier Badge Styling */
.reach-tier-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
  margin: 0 auto;
}

/* Creator Snapshot Grid */
.bp-widget.creator-snapshot .impact-snapshot-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
}

.bp-widget.creator-snapshot .impact-card {
  padding: 10px 6px;
  border-radius: 6px;
}

.bp-widget.creator-snapshot .impact-value {
  font-size: 1.25rem;
}

.bp-widget.creator-snapshot .impact-label {
  font-size: 0.75rem;
  max-width: 100%;
}

@media (max-width: 767px) {
  .bp-widget.creator-snapshot .impact-snapshot-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-inline: 12px;
  }

  .bp-widget.creator-snapshot .impact-card {
    width: 100%;
    padding: 12px;
  }
}


/* Tag cloud layout for Expertise field */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: 4px;
}

.tag-cloud span {
  background-color: #eee;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #333;
}

/* Consistent card height for Expert Snapshot */
.bp-widget.expert-snapshot .impact-card {
  min-height: 140px;
}

/* Consistent card height for Venture Scout Snapshot */
.bp-widget.venture-scout-snapshot .impact-card {
  min-height: 140px;
}

/* — Override Generic Pills for the Languages-Spoken Section — */
/* === LANGUAGES: full-width row & no wrap === */
.profile-languages-spoken {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0.5rem 0 0 0 !important;
    flex-basis: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

/* === LANGUAGES: pill styling === */
.profile-languages-spoken .pill {
    background-color: #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 13px !important;
    color: #333 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Optional: retain if you still need a bold label */
.profile-languages-spoken .label {
    font-weight: bold !important;
    margin-right: 8px !important;
}

/* === Fix for Sticky Header === */
body.buddypress .bp-user #profile-sticky-info {
    position: sticky !important;
    top: 0 !important;
    background-color: white !important;
    z-index: 999 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 24px !important;
    transition: all 0.2s ease-in-out;
}

/* === PIN HEADER ACTIONS to the top-right === */
.users-header #item-header-content {
    position: relative !important;
}

.users-header #item-header-content .member-header-actions-wrap {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    margin: 0 !important;
    align-self: auto !important;
}

/* ==========================================================================
   FIX for Repeater Field Icons
   ========================================================================== */

/* Fix for the edit/delete icon SVGs being transparent */
.repeater_tools a.repeater_set_edit::before,
.repeater_tools a.repeater_set_delete::before {
    opacity: 1 !important;
}

/* This targets the <i> tags and makes sure they are displayed */
.repeater_tools i.dashicons {
    display: inline-block !important;
}

/* ==========================================================================
   CSS styling for subheaders html section blocks in gravityform
   ========================================================================== */
.gform_wrapper .form-subheading {
  font-size: 1.1em;
  margin: 1.2em 0 0.5em;
  font-weight: 600;
  color: #333;
}
.gform_wrapper .form-subheading + p {
  margin-bottom: 1em;
  color: #555;
}


/* ==========================================================================
   CSS to Style the Box around instruction block in gravityform
   ========================================================================== */
/* Container around your instruction block */
.gform_wrapper .instruction-box .instruction-content {
  background-color: #f5f8fa;        /* light gray-blue background */
  border-left: 4px solid #0073e6;   /* accent border in your brand color */
  padding: 1em 1.5em;               /* space inside the box */
  margin-bottom: 0.5em;             /* space below before the field */
  border-radius: 4px;               /* soften the corners */
  color: #333;                      /* ensure good readability */
  max-width: 600px;                 /* limit line length for readability */
  margin: 0 auto 0.5em;
  padding-left: 1em;
  padding-right: 1em;
}


/* Limit line length for readability  */
.classification-group .gfield_description {
  max-width: 600px;
  margin: 0.3em auto 1em;
}


/* ==========================================================================
   shorten the width of your form fields and center the entire form on the page
   ========================================================================== */
#gform_wrapper_1, #gform_wrapper_3 {
    max-width: 700px;
    margin: 0 auto;
}

#gform_wrapper_1 .gform_body ul.gform_fields li.gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]),
#gform_wrapper_3 .gform_body ul.gform_fields li.gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]),
#gform_wrapper_1 .gform_body ul.gform_fields li.gfield select,
#gform_wrapper_3 .gform_body ul.gform_fields li.gfield select,
#gform_wrapper_1 .gform_body ul.gform_fields li.gfield textarea,
#gform_wrapper_3 .gform_body ul.gform_fields li.gfield textarea {
    width: 100%;
}

/* ==========================================================================
   Center the page’s H1 on the first page of Gravityform listing
   ========================================================================== */
.page-id-101675 .entry-header,
.page-id-103208 .entry-header,
.page-id-103496 .entry-header {
  text-align: center;
}

.page-id-103208 .entry-header .entry-title,
.page-id-103496 .entry-header .entry-title,
.page-id-101675 .entry-header .entry-title {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}

/* Wrap the entire form in a soft background */
.page-id-103208 #gform_wrapper_1,
.page-id-103496 #gform_wrapper_3,
.page-id-101675 #gform_wrapper_1 {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5em;
  border-radius: 6px;
}

/* ==========================================================================
   Fix spacing for bullet points inside instruction block for description field
   ========================================================================== */
.gform_wrapper .instruction-box ul {
    list-style-position: inside; /* Positions the bullet inside the list item box */
    padding-left: 15px; /* Adds space between the border and the bullet */
    margin-left: 0;
}


/* ==========================================================================
   Add space above form buttons and under consent field
   ========================================================================== */
#gform_wrapper_1 .gform-page-footer,
#gform_wrapper_3 .gform-page-footer {
    margin-top: 50px !important; /* Adjust this value as needed to increase space */
}

/* ==========================================================================
   Target all GF selects, or scope to your form ID
   ========================================================================== */
#gform_wrapper_1 .gform_body select,
#gform_wrapper_3 .gform_body select,
.gform_wrapper select {
  /* Make sure the line-height is at least as tall as your font */
  line-height: 1.4;    /* tweak up or down until the text no longer cuts off */
  
  /* Give the select some vertical padding so Chrome expands it taller */
  padding: 0.5em 0.75em;  

  /* Force a minimum height to guarantee room for your placeholder text */
  min-height: 2.75em;    /* ~44px; adjust if your theme’s font-size is different */
}

/* Optional: if your theme is shrinking the <option> text itself, reset it */
#gform_wrapper_1 .gform_body select option,
#gform_wrapper_3 .gform_body select option {
  line-height: 1.4;
}


/* ==========================================================================
   Hide the original BuddyBoss checkbox list when Select2 is injected
   ========================================================================== */
/* Hide original checkbox containers for both markup types */
.bb-profile-select2 + .input-options.checkbox-options,
.bb-profile-select2 ~ .bp-checkbox-wrap {
  display: none !important;
}

/* Make the Select2 box match BuddyBoss form fields */
/* 1. Style the Select2 box to match BuddyBoss inputs */
.bb-profile-select2 ~ .select2-container--default .select2-selection--multiple {
  border: 1px solid #d5dadf;
  border-radius: 6px;
  padding: 8px;
  min-height: 48px;
}

/* 2. Style the pills to use #eee background and black text */
.select2-container--default .select2-selection__choice {
  background-color: #eee !important;
  color: #000 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 2px 8px !important;
  margin-right: 4px !important;
}

/* 3. Style the remove “×” icon in black */
.select2-container--default .select2-selection__choice__remove {
  color: #000 !important;
  margin-right: 5px;
}

/* Make the “×” remove icon on Select2 pills visible */
.select2-container--default .select2-selection__choice__remove {
  color: #333 !important;       /* or use #000 for pure black */
  opacity: 1 !important;        /* ensure it isn’t faded */
  font-size: 1em !important;    /* bump the size if you want */
  margin-left: 4px !important;  /* space it out from the text */
  cursor: pointer !important;   /* make it clear it’s clickable */
}

/* Optional: highlight remove icon on hover */
.select2-container--default .select2-selection__choice:hover 
  .select2-selection__choice__remove {
  color: #000 !important;
  opacity: 1 !important;
}

/* 1) Remove the default list marker on each Select2 pill */
.select2-container--default 
  .select2-selection__choice {
  list-style: none !important;
}

/* 2) Nuke any ::marker content (the pipe) */
.select2-container--default 
  .select2-selection__choice::marker {
  content: none !important;
}

/* 3) Remove any separator added via ::before or ::after on Select2 pills */
body 
  .select2-container--default 
    .select2-selection__rendered 
      .select2-selection__choice::after {
  content: none !important;
}

/* 4) ALSO remove any separator on the remove-icon span itself */
.select2-container--default 
  .select2-selection__choice__remove {
  /* zap any borders */
  border: none !important;
  /* zap any background graphic that might look like a line */
  background: none !important;
  /* tighten the padding so you don’t get ghost edges */
  padding: 0 4px !important;
}

/* 5) Nuke any ::before/::after on the remove-icon */
.select2-container--default 
  .select2-selection__choice__remove::before,
.select2-container--default 
  .select2-selection__choice__remove::after {
  content: none !important;
}

/* ==========================================================================
  Fix space under section headers in gravityforms
   ========================================================================== */
/* ──────────────────────────────────────────────
   1) Panel container “box”
   ────────────────────────────────────────────── */
body .gform_wrapper .gf-panel {
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  background-color: #fafafa !important;
  padding: 0 !important;             /* collapse the panel’s own top padding */
  margin-bottom: 24px !important;
}

/* ──────────────────────────────────────────────
   2) Section header: equal top & bottom padding
   ────────────────────────────────────────────── */
body .gform_wrapper .gf-panel h3.gsection_title {
  margin: 0 !important;              
  padding: 12px 16px !important;      /* 12px above/below, 16px left/right */
  background-color: #f5f7fa !important;
  border-bottom: 1px solid #d1d5db !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  text-align: center !important;
}

/* ──────────────────────────────────────────────
   3) Remove Gravity Forms’ auto-inserted <hr>
   ────────────────────────────────────────────── */
body .gform_wrapper .gf-panel hr.gf_clear_both {
  display: none !important;
}

/* ──────────────────────────────────────────────
   4) Match the field’s top-margin to header’s padding
   ────────────────────────────────────────────── */
body .gform_wrapper .gf-panel h3.gsection_title + .gfield {
  margin-top: 12px !important;
}

/* ──────────────────────────────────────────────
   5) (Optional) Consistent spacing between fields
   ────────────────────────────────────────────── */
body .gform_wrapper .gf-panel .gfield {
  margin-bottom: 12px !important;
}

/* Left-align and remove italics from section descriptions */
body .gform_wrapper
     .gsection_title + .gsection_description {
  text-align: left !important;
  font-style: normal !important;
  color: #555 !important;
  margin: 8px 0 16px !important;
  font-size: 0.95em !important;
}

/* ──────────────────────────────────────────────
   CSS for duration fields in opportunities type gravityform
   ────────────────────────────────────────────── */
/* Add space above the Duration fields */
#field_1_63, #field_1_62 {
    margin-top: 15px !important;
}

/* Add space above the Application Methods field */
#field_1_73 {
    margin-top: 15px !important;
}

/* ──────────────────────────────────────────────
    Base GRAVITYVIEW Variables & Card Reset
    ────────────────────────────────────────────── */
:root {
    /* Brand Colors */
    --color-primary:  #0073AA;
    --color-secondary: #E0DAB8;
    --color-cta-bg:   var(--color-primary);
    --color-cta-text: #fff;

    /* Typography */
    --font-size-base:  0.95rem;
    --line-height-base: 1.4;
    --radius-pill:     999px;
    --radius-card:     6px;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
}

/* Base Card Styling (Updated to target List View content wrapper) */
.gv-list-view-content.card {
    position: relative;
    background: #fff;
    padding: var(--spacing-md);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-lg);
    font-family: sans-serif;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ──────────────────────────────────────────────
    SHARED GRAVITYVIEW ELEMENTS STYLING
    ────────────────────────────────────────────── */

/* Canonical badge container and pill styling (single source of truth) */
.gv-card-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0;               /* collapse inline white-space gaps */
  margin-bottom: 8px;
}
.gv-card-badges .gv-badge {
  display: inline-block;
  font-size: 0.85rem;         /* restore readable font-size for children */
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-cta-text) !important;
  line-height: 1;
  background: #888;           /* fallback background */
}

/* Canonical color map (edit hex to match branding) */
.badge-pitchdeal { background: #007bff !important; }
.badge-real-estate { background: #00695c !important; }
.badge-foundermatch { background: #28a745 !important; }
.badge-services { background: #ffc107 !important; color: #111 !important; }
.badge-opportunities { background: #dc3545 !important; }
.badge-jobs { background: #6f42c1 !important; }
.badge-exithub { background: #fd7e14 !important; }

/* ──────────────────────────────────────────────
   DATE STYLING (Footer Left)
   ────────────────────────────────────────────── */
.gv-list-view-content .gv-list-view-footer-left {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #999;
    padding: 0 !important;
    white-space: nowrap;
    display: block !important;
    width: 100%;
    min-width: max-content !important;
}

.gv-list-view-content .gv-list-view-footer-left span,
.gv-list-view-content .gv-list-view-footer-left div {
    white-space: nowrap !important;
}

/* ──────────────────────────────────────────────
   Gravityview grid
   ────────────────────────────────────────────── */
.gv-list-multiple-container.gv-container {
    display: flex;
    flex-wrap: wrap;
}

.gv-list-multiple-container.gv-container .gv-list-view {
    margin-right: 15px;
    width: 320px;
}

/* ──────────────────────────────────────────────
   Gravityview card row styles
   ────────────────────────────────────────────── */
/* 1) Badge Row (now in Title slot) */
.gv-list-view-content.card .gv-field-title {
  margin-bottom: var(--spacing-sm);
}

/* -----------------------------------------------
   FINAL GRAVITYVIEW CARD STYLING & CENTERING OVERHAUL
   ----------------------------------------------- */

/* 1. Center all major elements inside the Listing Title area */
.gv-list-view-title {
    text-align: center;
    padding: var(--spacing-sm) 0;
}

/* Image wrappers (IDs 10 and 128) */
.gv-list-view-title #gv-field-1-10,
.gv-list-view-title #gv-field-1-128 {
    text-align: center;
    margin: 0 auto;
    display: block;
    line-height: 0;
}

.gv-list-view-title #gv-field-1-10 img,
.gv-list-view-title #gv-field-1-128 img {
    width: 100%;
    height: auto;
    max-width: 180px;
    border-radius: var(--radius-card);
    object-fit: cover;
    margin: var(--spacing-sm) auto var(--spacing-sm);
    display: block !important;
}

/* Name styling */
.gv-list-view-title .gv-main-name {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.gv-list-view-title .gv-main-name p {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    display: block;
    margin: 0;
}

/* Teaser text (left-aligned inside centered header) */
.gv-list-view-title .gv-field-teaser {
    text-align: left;
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* h3 header styles (keep simple) */
.gv-list-view-title h3 {
    text-align: center;
    margin: 0 0 var(--spacing-sm) 0;
    padding: 0;
}

/* Teaser row clamp */
.gv-list-view-content.card .gv-field-teaser {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metrics row */
.gv-list-view-content.card .card-metrics {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    text-align: center;
}

.gv-list-view-content.card .card-metrics .metric-line {
    margin: 4px 0;
    padding: 0;
    line-height: 1.4;
    text-align: left;
    display: inline-block;
}

.gv-list-view-content.card .gv-field-1-custom .card-metrics .metric-label {
    font-weight: 800 !important;
    color: #333;
    margin-right: 4px;
    display: inline;
}

.gv-list-view-content.card .card-metrics .metric-value {
    font-weight: 400;
}

/* Make industry pills render exactly like expertise pills */
.card-metrics .industry-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
  color: #0f172a;
  background: #e6f0ff;
  text-transform: none;
  font-size: 13px;
  vertical-align: middle;
  line-height: 1;
}

/* Expertise pills inside metrics */
.card-metrics .expertise-list {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 6px;
}
.card-metrics .expertise-list .expertise-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
  color: #0f172a;
  background: #e6f0ff;
  text-transform: none;
  font-size: 13px;
  vertical-align: middle;
  line-height: 1;
}

/* CSS for opportunity pill tag */
.card-metrics .opportunity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
  color: #0f172a;
  background: #e6f0ff;
  text-transform: none;
  font-size: 13px;
  vertical-align: middle;
  line-height: 1;
}


/* Scoped visual bold for metric labels — non-invasive fallback
   Place this just before the "Final hardening" / badge block */
.gv-list-view-content.card .card-metrics .metric-label {
  font-weight: 700 !important;
  -webkit-text-stroke: 0.25px rgba(0,0,0,0.28);
  text-stroke: 0.25px rgba(0,0,0,0.28);
  display: inline !important;
}

/* Match View Details button to badge styling */
.card-cta {
  text-align: center;
}

.card-cta a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px; /* Rounded but not pill */
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  background: #6c757d; /* Neutral grey */
  color: #ffffff;
  margin: 0 auto;
}

.card-cta a:hover {
  background: #5a6268;
}

/* ──────────────────────────────────────────────
   Final hardening: ensure badge rules are not overridden
   Place this at the very end of GravityView-related CSS
   ────────────────────────────────────────────── */

/* Re-assert canonical badge child styles with slightly higher specificity */
.gv-list-view-title .gv-card-badges .gv-badge,
.gv-list-view-content .gv-card-badges .gv-badge {
  display: inline-block;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-cta-text) !important;
  line-height: 1;
  white-space: nowrap;
}

/* Provide a clear fallback by position while JS normalizes classes */
.gv-card-badges .gv-badge:first-child { background: #007bff !important; }
.gv-card-badges .gv-badge:nth-child(2) { background: #00695c !important; }

/* explicit canonical color map repeated here to beat later overrides if needed */
.badge-pitchdeal { background: #007bff !important; }
.badge-foundermatch { background: #28a745 !important; }
.badge-services { background: #ffc107 !important; color: #111 !important; }
.badge-opportunities { background: #dc3545 !important; }
.badge-jobs { background: #6f42c1 !important; }
.badge-exithub { background: #fd7e14 !important; }

/* Card layout: make each card a column with footer aligned bottom */
.gv-list-view-content.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* allow cards to stretch to grid cell height */
}

/* The main body/content area should consume available space */
.gv-list-view-content.card .gv-field-1-custom,
.gv-list-view-content.card .gv-list-card-body,
.gv-list-view-content.card .card-body {
  flex: 1 1 auto; /* grow/shrink to fill vertical space */
  display: flex;
  flex-direction: column;
}

/* Ensure the teaser and metrics stack naturally and can take space */
.gv-list-view-content.card .gv-field-teaser {
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
}

/* Make metrics occupy remaining space when needed */
.gv-list-view-content.card .card-metrics {
  flex: 0 0 auto;
  margin-top: auto; /* push metrics toward bottom of content area if space allows */
}

/* Footer/CTA container stays at the bottom */
.gv-list-view-content.card .card-footer,
.gv-list-view-content.card .gv-card-footer,
.gv-list-view-content.card .view-details-wrapper {
  margin-top: 0.75rem;
  flex: 0 0 auto;
}


/* If your card grid uses rows of uneven heights, enforce equal-height grid cells */
.gv-card-grid .gv-list-view-content.card,
.gv-list-view-content.card {
  min-height: 420px; /* adjust to match your design — sets consistent card box height */
}

/* Limit teaser height for consistent visual density */
.gv-field-teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* show 3 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Normalize avatar and badge sizing so rows align */
.gv-list-view-content.card .profile-image,
.gv-list-view-content.card .card-avatar img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
}

/* Tighten and unify metric spacing */
.gv-list-view-content.card .card-metrics {
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  min-height: 66px; /* tune to match typical two-line metric area */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gv-list-view-content.card .metric-line { margin: .25rem 0; }

/* Visual hierarchy for company/name and role */
.gv-list-view-content.card .card-title,
.gv-list-view-content.card .founder-name,
.gv-list-view-content.card .service-provider-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
}

/* CSS for N+ expertise pill tags in gravityview service card */
.expertise-pill.expertise-more {
  background: rgba(15,23,42,0.08);
  color: #0f172a;
  text-decoration: none;
}

/* CSS for salary suffix gravityview jobs card */
.card-metrics .salary-suffix {
  margin-left: 4px;
  font-weight: 400;
  white-space: nowrap;
}

/* -----------------------------------------------
   CRITICAL FIX: Layout & BR Killer
   ----------------------------------------------- */

/* 1. Kill the injected line breaks added by Gravity Forms/GravityView */
.gv-list-view-content.card .card-metrics br {
    display: none !important;
}

/* 2. Use FLEXBOX on the metric line to force horizontal layout, even if breaks are present */
.gv-list-view-content.card .card-metrics .metric-line {
    /* Keep existing rules to prevent regression */
    margin: 4px 0;
    padding: 0;
    line-height: 1.4;
    text-align: left;
    
    /* NEW FLEXBOX RULES: Forces content onto one line and aligns elements */
    display: flex !important; /* Force flex mode */
    flex-wrap: nowrap; /* Prevent wrapping to next line */
    align-items: baseline; /* Align label and value vertically */
    gap: 6px; /* Standard spacing between label and value */
}

/* 3. Re-assert the display for pills, ensuring they don't break flex rules */
.card-metrics .expertise-list,
.card-metrics .industry-value,
.card-metrics .opportunity-pill {
    display: inline-flex !important;
}

/* -----------------------------------------------
   FINAL BADGE COLOR HARDENING
   ----------------------------------------------- */
.gv-list-view-content.card .gv-badge.badge-pitchdeal { background: #007bff !important; }
.gv-list-view-content.card .gv-badge.badge-foundermatch { background: #28a745 !important; }
.gv-list-view-content.card .gv-badge.badge-services { background: #ffc107 !important; }
.gv-list-view-content.card .gv-badge.badge-opportunities { background: #dc3545 !important; }
.gv-list-view-content.card .gv-badge.badge-jobs { background: #6f42c1 !important; }
.gv-list-view-content.card .gv-badge.badge-exithub { background: #fd7e14 !important; }

/* -----------------------------------------------
   IMAGE SIZING UNIFORMITY FIX
   ----------------------------------------------- */
/* Target the specific image wrappers by ID (10 and 128) */
.gv-list-view-title #gv-field-1-10,
.gv-list-view-title #gv-field-1-128 {
    /* Set a consistent size for the entire wrapper container */
    height: 180px; /* Example height: adjust this to match the largest image size */
    width: 100%;
    max-width: 180px; /* Limits overall size */
    margin: 0 auto;
    overflow: hidden; /* Crucial: Hides any spillover */
}

.gv-list-view-title #gv-field-1-10 img,
.gv-list-view-title #gv-field-1-128 img {
    width: 100%;
    height: 100%; /* Image now fills the fixed-height container */
    object-fit: cover !important; /* CRITICAL: Ensures the image covers the area without distortion */
    border-radius: var(--radius-card);
    margin: 0 auto; /* Center the image within its container */
    display: block;
}

/* FIX: Ensure content displays inside pill wrappers */
.card-metrics .opportunity-pill, 
.card-metrics .industry-value {
    /* Ensure the wrapper is visible and holds content */
    display: inline-flex !important;
    
    /* Ensure no text-hiding rule is active */
    font-size: 13px !important; 
    line-height: 1 !important;
    text-indent: 0 !important; 
}

/* CSS for single listing services */
/* Container and layout */
.services-hero.centered-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 32px;
  padding: 20px;
}

/* Title */
.services-hero .listing-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 16px;
}

/* Image wrapper and image (square) */
.services-hero .hero-image-wrap {
  display: inline-block;
  width: 260px;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 0 18px;
  background: #f4f4f4;
}
.services-hero .gv-hero-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Profile link styling */
.services-hero .buddyboss-profile-link {
  display: inline-block;
  padding: 8px 14px;
  background: #0078d4;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
}
.services-hero .buddyboss-profile-link:focus,
.services-hero .buddyboss-profile-link:hover {
  background: #005ea6;
}

/* Force container behavior for the single-entry field area shown in DOM */
.gv-field-1-custom .gv-grid-value .expertise-list {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 8px !important;
  line-height: 1 !important;
  white-space: normal !important;
  font-size: 1rem !important;
}

/* Force pill appearance for that same single-entry area */
.gv-field-1-custom .gv-grid-value .expertise-list .expertise-pill,
.gv-grid-col-1-1 .gv-field-1-custom .expertise-list .expertise-pill {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #e6f0ff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Expertise label on its own line and pills inline-wrapping (scoped, replace older block) */
.expertise-row {
  display: block;
  margin-top: 8px;
}

/* label forced to its own line; keep existing visual styles */
.expertise-row > strong,
.expertise-row .expertise-label {
  display: block;
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  line-height: 1;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* pills container: inline-flex so pills sit on the next line and wrap */
.gv-field-1-custom .expertise-list,
.gv-grid-col-1-1 .gv-field-1-custom .expertise-list,
.expertise-row .expertise-list {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  white-space: normal !important;
  margin: 0;
}

/* pill visuals (keep or adjust to taste) */
.expertise-pill {
  display: inline-block;
  background: #f3f4f6;
  color: #0f172a;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* "+N" link appearance (used in both contexts) */
.expertise-pill.expertise-more {
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.08);
  color: #0078d4;
  padding: 6px 10px;
  text-decoration: none;
}

/* keep GV star UI visible and style fallback text */
.hero-reviews .gv-star-rating { visibility: visible !important; opacity: 1 !important; }
.hero-reviews { display:block; margin-top:6px; }
.hero-reviews .review-count { margin-left:8px; color:#6b7280; font-weight:600; font-size:13px; }
.hero-reviews .no-reviews { color:#6b7280; font-weight:600; font-size:13px; }

/* inline flag to the right of name, subtle spacing and hover state */
.name-flag { display:inline-block; margin-left:8px; font-size:16px; line-height:1; cursor:default; }
.name-flag:focus { outline:2px solid rgba(37,99,235,0.25); outline-offset:2px; border-radius:3px; }
.name-flag[title] { position:relative; }

/* optional visual tooltip for non-native tooltip styling (keeps native title fallback) */
.name-flag[data-tooltip]:hover::after,
.name-flag[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background:#111827;
  color:#fff;
  padding:6px 8px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  z-index:1000;
  box-shadow:0 6px 18px rgba(2,6,23,0.2);
}

/* Hero: author row, name, flag and actions - consolidated */
.services-hero .author-name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  text-align: center;
  width: 100%;
}

.services-hero .gv-main-name {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  width: auto;
  text-align: center;
}

/* Flag inline styling */
.services-hero .name-flag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 16px;
  line-height: 1;
}
.services-hero .name-flag img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Hero actions (keep as-is, centers buttons/links) */
.services-hero .hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 14px;
  color: #6b6b6b;
}

/* Responsive rules (kept, but author font-size targets .gv-main-name) */
@media (max-width: 768px) {
  .services-hero .hero-image-wrap { width: 220px; height: 220px; }
  .services-hero .listing-title { font-size: 22px; }
  .services-hero .gv-main-name { font-size: 18px; } /* moved from .author-name */
}

/* Small-screen tweak to allow a little vertical breathing */
@media (max-width: 520px) {
  .services-hero .gv-main-name { margin-bottom: 6px; }
  .services-hero .name-flag { margin-left: 4px; }
}

/* Give About/Description more horizontal room and keep readable line length */
/* Give About/Description more horizontal room and keep readable line length */
.listing-description-block { margin-top: 16px; }

/* Keep a label rule as before (base) */
.listing-description-label {
  display: block;
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

/* MAIN: allow full column width but cap lines for readability */
.listing-description {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 0;
  width: 100%;
  max-width: none;         /* remove previous strict cap */
  box-sizing: border-box;
  padding-right: 0;        /* remove extra inner padding if present */
}

/* Optional: limit readability on very wide screens but larger than before */
@media (min-width: 1200px) {
  .listing-description {
    max-width: 80ch;       /* comfortable line length on very wide screens */
  }
}

/* If the parent column is narrow, allow the description to break out and use grid columns */
.listing-description-block.wide .listing-description {
  max-width: none;
}

/* If your GravityView uses grid columns, target the column to remove restrictive padding */
.gv-grid-col-1-1 .listing-description,
.gv-field-1-custom .listing-description {
  padding-right: 0;
}

/* Small screens: keep everything fluid */
@media (max-width: 520px) {
  .listing-description { font-size: 14px; max-width: 100%; }
}

/* adds subtle shaded container to reduce perceived empty space and visually group the content */
.listing-description-block.shaded .listing-description {
  background: #fbfbfd;
  border: 1px solid #f0eef6;
  padding: 16px;
  border-radius: 8px;
}

/* ===== Additional layout fixes: remove right whitespace on laptop and force full column width ===== */

/* Make shaded description use full column width on wider screens and remove right gutter */
.gv-field-1-custom .listing-description,
.gv-field-1-custom .listing-description-block .listing-description,
.listing-description-block.shaded .listing-description {
  width: 100% !important;
  max-width: none !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* If GravityView wraps the field in a narrow container, force its parent to full width */
.gv-field-1-custom,
.gv-grid-col-1-1 .gv-field-1-custom {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 12px !important; /* adjust to taste; reduces extreme flushness */
}

/* Remove any large column gutter coming from a parent layout at desktop */
@media (min-width: 992px) {
  .gv-grid-col-1-1 .gv-field-1-custom {
    padding-right: 12px !important;
    padding-left: 0 !important;
  }
}

/* ===== Label sizing: increase label sizes for About and Expertise, responsive ===== */

/* Keep visual consistency and stronger hierarchy for labels */
.listing-description-label,
.expertise-row > strong,
.expertise-row .expertise-label {
  display: block;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px 0;
  font-size: 16px; /* base label size */
  line-height: 1;
}

/* Larger labels on tablet/desktop for better hierarchy */
@media (min-width: 768px) {
  .listing-description-label,
  .expertise-row > strong,
  .expertise-row .expertise-label {
    font-size: 18px; /* increase to 20px if you want more impact */
  }
}

/* ===== Minor polish ===== */

/* Slight spacing and visual polish for the description text block */
.listing-description {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* Ensure pills keep their layout and wrap as needed (kept scoped to single-entry) */
.gv-field-1-custom .expertise-list,
.gv-grid-col-1-1 .gv-field-1-custom .expertise-list,
.expertise-row .expertise-list {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  white-space: normal !important;
  margin: 0;
}

/* Ensure expertise pills display inline and have spacing */
.expertise-pill {
  display: inline-block;
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
  padding: 4px 8px;
  white-space: nowrap;
  background: rgb(230,240,255);
  color: rgb(15,23,42);
  font-weight: 600;
  border-radius: 999px;
  line-height: 1.2;
}
.expertise-pill.expertise-more { text-decoration:none; cursor:pointer; }


/* Optional: increase pill label weight so label hierarchy reads clearly */
.expertise-pill { font-weight: 600; }

/* Optional: two-column layout helper for very long technical lists */
.listing-description.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .listing-description.two-col { grid-template-columns: 1fr; } }

/* Keep the shaded helper robust for other container shapes (extra specificity) */
.gv-field-1-custom .listing-description-block.shaded .listing-description,
.gv-field-1-custom .listing-description-block.shaded .listing-description,
.gv-field-1-custom.shaded .listing-description,
.listing-description-block.shaded .listing-description,
.listing-description.shaded {
  background: #fbfbfd !important;
  border: 1px solid #f0eef6 !important;
  padding: 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06) !important;
}

/* Hero CTA layout */
.hero-cta { margin-top: 12px; display:block; }

/* Rate style */
.hero-rate { font-weight:700; font-size:18px; color:#0f172a; margin-bottom:8px; }

/* Button / link styling */
.btn.hire-link {
  display:inline-block;
  background:#0b74de;
  color:#ffffff;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  border:2px solid transparent;
  transition: background .15s ease, box-shadow .12s ease, transform .06s ease;
  line-height:1;
}

/* Put the CTA on its own block line (center or left depending on your layout) */
.hero-cta-actions { display:block; }

/* Hover / focus */
.btn.hire-link:hover { background:#095bb5; transform:translateY(-1px); }
.btn.hire-link:focus { outline:none; box-shadow:0 0 0 4px rgba(11,116,222,0.18); border-color:#095bb5; }

/* Responsive: full-width button on narrow screens */
@media (max-width:768px) {
  .btn.hire-link { display:block; width:100%; text-align:center; padding:12px 16px; }
}

/* Optional: smaller style if you want less prominence */
.btn.hire-link.small { padding:8px 12px; font-size:0.95rem; border-radius:6px; }

/* Container and stack */
.foundermatch-hero.centered-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 32px;
  padding: 20px;
  box-sizing: border-box;
}

/* Title centered and above image */
.foundermatch-hero .listing-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
}

/* Stack wrapper to keep title above image and meta */
.foundermatch-hero .hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Image wrapper and image (square) - centered by inline-block within stack */
.foundermatch-hero .hero-image-wrap {
  display: inline-block;
  width: 260px;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f4f4;
}
.foundermatch-hero .gv-hero-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Author row: center name and flag inline */
.foundermatch-hero .author-name {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  text-align: center;
  width: 100%;
}
.foundermatch-hero .gv-main-name {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Flag inline styling */
.foundermatch-hero .name-flag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 16px;
  line-height: 1;
}
.foundermatch-hero .name-flag img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Title/company line centered */
.foundermatch-hero .hero-title-company {
  color: #6b7280;
  margin-top: 6px;
  text-align: center;
}

/* Badges centered */
.foundermatch-hero .hero-topline {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.foundermatch-hero .pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.9rem;
  color: #111827;
}

/* Website: center as plain inline link below badges, not a pill */
.foundermatch-hero .hero-website {
  margin-top: 8px;
  text-align: center;
}
.foundermatch-hero .website-link {
  color: #0b66c3;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* show domain-only visually if preferred (optional) */
/* .foundermatch-hero .website-link::after { content: attr(data-domain); } */

.foundermatch-hero .website-link:hover,
.foundermatch-hero .website-link:focus {
  text-decoration: underline;
  outline: none;
}

/* CTA centered */
.foundermatch-hero .hero-cta .hero-cta-actions,
.foundermatch-hero .hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .foundermatch-hero .hero-image-wrap { width: 220px; height: 220px; }
  .foundermatch-hero .listing-title { font-size: 22px; }
  .foundermatch-hero .gv-main-name { font-size: 18px; }
}
@media (max-width: 520px) {
  .foundermatch-hero .gv-main-name { margin-bottom: 6px; }
  .foundermatch-hero .name-flag { margin-left: 4px; }
}

/* container padding */
.foundermatch-hero.centered-hero {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* stack gap */
.foundermatch-hero .hero-stack {
  gap: 4px; /* was 8px */
}

/* title: tighter leading and smaller bottom margin */
.foundermatch-hero .listing-title {
  line-height: 1.02; /* was 1.08 */
  margin-bottom: 6px; /* was 10px */
}

/* name row: reduce top and bottom spacing */
.foundermatch-hero .author-name {
  margin-top: 4px; /* was 6px */
  margin-bottom: 2px;
}
.foundermatch-hero .gv-main-name {
  line-height: 1.02; /* was 1.08 */
}

/* title/company: pull closer to name */
.foundermatch-hero .hero-title-company {
  margin-top: 2px; /* was 4px */
  margin-bottom: 4px;
  line-height: 1.08; /* was 1.16 */
}

/* badges and website: reduce top spacing */
.foundermatch-hero .hero-topline { margin-top: 4px; } /* was 6px */
.foundermatch-hero .hero-website { margin-top: 4px; } /* was 6px */

/* CTA: slightly closer */
.foundermatch-hero .hero-cta { margin-top: 6px; } /* was 8px */

/* -------------------------
   Unified pill / chip styles
   (single authoritative block; remove other duplicates)
   ------------------------- */
.fm-chip,
.pill,
.pill.industry-pill,
.pill.fm-pill,
.fm-panel-founders .fm-chip,
.fm-chips .fm-chip,
.foundermatch-hero .fm-chip {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #0b66c3 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  min-height: 22px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
/* slight density exception inside hero */
.foundermatch-hero .pill,
.foundermatch-hero .fm-chip { padding-top: 3px !important; padding-bottom: 3px !important; }

/* chips container behaviour */
.fm-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fm-chip { display:inline-block; }

/* ensure inline display in meta rows */
.fm-meta-row .fm-meta-value > .pill,
.fm-meta-row .fm-meta-value > .fm-chip,
.fm-meta-row .fm-meta-value .pill,
.fm-meta-row .fm-meta-value .fm-chip {
  display: inline-block;
  margin: 0;
}

/* -------------------------
   Meta row layout (restore original spacing)
   ------------------------- */
.fm-meta-row { display:flex; gap:12px; align-items:center; margin:6px 0; }
.fm-meta-row strong { min-width:140px; color:#374151; font-weight:600; }
.fm-meta-value { color:#111827; }

/* small screen behaviour preserved */
@media (max-width:720px) {
  .fm-meta-row { flex-direction:column; align-items:flex-start; }
  .fm-meta-row strong { min-width:0; margin-bottom:6px; }
}

/* -------------------------
   Foundermatch hero / panel spacing
   (restore the precise gaps so earlier tightening is preserved)
   ------------------------- */

/* hero spacing and density already present — keep small bottom gap */
.foundermatch-hero.centered-hero,
.services-hero.centered-hero {
  margin-bottom: 6px !important;
  padding-bottom: 8px !important;
}

/* Reset GV custom-field wrapper spacing that commonly injects gaps */
.gv-grid-col-1-1 > .gv-field-1-custom,
.gv-grid-col-1-1 > .gv-field-1-custom > .gv-grid-value {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tighten the row immediately following hero-containing rows */
.gv-grid-row:has(.foundermatch-hero.centered-hero) + .gv-grid-row,
.gv-grid-row:has(.services-hero.centered-hero) + .gv-grid-row {
  margin-top: 6px !important;
  padding-top: 0 !important;
}

/* Keep a small bottom gap on hero containers for visual rhythm */
.foundermatch-hero.centered-hero,
.services-hero.centered-hero { margin-bottom: 6px !important; }

/* -------------------------
   Restore comfortable spacing for bio -> next row (About)
   and expertise -> About pairs
   ------------------------- */
/* Restore comfortable spacing specifically for the Foundermatch bio panel -> next row */
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row {
  margin-top: 24px !important;
  padding-top: 0 !important;
}
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > :first-child {
  margin-top: 8px !important;
}

/* Restore spacing specifically for fm-bio-panel -> listing-description (About) pair */
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .listing-description-block.shaded,
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > .listing-description-block.shaded {
  margin-top: 24px !important;
  padding-top: 0 !important;
}
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .listing-description-block.shaded .listing-description-label,
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > .listing-description-block.shaded .listing-description-label {
  display: block;
  margin-top: 8px !important;
}
.gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > :first-child {
  margin-top: 12px !important;
}

/* Restore spacing for Services: expertise-row -> listing-description (About) pair */
.gv-grid-row:has(.expertise-row) + .gv-grid-row .listing-description-block.shaded,
.gv-grid-row:has(.expertise-row) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > .listing-description-block.shaded {
  margin-top: 24px !important;
  padding-top: 0 !important;
}
.gv-grid-row:has(.expertise-row) + .gv-grid-row .listing-description-block.shaded .listing-description-label,
.gv-grid-row:has(.expertise-row) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > .listing-description-block.shaded .listing-description-label {
  display: block;
  margin-top: 8px !important;
}
.gv-grid-row:has(.expertise-row) + .gv-grid-row .gv-field-1-custom > .gv-grid-value > :first-child {
  margin-top: 12px !important;
}

/* Keep a small bottom gap on hero containers in mobile and adjust follow-row spacing */
@media (max-width:560px) {
  .foundermatch-hero.centered-hero,
  .services-hero.centered-hero { margin-bottom: 10px !important; }
  .gv-grid-row:has(.foundermatch-hero.centered-hero) + .gv-grid-row,
  .gv-grid-row:has(.services-hero.centered-hero) + .gv-grid-row { margin-top: 10px !important; }
  .gv-grid-row:has(.fm-bio-panel) + .gv-grid-row { margin-top: 18px !important; }
  .gv-grid-row:has(.fm-bio-panel) + .gv-grid-row .listing-description-block.shaded { margin-top: 18px !important; }
  .gv-grid-row:has(.expertise-row) + .gv-grid-row .listing-description-block.shaded { margin-top: 18px !important; }
}

/* -------------------------
   Keep expertise row bottom spacing
   ------------------------- */
.expertise-row { margin-bottom: 12px !important; padding-bottom: 0 !important; }
.expertise-row .expertise-list { margin-bottom: 12px !important; }

/* Defensive for older browsers that might use a marker class */
.gv-grid-row.services-following-row .expertise-row,
.gv-grid-row.fm-following-row .expertise-row { margin-bottom: 12px !important; }

/* -------------------------
   Keep Looking-for inline layout (single authoritative rule)
   ------------------------- */
.fm-panel-founders > .fm-panel-title,
.fm-panel-founders > .fm-panel-title + .fm-chips {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.fm-panel-founders > .fm-panel-title { font-size:1rem !important; font-weight:600 !important; line-height:1.2 !important; margin-right:8px !important; }

/* responsive fallback for narrow screens */
@media (max-width:520px){
  .fm-panel-founders > .fm-panel-title,
  .fm-panel-founders > .fm-panel-title + .fm-chips { display:block !important; width:100% !important; }
  .fm-panel-founders > .fm-panel-title + .fm-chips { margin-top:6px !important; white-space:normal !important; }
}

/* Add spacing below the read-more button */
.fm-readmore-btn {
  margin-top: 12px !important;  /* was 8px */
  margin-bottom: 16px !important;  /* already added for spacing below */
}

/* Add spacing above the panel that follows the bio */
.fm-panel {
  margin-top: 12px !important; /* ensures the panel doesn't collide with the button */
}

@media (max-width: 560px) {
  .fm-readmore-btn {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  .fm-panel {
    margin-top: 10px !important;
  }
}

/* Targeting only the first .fm-panel after the button or applying conditional spacing  */
/* Apply spacing only to visible fm-panels */
.fm-panel[aria-hidden="false"],
.fm-panel:not([hidden]) {
  margin-top: 16px !important; /* adjust to match your vertical rhythm */
}

/* Optional: tighter spacing on mobile */
@media (max-width: 560px) {
  .fm-panel[aria-hidden="false"],
  .fm-panel:not([hidden]) {
    margin-top: 12px !important;
  }
}

/* Add spacing below bio panel to match About rhythm */
.fm-bio-panel {
  margin-bottom: 24px !important;
}

/* Ensure consistent spacing above About section */
.listing-description-block.shaded {
  margin-top: 24px !important;
}

/* Add spacing below bio text and above read-more button */
.fm-bio-text {
  margin-bottom: 12px !important;
}
.fm-readmore-btn {
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

/* Add spacing above visible panel */
.fm-panel[aria-hidden="false"],
.fm-panel:not([hidden]) {
  margin-top: 24px !important;
}

/* Expertise row spacing already good — no change needed */

/* HIDE REVIEWS EXCEPT FOR SERVICES LISTING TYPE */
/* Hide the review block by default */
.gv-reviews-area {
  display: none;
}

/* Show it only when body has .is-services */
body.is-services .gv-reviews-area {
  display: block;
}

/* hides empty blocks and duplicate empty anchors */
/* block formatting + tighter vertical rhythm */
.hero-title-company { display: block; line-height: 1.2; }

/* control "at" spacing via margins (reduced) */
.hc-at { display: inline-block; margin: 0 0.16rem; white-space: nowrap; }

/* hide only elements that JS has processed and marked as normalized and are empty */
.hero-title-company[data-normalized="true"]:empty { display: none !important; }
.hero-title-company[data-normalized="true"] > .hc-title:empty { display: none !important; }
.hero-title-company[data-normalized="true"] > .hc-company:empty { display: none !important; }

/* website - hide only when JS marked it as normalized and empty or removed */
.hero-website[data-normalized="true"] { display: block; }
.hero-website[data-normalized="true"] a.website-link[href=""],
.hero-website[data-normalized="true"] a.website-link:empty { display: none !important; }

/* tighten vertical spacing between title-company and following CTA/rate */
.hero-title-company + .hero-cta,
.hero-title-company + .hero-rate,
.hero-title-company + .hero-cta + .hero-rate { margin-top: 0.25rem; }

/* Make sure the visually-hidden title does not appear but keeps semantics */
.fm-panel-title.visually-hidden { 
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Ensure Seeking roles uses same label sizing/weight as other rows (uses existing strong rule) */
.fm-panel-join .fm-meta-row strong { 
  /* inherits from your existing .fm-meta-row strong (min-width:140px; font-weight:600) */
  /* override if you use a different min-width for founder panels — match that value here */
  min-width: 140px;
  font-weight: 600;
}

/* Force fm-meta-value to behave as a single inline flex item so chips align start */
.fm-panel .fm-meta-value {
  display: block;
  min-width: 0;
}

/* Ensure chips containers inside meta rows are inline and align flush with label */
.fm-meta-row .fm-chips {
  display: inline-flex !important;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  vertical-align: middle;
  margin-top: 0; /* align to label baseline */
}

/* If server renders plain comma-separated text rather than .fm-chip elements,
   prefer to transform that into chips via the small helper below; otherwise ignore */
.fm-chips.fm-availability .fm-chip {
  /* single-value availability uses same chip token as other pills */
  /* your unified pill styles already apply; these rules just ensure no extra spacing */
  display: inline-block;
}

/* Tweak to ensure multi-line wrapping begins where other values begin */
.fm-meta-row { align-items: flex-start; gap: 12px; }

/* Small nudge so multi-line chips align to the first line of label text */
.fm-meta-row .fm-meta-value .fm-chips { margin-top: 2px; }

/* Optional: ensure hidden-by-type classes remain hidden (preserve previous behavior) */
.hero-website.gv-hidden-by-type { display: none !important; }

/* Responsive: preserve existing mobile collapse behavior */
@media (max-width:720px) {
  .fm-meta-row { flex-direction: column; align-items: flex-start; }
  .fm-meta-row strong { min-width: 0; margin-bottom: 6px; }
}

/* Apply now button in Jobs single layout */
.job-details-panel .apply-wrapper { display: inline-block; }
.job-details-panel .apply-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-color, #0b76ff);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}
.job-details-panel .apply-pill:focus { outline: 3px solid rgba(11,118,255,0.2); outline-offset: 2px; }
.job-details-panel .fm-meta-row strong { min-width: 160px; } /* match your panel label width */

/* Center the apply button in the hero / job details area */
.job-apply-row { display: block; margin: 0; padding: 0; }
.job-apply-row .fm-meta-value { display: flex; justify-content: center; align-items: center; padding-top: 10px; }

/* Tighten the layout so the button sits visually below the company name/flag */
.jobs-hero .hero-meta .hero-cta { margin-top: 8px; }
.apply-wrapper-centered { width: 100%; display:flex; justify-content:center; }

/* Keep the same visual style as Request More Info (inherit .btn .hire-link) */
.apply-link { white-space: nowrap; }

/* Optional small responsive tweak */
@media (max-width: 540px) {
  .job-apply-row .fm-meta-value { padding-top: 8px; }
}

/* Exithub hero (centered, stacked) */
.exithub-hero { max-width:1200px; margin:0 auto; padding:28px 16px; }
.exithub-hero .hero-stack { display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.hero-image-wrap { width:260px; flex:0 0 auto; }
.gv-hero-profile-image { border-radius:12px; width:100%; height:auto; object-fit:cover; display:block; margin:0 auto; }
.hero-flag-line { font-size:34px; margin:6px 0; }
.author-line { color:#666; font-size:14px; margin:6px 0; }
.hero-cta { margin-top:12px; }
.hero-cta .btn { display:inline-block; padding:10px 14px; border-radius:6px; background:#0b84ff; color:#fff; text-decoration:none; }
.hero-note { font-size:13px; color:#666; margin-top:8px; }

.hero-flag-line .name-flag { min-width:1.2em; display:inline-block; }
.hero-flag-line .name-flag:empty { display:inline-block; } /* keep placeholder if needed */


/* Ensure exithub hero matches foundermatch centered stack */
.exithub-hero.centered-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 32px;
  padding: 20px;
  box-sizing: border-box;
}

.exithub-hero .listing-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
}

/* Keep hero-stack vertical and centered */
.exithub-hero .hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* keep the image sizing consistent */
.exithub-hero .hero-image-wrap {
  display: inline-block;
  width: 260px;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f4f4;
}
.exithub-hero .gv-hero-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Exithub hero emoji flag */
.hero-flag-text { color: #6b6b6b; font-size:0.95rem; font-weight:600; white-space:nowrap; }

.hero-flag-line {
  text-align: center;
  display: block;
  margin: 6px 0;
}

.hero-flag-text {
  display: inline-block;
  text-align: center;
}

.hero-flag-text:empty {
  display: none;
}


/* On larger screens keep country name subtle (optional) */
@media (min-width: 601px) {
  .hero-flag-text { font-size:0.95rem; opacity:0.9; }
}
/* On small screens keep text visible and clear */
@media (max-width: 600px) {
  .hero-flag-text { font-size:0.95rem; display:inline-block; }
}


/* Exithub Metrics */
.exithub-metrics { max-width:900px; margin:22px auto; padding:18px 16px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.02); }

/* Metrics rows: horizontal layout on desktop/tablet, stacked on small screens */
.exithub-metrics .fm-meta-row {
  display: flex;
  flex-direction: row;        /* horizontal label + value */
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 6px 0;
  padding: 0;
  height: auto;              /* remove fixed height to avoid forcing wraps */
}

/* Label column: fixed width, right-aligned, no wrapping */
.exithub-metrics .fm-meta-row strong {
  width: 14ch;               /* adjust to fit your longest label;  */
  min-width: 8ch;
  flex: 0 0 auto;
  text-align: right;
  color: #444;
  font-weight: 700;
  white-space: nowrap;       /* prevent wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Value column: flexible, left aligned */
.exithub-metrics .fm-meta-value {
  flex: 1 1 auto;
  min-width: 140px;         /* keep your previous min-width if desired */
  text-align: left;
  white-space: normal;      /* allow values to wrap if they must */
}

/* Align currency metric values with pill-shaped values */
.exithub-currency-metric .fm-meta-value .metric-value,
.exithub-currency-metric .fm-meta-value .pill {
  /* ensure consistent baseline */
  display: inline-block;
  vertical-align: middle;
}

/* Add left padding to currency values so they align with pills */
.exithub-currency-metric .fm-meta-value .metric-value {
  padding-left: 0.5rem; /* tweak as needed: 0.4rem, 0.6rem, etc. */
}


/* Pills + metrics */
.pill { display:inline-block; background:#f1f5f9; color:#1f2937; padding:6px 10px; border-radius:999px; font-size:13px; }
.industry-pill { background:#eef2ff; color:#1e3a8a; }
.metric-value { font-weight:700; color:#1e3a8a; }

/* Small screens: stack label and value vertically */
@media (max-width: 767px) {
  .exithub-metrics .fm-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .exithub-metrics .fm-meta-row strong {
    width: auto;
    text-align: left;
    white-space: normal;
  }
  .exithub-metrics .fm-meta-value {
    min-width: 0;
  }
}

/* Modals for Exithub NDA and other listing types */
/* Shared modal container styles */
.exithub-modal,
.listing-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared backdrop */
.exithub-modal-backdrop,
.listing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Shared panel */
.exithub-modal-panel,
.listing-modal-panel {
  position: relative;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 640px;
  z-index: 2;
}

/* Shared close button */
.exithub-modal-close,
.listing-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: none;
  border: none;
  font-size: 20px;
}

/* Shared form row + textarea */
.form-row {
  margin-bottom: 12px;
}
.form-row textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* Shared actions */
.exithub-form-actions .btn,
.listing-form-actions .btn {
  margin-right: 8px;
}

/* Feedback areas (separate IDs so you can style differently if needed) */
#exithub-nda-feedback {
  margin-top: 10px;
  font-size: 14px;
  color: #0b84ff; /* NDA feedback color */
}
#listing-message-feedback {
  margin-top: 10px;
  font-size: 14px;
  color: #0b84ff; /* Global feedback color */
}

/* NDA-specific checkbox label */
.checkbox-label {
  font-size: 14px;
  color: #333;
}

/*  About the Seller row in Exithub */
.exithub-seller { max-width:900px; margin:20px auto; padding:16px; border-radius:8px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.03); }
.exithub-seller .seller-row { display:flex; gap:12px; align-items:center; }
.exithub-seller .seller-avatar { border-radius:999px; width:56px; height:56px; object-fit:cover; display:block; }
.exithub-seller .seller-meta { display:flex; flex-direction:column; gap:6px; }
.exithub-seller .seller-name { font-weight:700; color:#111; text-decoration:none; }
.exithub-seller .seller-contact .btn { background:#0b84ff; color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; display:inline-block; }
@media (max-width:700px) {
  .exithub-seller .seller-row { flex-direction:column; align-items:flex-start; }
  .exithub-seller .seller-avatar { width:48px; height:48px; }
}

.seller-avatar-placeholder {
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#e6eefc;
  color:#0b3f8a;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  margin:0;
}

/* Opportunities single entry. Hide pills when the field value is empty */
/* Base pill styling (shared) */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: #f1f5f9; /* same as computed */
  color: #0b66c3;            /* same as computed */
  font-size: 14px;
  font-weight: 600;
  margin: 0 6px 0 0;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
}

/* Align values inline and remove leftover gaps */
.fm-meta-row .fm-meta-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Sub-Category: hide only pills that have empty or whitespace data-value */
.subcat-row .pill.category-pill[data-value=""],
.subcat-row .pill.category-pill[data-value=" "],
.subcat-row .pill.category-pill[data-value=" "] { /* non-breaking space */
  display: none !important;
}

/* Sub-Category: ensure visible pills actually render (no visibility tricks) */
.subcat-row .pill.category-pill {
  visibility: visible;
}

/* Optional: prevent unintended fixed widths/min-heights */
.pill.category-pill {
  width: auto;
  min-height: auto;
}