/**********************************************************
* Description:    Paradigm21 style sheet
* Version:        2.38
* This is used instead of styles.css from the child theme
**********************************************************/


/**********************************************************************
* WP Black bar customization for admins
**********************************************************************/

/* Hide "copy to new draft" */
li#wp-admin-bar-new-draft {
    display: none;
}

/* Hide Gamipress */
li#wp-admin-bar-gamipress {
    display: none;
}

/* Hide Notifications */
li#wp-admin-bar-bp-notifications {
    display: none;
}

/**********************************************************************
* BLUE and YELLOW Button styles : bb-dfy, elementor, color classes
**********************************************************************/
/* Primary Button (Blue) */ 
.bb-dfy-primary-btn .bb-tabs__link,
.bb-dfy-primary-btn .elementor-button,
    /* Primary Button Without Border */
.bb-dfy-primary-btn-without-brd .elementor-button,
    /* Blue Button */
.button.blue, .button.blue a, .button.blue.input,
    /* Button from Notes plugin */
.nt-note-actions-wrapper .nt-note-actions .nt-note-submit input, #ldnt-search-btn, .lds-bulk-download,
    /* Submit button from Gravity Forms plugin */
    .gform_wrapper form input[type=submit],
    /* Buttons on user Dashboard */
    .bb-la-activity-btn__link, .bb-forums-activity-btn__link,
    /* Buttons from Gutenberg bloks and product sidebar widgets */
    .wp-block-button a 
{
    padding: 10px 20px !important;
    font-size: 15px !important;
    background-color: var(--bb-primary-button-background-regular) !important;
    color: var(--bb-primary-button-text-regular) !important;
    border: 2px solid var(--bb-primary-button-background-regular) !important;
    border-radius: var(--bb-button-radius) !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: none !important; 
    -webkit-transition: none !important;
    transition: none !important;
}
/* Primary Button Hover */
.bb-dfy-primary-btn .bb-tabs__link:hover,
.bb-dfy-primary-btn .elementor-button:hover,
    /* Primary Button Hover Without Border*/
.bb-dfy-primary-btn-without-brd .elementor-button:hover,
    /* Blue Button Hover */
.button.blue:hover, .button.blue:hover a, .button.blue.input:hover,
 /* Button from Notes plugin Hover*/
 .nt-note-submit:hover, #ldnt-search-btn:hover, .lds-bulk-download:hover,
 /* Submit button from Gravity Forms plugin */
 .gform_wrapper form input[type=submit]:hover,
 /* Buttons on user Dashboard */
 .bb-la-activity-btn__link:hover, .bb-forums-activity-btn__link:hover,
 /* Buttons from Gutenberg bloks and product sidebar widgets */
  .wp-block-button a:hover
{
    padding: 10px 20px !important;
    font-size: 15px !important;
    background-color: var(--bb-primary-button-background-hover) !important;
    color: var(--bb-primary-button-text-hover) !important;
    border: 2px solid var(--bb-primary-button-background-regular) !important;
    background-image: none !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: none !important; 
    -webkit-transition: none !important;
    transition: none !important;
}


/* Secondary Button (Yellow) */
.bb-dfy-secondary-btn .bb-tabs__link,
.bb-dfy-secondary-btn .elementor-button,
    /* Secondary Button Without Border */
.bb-dfy-secondary-btn .elementor-button,
    /* Yellow Button */
.button.yellow, .button.yellow a, .button.yellow.input,
/* Buttons on user Dashboard */
.bb-la__link a, .bb-no-data__link,
/* Buttons from Gutenberg bloks and product sidebar widgets */
.wp-block-button.yellow a
{
    background-color: var(--bb-secondary-button-background-regular) !important;
    color: var(--bb-secondary-button-text-regular) !important;
    border: 2px solid var(--bb-secondary-button-background-regular) !important;
    font-weight: 600 !important;
}
/* Secondary Button Hover */
.bb-dfy-secondary-btn .bb-tabs__link:hover,
.bb-dfy-secondary-btn .elementor-button:hover,
    /* Secondary Button Hover Without Border*/
.bb-dfy-secondary-btn-without-brd .elementor-button:hover,
    /* Yellow Button Hover */
.button.yellow:hover, .button.yellow:hover a, .button.yellow.input:hover,
/* Buttons on user Dashboard */
.bb-la__link a:hover, .bb-no-data__link:hover,
/* Buttons from Gutenberg bloks and product sidebar widgets */
.wp-block-button.yellow a:hover
{
    background-color: var(--bb-secondary-button-background-hover) !important;
    color: var(--bb-secondary-button-text-hover) !important;
    border-color: var(--bb-secondary-button-border-hover) !important;
    background-image: none;
    border: 2px solid var(--bb-secondary-button-background-regular) !important;
    -webkit-font-smoothing: none !important; 
    -webkit-transition: none !important;
    transition: none !important;
}
.button.yellow:hover a {
    border: 2px solid var(--bb-secondary-button-background-hover) !important;
}


/**********************************************************************
* ELEMENTOR ADJUSTMENTS
**********************************************************************/
.elementor-button {
    box-shadow: none !important;
}

/* Adjust line-height for all Elementor titles (default is 1, looks weird) */
.elementor-heading-title.elementor-size-default {
    line-height: 1.15;
}

/**********************************************************************
* Central button styling when only using color classes (outside of
* bb-dfy or elementor
**********************************************************************/
.button.green,
.button.blue,
.button.yellow
{
    /* Reset conflicting styles */
    display: inline-block; /* Ensure proper button display */
    text-align: center;
    padding: 10px 20px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    height: auto;
    font-weight: 600 !important;
    border-radius: var(--bb-button-radius);
    cursor: pointer;
    text-decoration: none;
    -webkit-font-smoothing: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.button {
    white-space: nowrap !important;
    text-align: center !important;
}

/**********************************************************************
* The GREEN button
**********************************************************************/
.button.green, .button.green a, .button.green.input,
/* Button on user Dashboard */
.profile_bit_action__link,
/* Buttons from Gutenberg bloks and product sidebar widgets */
.wp-block-button.green a
{
    background-color: var(--bb-primary-color) !important;
    border: 2px solid var(--bb-primary-color) !important;
    color : var(--bb-primary-button-text-regular) !important;
}

.button.green:hover,  .button.green:hover a, .button.green.input:hover,
/* Handling button on user Dashboard */
.profile_bit_action__link:hover,
/* Buttons from Gutenberg bloks and product sidebar widgets */
.wp-block-button.green a:hover{
    background-color: var(--bb-secondary-button-background-hover) !important;
    border: 2px solid var(--bb-primary-color) !important;
    color: var(--bb-primary-button-text-hover) !important;
}

/**********************************************************************
* Fix a Learndash CSS removing the bottom border to non .button <a>
* And fix it for the "Learn more" Molongui button on Learndash course
**********************************************************************/
/* Primary (blue) */
.learndash-wrapper:not(.ld-registration__outer-wrapper) .wp-block-button>a.wp-element-button:not(.button),
.learndash-wrapper a.button,
.learndash-wrapper a.button:hover  {
    border-bottom: 2px solid var(--bb-primary-button-border-regular) !important;
}
/* Secondary (yellow) */
.learndash-wrapper:not(.ld-registration__outer-wrapper) .wp-block-button.yellow>a.wp-element-button:not(.button),
.learndash-wrapper a.button.yellow,
.learndash-wrapper a.button.yellow:hover {
    border-bottom: 2px solid var(--bb-secondary-button-border-regular) !important;
}
/* Green */
.learndash-wrapper:not(.ld-registration__outer-wrapper) .wp-block-button.green>a.wp-element-button:not(.button),
.learndash-wrapper a.button.green,
.learndash-wrapper a.button.green:hover {
    border-bottom: 2px solid var(--bb-primary-color) !important;
}


/**********************************************************************
* GUTENBERG blocks customization for product course + product page
**********************************************************************/

/* Make the block separator thin, same color as themd, add margin and full width*/
hr.wp-block-separator.has-alpha-channel-opacity{
    border-top: 1px solid var(--bb-content-border-color);
    background-color: transparent
}
/* On WooCommerce page, extend the negative margins */
.single-product hr.wp-block-separator.has-alpha-channel-opacity {
    margin: 45px -20px;
}
/* On Learndash and BuddyBoss Community, only add vertical  margins */
.bb-learndash-content-wrap hr.wp-block-separator.has-alpha-channel-opacity {
    margin: 45px 0px;
}
/* On WooCommerce page, remove author profile border */
.single-product .m-a-box-container {
    border: none;
}

/* Remove margins below columns */
.wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex {
    margin-bottom: 0px
}

/* Testimonial table */
.testimonials table { 
    border-spacing: 25px;
    border-collapse: separate;
    border: none;
}
.testimonials td {
    vertical-align: middle;
    padding: 11px;
    border: solid 2px #F8C02F !important;
    border-radius: 10px;
    box-shadow: 3px 3px 0px 0px rgba(248, 192.0000000000001, 47.000000000000036, 0.32);
}

/* Testimonial table in products goes to 1 column on mobile */ 
@media (max-width: 640px) {
    .wp-block-table.testimonials table,
    .wp-block-table.testimonials tbody,
    .wp-block-table.testimonials tr,
    .wp-block-table.testimonials td {
        display: block;
        width: 100%;
    }

    .wp-block-table.testimonials td {
        margin-bottom: 1rem; /* Optional: adds spacing between entries */
    }
}

/* Make the Video Block when using YouTube work without the URL showing and a huge empty space */ 
div.ld-video[data-video-provider="youtube"] {
    display: none;
}

/**********************************************************************
* Theme menu customization
**********************************************************************/

/* Make the "Our Expertise" English sub-menu wider to display the whole title */
.site-header #primary-navbar .primary-menu li#menu-item-1338>.ab-submenu .bb-sub-menu {
    width: 240px;
    max-width: 240px;
}
/* Make the "Our Expertise" French sub-menu wider to display the whole title */
.site-header #primary-navbar .primary-menu li#menu-item-7022>.ab-submenu .bb-sub-menu {
    width: 280px;
    max-width: 280px;
}
/* Make the "Products" French sub-menu wider to display the whole title */
.site-header #primary-navbar .primary-menu li#menu-item-7375>.ab-submenu .bb-sub-menu {
    width: 210px;
    max-width: 210px;
}
/* Make the "Academy" French sub-menu wider to display the whole title */
.site-header #primary-navbar .primary-menu li#menu-item-6990>.ab-submenu .bb-sub-menu {
    width: 210px;
    max-width: 210px;
}

/* Make main menu entries bold on mobile menu */
ul.mobile-menu > li.menu-item > a > span
{
    font-weight: 600;
}

/**********************************************************************
* CUSTOMER LOGO Fix max width, structure in a table and responsive
**********************************************************************/
/* Remove bottom blank space */
.e-gallery-justified {
    padding-bottom: 0 !important;
}


.elementor-gallery__container.e-gallery-container {
  /* Flex container for wrapping columns */
  display: flex !important;
  flex-wrap: wrap !important;
  /* Gap between columns/rows */
  gap: 40px !important;
  /* Center items horizontally; change to 'flex-start' if you want left‐aligned */
  justify-content: center !important;
  /* Align items at the top of each row */
  align-items: flex-start !important;
}

/* Default: each item is 180px wide on large screens */
.e-gallery-item.elementor-gallery-item {
  display: block !important;
  /* Fixed 180px width by default */
  flex: 0 0 180px !important;

  /* If Elementor “justified” uses absolute positioning, override it: */
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  /* Center text or background if there is any child text */
  text-align: center !important;
}

/* The background image container needs a min-height 
   so background-size: contain is visible. */
.e-gallery-image {
  width: 100% !important;        /* Fill the parent’s 180px (or new shrunk width) */
  max-width: 180px !important;   /* On large screens, don't exceed 180px */
  min-height: 80px !important;   /* Enough to show the logo background */

  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 
   MEDIA QUERY: when screen is too narrow to fit 
   two columns of 180px + 40px gap ( ~400px total ), 
   shrink logos so you *never* drop to 1 column.
   This example uses 400px, adjust as needed.
*/
@media (max-width: 400px) {
  .e-gallery-item.elementor-gallery-item {
    /* 
       Instead of a fixed 180px, each item now takes 
       half the container width minus half the gap. 
       That ensures exactly 2 columns. 
    */
    flex: 0 0 calc((100% - 40px) / 2) !important;
  }

  .e-gallery-image {
    /* Logos can also shrink below 180px. 
       Remove or adjust if you want a bigger minimum size. 
    */
    max-width: 100% !important;
  }
}

/**********************************************************************
* FILTER EVERYTHING - hide filters that have 0 entries (authors mainly)
**********************************************************************/
li.wpc-checkbox-item.wpc-term-item.wpc-term-count-0 {
    display: none;
}

/**********************************************************************
* LEARNDASH - Remove extra 25px padding on mobile for top header
**********************************************************************/

@media screen and (max-width: 600px) {
    div.bb-lms-header {
        padding: 0;
        margin: 0
    }
}

/**********************************************************************
* LEARNDASH - Add margin at the bottom of Spotlighr videos
**********************************************************************/
div.spotlightr-id {
    margin-bottom: 30px;
}

/**********************************************************************
* LEARNDASH - Remove "training" things for the charter
**********************************************************************/

.learndash-cpt-sfwd-courses-10226-parent .sfwd-course-position,
.learndash-cpt-sfwd-courses-10226-parent .course-progress-wrap,
.learndash-cpt-sfwd-courses-10226-parent a.nt-note-tab.bottom.ldnt-style-circle.ldnt-new-note ,
.learndash-cpt-sfwd-courses-10226-parent .flex.align-items-center.bb-check-not-completed,
.learndash-cpt-sfwd-courses-10226-parent .bb-not-completed.bb-lms-status,
.learndash-cpt-sfwd-courses-10226-parent .bb-ld-status,
.learndash-cpt-sfwd-courses-10226-parent .bb-lesson-topics-count,
.learndash-cpt-sfwd-courses-10226-parent span.bb-lesson-sidebar-ld-sep,
.learndash-cpt-sfwd-courses-10226-parent .bb-lesson-quizzes-count,
.learndash-cpt-sfwd-courses-10226-parent .ld-status-icon.ld-status-incomplete
 {
    display: none;
}

.learndash-cpt-sfwd-courses-10226-parent a.course-entry-link,
.learndash-cpt-sfwd-courses-10226-parent .ld-content-actions,
.learndash-cpt-sfwd-courses-10226-parent .ld-progress,
.learndash-cpt-sfwd-courses-10226-parent .ld-table-list-header {
    display: none !important;
}


/**********************************************************************
* BUDDYBOSS User Profile 
**********************************************************************/

/* Hide shipping address from the user profile's shop section */
.MyAccount-content--address .u-column2.col-2.woocommerce-Address {
    display: none;
}

/* Hide the description of the nickname field in the edit profile buddyboss form */ 
.profile.edit .editfield.field_3.field_nickname p#field_3-3 {
    display: none;
}

/* Hide Shop and Group Invite from the Account menu */
.bp-settings-container li#shop-settings-personal-li,
.bp-settings-container li#invites-personal-li {
    display: none;
}

/* Communities verbose too much in the search results - keep only the first <p> */ 
.bp-search-item.bp-search-item_group .group-description p:not(:first-child),
.bp-search-item.bp-search-item_group .group-description ul {
    display: none;
}

/* More space to put "E-mail" in French in notification settings */
#buddypress .bb-bp-settings-content table.main-notification-settings label {
    letter-spacing: -.75px;
}

/* Move the buttons away from text on another user's profile */
@media screen and (min-width: 1371px) {
    #buddypress .users-header .centered #item-header-cover-image .member-header-actions-wrap {
        right: -10px !important;
        bottom: 30px;
    }
}

/**********************************************************************
* BUDDYBOSS Communities
**********************************************************************/
/* Hide meeting details for non-organizers members */
body:not(.member-logged-in) .single-meeting-item:has(.info-status),
body:not(.member-logged-in) .single-meeting-item:has(.bb-meeting-option) {
    display: none;
}

/* Hide Transcript and chat - Keep only the first 2: video and audio - for non-organizers */
body:not(.member-logged-in) .recording-list-row-group .recording-list-row[data-recording-id="3"],
body:not(.member-logged-in) .recording-list-row-group .recording-list-row[data-recording-id="4"] {
    display: none;
}


/**********************************************************************
* BUDDYBOSS User Profile -> Order Details
**********************************************************************/
/* Add margin before showing the order details */
.bb-profile-grid .wc-MyAccount-inner-content {
    margin-top: 60px;
}

/* Hide the view Dashboard button in the order again section */
.bb-profile-grid .wc-MyAccount-inner-content p.order-again {
    display: none;
}

/**********************************************************************
* BUDDYBOSS User Profile -> Membership
**********************************************************************/
/* Subscriptions gets displayed by 2 plugins (so we can translate it properly and display doesn't get messed up) - hide the second one */
.bb-profile-grid nav#subnav + .woocommerce_account_subscriptions + div#item-body {
    display: none;
}

/* Orders gets displayed by 2 plugins (so we can translate it properly) - hide the second one */
.bb-profile-grid.bb-grid>div#item-body>.item-body-inner>.wc-MyAccount-sub-heading,
.bb-profile-grid.bb-grid>div#item-body>.item-body-inner>.wc-MyAccount-inner-content {
    display: none;
}

/* Hide "Change Payment Method" button (404) */
.bb-profile-grid.bb-grid table.shop_table.subscription_details a.woocommerce-button.button.change_payment_method {
    display: none !important;
}
/* Hide "Add payment method" button (404) */
.bb-profile-grid.bb-grid .item-body-inner>.entry-content >div#item-body>.woocommerce>a.button {
    display: none;
}

/* Payment methods gets displayed by 2 plugins (so we can translate it properly) - hide the second one */
.bb-profile-grid.bb-grid>div#item-body>.item-body-inner>.bcommerce-payment-methods {
    display: none;
}
/* Downloads gets displayed by 2 plugins (so we can translate it properly) - hide the second one */
.bb-profile-grid.bb-grid>div#item-body>.item-body-inner>.wc-MyAccount-sub-heading,
.bb-profile-grid.bb-grid>div#item-body>.item-body-inner>.wc-MyAccount-inner-content {
    display: none;
}

/* Hide the title for "Downloads" just under the sub-menu */
.bb-profile-grid.bb-grid .entry-content .woocommerce .wc-MyAccount-sub-heading {
    display: none;
}

/* Fix Download background color being white on grey */
.bb-profile-grid.bb-grid .entry-content .woocommerce-Message.woocommerce-Message--info.woocommerce-info.wc-MyAccount-fix-center {
    background-color: transparent;
}

/* Memberships shows a version in both languages, the first one is the one bought in the purchase language, so hide even ones */
.bb-profile-grid.bb-grid .wc-membership-contents .my_account_memberships tbody tr.membership:nth-child(even) {
    display: none;
}

/* Make buttons on memberships a bit wider */
td.membership-actions.order-actions a.button {
    min-width: 120px;
}

/* Lower the font size for the membership table */
table.shop_table.shop_table_responsive.my_account_orders.my_account_memberships {
    font-size :90%
}

/* Make the button area at the end of a membership like a table sell */
td.membership-actions.order-actions,
td.membership-product-actions.order-actions,
td.membership-discount-actions.order-actions {
    display:grid;
}
/* And make the buttons appear ok */
td.membership-actions.order-actions a,
td.membership-product-actions.order-actions a,
td.membership-discount-actions.order-actions a {
    margin: 0 15px 10px 0;
    padding: 10px 0px !important;
    line-height: 16px !important;
    font-size :85% !important;
}

/* Reduce the padding between cells in the products table  (membership profile area) */
table.shop_table.my_membership_products th,
table.shop_table.my_membership_products td {
    padding: 10px 10px;
}

/* Make colums flexible so button don't stick out */
table.my_account_memberships {
    table-layout: auto !important;
}

/* Make ca menu out of those buttons */
nav.woocommerce-MyAccount-navigation.wc-memberships-members-area-navigation {
    padding-right: 15px;
}
.wc-memberships-members-area-navigation ul {
    margin: 0px !important;
}

.wc-memberships-members-area-navigation ul li {
    list-style: none;
    padding: 10px 20px  !important;
    margin: 0px 0px 10px;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}
.wc-memberships-members-area-navigation ul li a {
    color: var(--bb-sidenav-text-regular) !important;
}
.wc-memberships-members-area-navigation ul li:hover {
    background-color: var(--bb-content-alternate-background-color);
}
.wc-memberships-members-area-navigation ul li:hover a {
    color: var(--bb-primary-color) !important;
}

/* Retour aux adhésions: Use a left arrow icon */
.woocommerce-MyAccount-navigation-link--back-to-memberships a::before {
    content: "\f060"; /* Font Awesome "arrow-left" */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 8px;
    color: var(--bb-sidenav-text-regular) !important;
}

/* Produits: Use a shopping cart icon */
.woocommerce-MyAccount-navigation-link--my-membership-products a::before {
    content: "\f07a"; /* Font Awesome "shopping-cart" */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 8px;
    color: var(--bb-sidenav-text-regular) !important;
}

/* Rabais: Use a percent icon */
.woocommerce-MyAccount-navigation-link--my-membership-discounts a::before {
    content: "\f295"; /* Font Awesome "percent" */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 8px;
    color: var(--bb-sidenav-text-regular) !important;
}

/* Notes in Learndash: Use a pencil icon */
.woocommerce-MyAccount-navigation-link--my-membership-notes a::before {
    content: "\f044"; /* Font Awesome "pencil-alt" */
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
    color: var(--bb-sidenav-text-regular) !important;
}

/* Fix line height and add padding to the bottom buttons in the course interface */
p#nt-utility-links {
    line-height: normal;
    padding: 10px 0;
}

/* Gérer: Use a gear icon */
.woocommerce-MyAccount-navigation-link--my-membership-details a::before {
    content: "\f013"; /* Font Awesome "cog" */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 8px;
    color: var(--bb-sidenav-text-regular) !important;
}

/* Fix a responsibe issue with the page */
@media (max-width: 1200px) {
    .logged-in.woocommerce-account.has-sidebar .widget-area:not(.widget-area-secondary) {
        max-width: 270px !important;
    }
    .bb-profile-grid .wc-membership-contents .shop_table th.membership-discount-image,
    .bb-profile-grid .wc-membership-contents .shop_table td.membership-discount-image {
        display: none;
    }
}

/* Hide the "Detail" button on a subscrption in the BuddyBoss user profile (link is wrong in French, but the one in the name works well) */
.bb-profile-grid .woocommerce-account-my-memberships tr.membership td a.button.view {
    display: none !important;
}
/* Adjust the border style because of the missing button */
.bb-profile-grid .woocommerce-account-my-memberships table.shop_table.my_account_memberships {
    border-collapse: collapse;
}
/* And add a top border to the header */
.bb-profile-grid .woocommerce-account-my-memberships table.shop_table.my_account_memberships thead {
    border-bottom: 1px solid var(--bb-content-border-color);
}

/**********************************************************************
* LEARNDASH NOTES
**********************************************************************/
/* Adjust the location of the notes window */
.nt-note-wrapper {
    top: unset;
    bottom: 30px;
    right: 30px;
  }
    

/**********************************************************************
* Buddyboss Profile menu : add section separator with class
* - Above "Dashboard" classes="bp-menu bp-dashboard-nav"
* - Above "Activity" classes="bp-menu bp-activity-nav"
* - Above "Orders" classes="bp-menu bp-orders-nav"
* - Above "Logout" classes="bp-menu bp-logout-nav"
**********************************************************************/
.sub-menu-inner li.bp-dashboard-nav,
.sub-menu-inner li.bp-activity-page,
.sub-menu-inner li.bp-menu.bp-orders-nav,
.sub-menu-inner li.bp-menu.bp-logout-nav {
    margin-top: 6px; /* Adds spacing between sections */
    border-top: 1px solid #ccc; /* Creates the separator line */
    padding-top: 6px; /* Adds spacing above the item */
}

/* WHEN USING THE Profile menu as a drop down from user profile */

/* Make the user menu taller  */
.header-aside .wrapper .sub-menu-inner {
    max-height: 88vh;
}


/* WHEN USING THE Profile menu in a sidebar */

/* Hide default icon in submenu*/
.buddypanel-menu.side-panel-menu i.bb-icon-file {
    display: none;  
}
/* Adjust padding in submenu items */
.buddypanel-menu.side-panel-menu .sub-menu.bb-open li.menu-item span  {
    padding-left:25px;
}
/* Restore grey (like hover) colors for current menu items */
.buddypanel-menu.side-panel-menu li.current-menu-item>a {
    color: var(--bb-sidenav-text-regular) !important;
    background-color: var(--bb-content-alternate-background-color) !important;
}
/* Restore normal colors for icons in current menu items */
.buddypanel-menu.side-panel-menu li.current-menu-item>a>i {
    color: var(--bb-alternate-text-color) !important;
}
/* Restore hover effect for current menu items */
.buddypanel-menu.side-panel-menu li a:hover {
    color: var(--bb-headings-color) !important;
    background-color: var(--bb-content-alternate-background-color) !important;
}
/* Restore normal text color for all other menu items */
.buddypanel-menu.side-panel-menu li>a {
    color: var(--bb-sidenav-text-regular) !important;
}


/**********************************************************************
* Yoast breadcrumb styling
**********************************************************************/

/* Hide breadcrumb from the Dashboard */
.page-id-1418 #breadcrumbs, .page-id-1462 #breadcrumbs{
    display: none;
}

/* Hide breadcrumb on the activation page */
.activation #breadcrumbs {
    display: none;
}

/* Hide breadcrumb when in groups */
body[class*="group-"] #breadcrumbs {
    display: none;
}

/* Hide breadcrumb on Discussions page */
body.bbpress.forum-archive #breadcrumbs {
    display: none;
}
/* Hide breadcrumb when in a single community */
body.single-item.groups #breadcrumbs {
    display: none;
}
/* Hide breadcrumb when in Learndash course lessons and topics (it has its own breadcrumb) */
body.sfwd-lessons-template-default #breadcrumbs,
body.sfwd-topic-template-default #breadcrumbs,
body.sfwd-quiz-template-default #breadcrumbs {
    display: none;
}

/* Hide breadcrumb when in WooCommerce (it has its own breadcrumb) */
body.woocommerce #breadcrumbs,
body.woocommerce-cart #breadcrumbs,
body.woocommerce-checkout #breadcrumbs {
    display: none;
}

/**********************************************************************
* WooCommerce breadcrumb styling
**********************************************************************/
/* Make WooCommerce breadcrumb separators and current page the same color as normal text (grey) 
   and same location on the page as yoast breadcrumbs */
nav.woocommerce-breadcrumb {
    color: var(--bb-body-text-color) !important;
    margin-top: -10px !important;
}
/* Make WooCommerce breadcrumb links the same color as normal links (green) */
nav.woocommerce-breadcrumb a {
    color: var(--bb-primary-color) !important;
}

/**********************************************************************
* Footer customization + Newsletter form (that is also in the pop-up)
**********************************************************************/

/* Footer: add the align right and change font size to address */
p.has-text-align-right {
    text-align: right;
    font-size: 14px;
    line-height: 20px;
}

/* Fix the gap for social icons */
.footer-widget ul.wp-block-social-links {
    gap: 6.5px;
}

/* Footer: let all the social link align by removing top margin */
.footer-widget li.wp-social-link.wp-block-social-link, .footer-widget-area.bb-footer .widget ul li+li.wp-social-link.wp-block-social-link  {
    margin-top: 0px !important;
    background-color: transparent;
    display: list-item;
}

/* Footer: lager SVG icons */
.footer-widget .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg {
    fill: #13BFB1;
    background-color: transparent;
    width: 36px;
    height: 36px;
}

/* Footer: adjust the spacing around the icons */
.footer-widget .wp-block-social-links .wp-block-social-link {
    padding-left: 10px;
}

/* Footer: hover effects for the social icons: scale + blue color */
.footer-widget .wp-block-social-link:hover {
    transform: scale(1.1);
}
.footer-widget .wp-block-social-link a:hover svg {
    fill: #008CBA !important;
}


/* Footer: reduce the top margin of the newsletter widget */
aside#block-50 {
    margin-top: 0;
}
aside#block-51 {
    margin-top: -20px;
}

/* Reduce the margin bewteen the newsletter form */
.sib_signup_form p {
    margin: 0 0 15px;
}

/* Reduce de margin at the bottom of the form (needed for pop-up) */
form.sib_signup_form {
    margin-bottom: 0;
}

/* Add a little bit of margin above the newsletter Register button */
input.sib-default-btn {
    margin-top: 10px !important;
}

/* Footer: Move the logo a bit to the left*/
.footer-widget .wp-block-image {
    margin-left: -20px;
}

/* Add a bottom padding as we have no more lower part after the footer*/
.footer-widget-area.bb-footer {
    padding-bottom: 40px;
}

/* Mobile version of the footer (below 768px) */
@media (max-width: 768px) {
    /* Center Logo, Newsletter and social icons with address on their own row */
    .footer-widget.area-1,
    .footer-widget.area-4,
    .footer-widget.area-5 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 10px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    /* Display the 2 parts of the menu side by side */
    .footer-widget.area-2,
    .footer-widget.area-3 {
        width: 50% !important; /* Half width each */
        float: left !important; /* Align side by side */
        padding: 40px 10px !important; /* Add spacing */
        box-sizing: border-box; /* Include padding in width */
        text-align: center !important; /* Center-align content */
    }

    /* Ensure parent container allows proper flow */
    .footer-widget-area.bb-footer .bb-grid {
        display: block !important; /* Default flow */
        width: 100% !important; /* Full-width container */
    }

    /* Make sure Newslwetter starts after area-2 and 3 */
    .footer-widget.area-4 {
        clear: both;
    }

    /* Make sure the address is centered too */
    .footer-widget.area-5 p {
        text-align: center;
    }
}
/* Mobile version of the footer (between 992 and 769px) */
@media (min-width: 769px) and (max-width: 992px) {
    /* Footer grid */
    .footer-widget-area.bb-footer .bb-grid {
        display: grid !important; /* Use grid layout */
        grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
        grid-template-rows: auto auto; /* 2 rows */
        gap: 40px; /* Add spacing between items */
        width: 100% !important; /* Full width */
    }

    /* Override flexbox or other interfering styles for widgets */
    .footer-widget-area.bb-footer .footer-widget {
        display: block !important; /* Ensure widgets respect grid */
        margin: 0 !important; /* Remove any inherited margins */
        max-width: none !important; /* Ensure full width within grid */
    }

    /* Area-1: Column 1, Row 1 */
    .footer-widget-area.bb-footer .footer-widget.area-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        text-align: center !important;
    }

    /* Area-2: Column 2, Row 1 */
    .footer-widget-area.bb-footer .footer-widget.area-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: center !important;
    }

    /* Area-3: Column 3, Row 1 */
    .footer-widget-area.bb-footer .footer-widget.area-3 {
        grid-column: 3 !important;
        grid-row: 1 !important;
        text-align: center !important;
    }

    /* Area-4: Column 2, Row 2 */
    .footer-widget-area.bb-footer .footer-widget.area-4 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        text-align: center !important;
    }

    /* Area-5: Column 3, Row 2 */
    .footer-widget-area.bb-footer .footer-widget.area-5 {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: flex !important; /* Enable flexbox for layout */
        flex-direction: column !important; /* Arrange items vertically */
        justify-content: center !important; /* Center items vertically */
        align-items: center !important; /* Center items horizontally */
        text-align: center !important;
    }

    /* Center the social icons in one row */
    .footer-widget.area-5 .wp-block-social-links {
        display: flex !important; /* Flex layout for social icons */
        justify-content: center !important; /* Center horizontally */
        margin-bottom: 10px !important; /* Add spacing below icons */
    }

    /* Center the text (copyright and address) in the next row */
    .footer-widget.area-5 p {
        text-align: center !important; /* Ensure the text is centered */
        margin: 0 !important; /* Remove any unnecessary margins */
    }
}

/**********************************************************************
 * LOGIN PAGE - When session expired, limit the height of the modal login
 * screen. The rest of the styling is done in the CSS of the language
 * switcher plugin which is inside the iframe.
 **********************************************************************/
div#wp-auth-check:has(iframe[title="Session expired"]) {
    max-height: 650px!important;
}

/**********************************************************************
 * MOLONGUI - Author Box
 **********************************************************************/



/* TEMPORARY HIDE TITLE AND RELATED ARTICLES BECAUSE OF SHORTCODE BUG */
#tab-description .m-a-box-item.m-a-box-meta {
    display: none;
}
/* Also hiding the name for the time being */
#tab-description .m-a-box-name.m-a-box-title {
    display: none;
}



 /* Remove opacity on the author's box header */
.m-a-box-data .m-a-box-meta {
    opacity: unset !important;
}
/* Color the link to articles and back to bio with link color */
.m-a-box-data-toggle span.m-a-box-string-more-posts,
.m-a-box-data-toggle span.m-a-box-string-bio {
   color: var(--bb-primary-color) !important;
}

/* Style the articles' list and wrap it nicely */
.m-a-box-item.m-a-box-related-entries li {
    margin-bottom: 0px;
}
.m-a-box-related-entry-title {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.m-a-box-related-entry-title i {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
}
.m-a-box-related-entry-title a {
  font-size: 13px;
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 

/* Padding for the "Find out more" button */
.find-out-more {
    padding-top: 20px;
}

/* CENTER the find out more button in different contexts*/

/* On a normal page */
.find-out-more p {
    text-align: left;
    margin-left: calc(50% - 14em);
}
@media (max-width: 641px) {
    .find-out-more p {
        text-align: center;
        margin-left: auto;
    }
}

/* Exceptions on a course page */
@media (min-width: 821px) and (max-width: 1098px) {
    .single-sfwd-courses .find-out-more p {
        text-align: center;
        margin-left: auto;
    }
}

/* Exceptions on a course page displayed in a BB Community */
.groups.single-item .find-out-more p {
    text-align: left;
    margin-left: calc(50% - 6em);
}

/* Exceptions on a product page */
.single-product .find-out-more p {
    text-align: left;
    margin-left: calc(50% - 12em);
}
@media (min-width: 800px) and (max-width: 981px) {
    .single-product .find-out-more p {
        text-align: center;
        margin-left: auto;
    }
}
@media (min-width: 682px) and (max-width: 799px) {
    .single-product .find-out-more p {
        text-align: left;
        margin-left: auto;
    }
}
@media (max-width: 681px) {
    .single-product .find-out-more p {
        text-align: center;
        margin-left: auto;
    }
}


/**********************************************************************
 * MOLONGUI - Author Archive page
 **********************************************************************/

/* Author name title style */
body.author.archive h1.page-title.center {
    font-weight: 700;
    font-size: 40px;
}

/* Make the author section only 80% width and center it */
body.author.archive div.m-a-box {
    margin-left: 10% !important;
    margin-right: 10%!important;
    width: 80%;
}

/* Use 100% of width on smaller screens and adjust padding */
@media only screen and (max-width: 991px) {
    body.author.archive div.m-a-box {
        width: 100% !important;
    }
    body.author.archive .m-a-box-item.m-a-box-avatar {
        padding-right: 30px!important;
    }
}
@media only screen and (max-width: 659px) {
    body.author.archive .m-a-box-item.m-a-box-avatar {
        padding-right: 0px!important;
    }
    body.author.archive .m-a-box-content.m-a-box-profile .m-a-box-data .m-a-box-meta {
        text-align: left!important;
    }
}

/* Align photo on the top and extra padding */
body.author.archive .m-a-box-item.m-a-box-avatar {
    align-self: normal!important;
    padding-right: 50px!important;
}

/* Page title format and list of articles */
body.author.archive .template-page.posts-listing.masonry-listing h1.page-title,
body.author.archive .template-page.posts-listing.masonry-listing h3.page-title{
    font-size: calc(30px + 1vw);
    font-weight:700;
}
.center {
    text-align: center;
}

/* Change font for roles (job title) */
body.author.archive span[itemprop="jobTitle"] {
    font-size: 26px !important;
    color: #333333 !important;
    font-weight: 500;
}
/* Add border like for blog title to roles*/
body.author.archive .m-a-box-item.m-a-box-meta {
    padding: 10px 10px 0px;
    border-left-color:rgb(19, 191, 177);
    border-left-style: solid;
    border-left-width: 7px;

}

/* Hide name and article togle */
body.author.archive .m-a-box-title,
body.author.archive span.m-a-box-meta-divider,
body.author.archive a.m-a-box-data-toggle {
    display: none;
}

/* Bio */
body.author.archive .m-a-box-bio p {
    font-size: 16px!important;
    line-height: 22px;
}

/* Titles in bio */
body.author.archive .m-a-box-bio > h4 {
    font-size: 22px !important;
    line-height: 26px !important;
    font-weight: 700 !important;
}

/* Icon bar */
body.author.archive .m-a-box-item.m-a-box-social {
    width:100%;
    justify-content: center;
}

body.author.archive .m-icon-container {
    font-size: 30px;
}

/* Title style for "article by" */
body.author.archive h3.page-title {
    margin-top: 80px;
    padding: 0px 10px 0px;
    border-left-color:rgb(19, 191, 177);
    border-left-style: solid;
    border-left-width: 7px;

    font-family: Montserrat;
    text-align: left;
    font-size: 26px !important;
    color: #333333 !important;
    font-weight: 500;
}

/* Remove the avatar in an article box if there are 2 or more authors */
.avatar-wrap:has(> a:nth-child(2)) {
    display:none;
}

/****************************************************************************
 * BLOG ARTICLES
 **************************************************************************/
/* Main blog article title -> use same as h1 in the theme settings */
.post-template-default.single-post h1.entry-title {
    font-size: 40px !important;
}
/* Related posts titles at the bottom of articles is h2, put the same as h3 */
.post-related-posts h2.entry-title {
    font-size: 22px !important;
}




/****************************************************************************
 * DASHBOARD page
 **************************************************************************/
 /* Allow the height of Activity to go at least the same as the menu */
.page-id-1418 .bbel-list-flow,
.page-id-1462 .bbel-list-flow {
    max-height: 1370px;
}


/****************************************************************************
 * LEARNDASH - Changing a class in the course archive template, making
 * navigation static so that filters reload the page rather than trigger AJAX
 **************************************************************************/
.static-navigation .sub-menu {
    padding: 8px;
}
.bb-template-v2 .bp-navs ul.static-navigation:not(.subnav) li.selected a {
    border-bottom: 0;
}
.static-navigation.courses-nav li {
    position: relative;
    list-style: none;
    margin-right: 5px;
}
.static-navigation.courses-nav {
    margin: 0;
}

/****************************************************************************
 * LEARNDASH - Course archive : 
 * Take style from elementor for the header
 **************************************************************************/
/* Add the green background image to the header */
 .elementor-3711 .elementor-element.elementor-element-ce5079f:not(.elementor-motion-effects-element-type-background), .elementor-3711 .elementor-element.elementor-element-ce5079f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url(https://paradigm21ch.kinsta.cloud/wp-content/uploads/2025/01/top-long.png);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Align the text between the header and the course catalog to have the right format */
.elementor-3711 .elementor-container.elementor-column-gap-default .elementor-column.elementor-col-100.elementor-top-column.elementor-element.elementor-element-6601c46>.elementor-widget-wrap.elementor-element-populated  {
    padding: 0 !important; 
}

/* Align the content below the course catalog to have the same max full width as the catalog */
.learndash-cpt-sfwd-courses .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px !important;
}

/* Make the course catalog title look similar as other elementor pages */
.elementor-3711 .elementor-heading-title {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary);
}

/* Hide breadcrumb */
.post-type-archive-sfwd-courses.elementor-default div#breadcrumbs {
    display: none;
}

/* Remove white bar above the green section */
.post-type-archive-sfwd-courses.elementor-default div#primary {
    padding-top: 0;
}


/****************************************************************************
 * LEARNDASH - Single Course
 **************************************************************************/

/* Fix the underline of active tab to not have a space with the separator */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab:after {
    bottom: -1px;
    left: -1px !important;
}

 /* On mobile, lign-up the two buttons in the wrapper "Not enrolled" and "See options and prices" */
 @media (max-width: 640px) {
    .learndash-wrapper:not(.ld-registration__outer-wrapper) #btn-join,.learndash-wrapper:not(.ld-registration__outer-wrapper) .btn-join {
        margin-left:0px;
        text-align: center;
    }
}

/* Make sure the course wrapper doesn't go over the course title before it gets put below */
@media (min-width: 821px) and (max-width: 1000px) {
    .bb-learndash-banner .bb-course-banner-inner {
        padding-right: 50px;
    }
}

/* Add a line separatore before course content (only on the course page, not WooCommerce */
.single-sfwd-courses .ld-item-list.ld-lesson-list {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid var(--bb-content-border-color);
}

/* Make Course content the same font size as other h2 sections */
.ld-item-list.ld-lesson-list h2 {
    font-size: 24px !important;
}

/* Add an emoji before the course content title */
.ld-item-list.ld-lesson-list h2::before {
    content: "📚 "; /* Choose any emoji */
    font-size: 1.2em; /* Adjust size if needed */
    margin-right: 8px;
}

/* Make the image backgound on the course header darker for readability with white text */
.bb-vw-container.bb-learndash-banner img {
    filter: brightness(50%) contrast(120%) saturate(250%);
}

/* Make course title bolder and bigger */
.single-sfwd-courses h1.entry-title {
    font-size: 300% !important;
    font-weight: 700 !important;
}

/* Make course description bigger and bold */
.single-sfwd-courses .bb-course-excerpt {
    font-size: 120% !important;
    font-weight: 600 !important;
}

/* Make the the on-going label grey like on the LD product page rather than a green button */
.groups.single-item .learndash-wrapper .ld-status.ld-status-progress {
    background-color: var(--bb-content-alternate-background-color) !important;
}

/* Remove margin below the "course contains" title in the sidebar - also for course in BB Community */
.bb-single-course-sidebar h4 {
    margin: 0 !important;
}


/****************************************************************************
 * LEARNDASH - Single Course displayed in BuddyBoss Community
 **************************************************************************/
/* Hide course description when LD course is displayed inside a community - focus on course content */
.single-item.groups .bb-ld-tabs {
    display: none;
}

/****************************************************************************
 * LEARNDASH - Single Course: Course Content
 **************************************************************************/
/* Remove grey background and padding top and bottom to 0 + 28 on sides for non-expandable items */ 
.ld-item-list-item.ld-item-lesson-item .ld-item-list-item-preview,
.ld-item-list-item.ld-item-lesson-item .ld-table-list-title {
    background: transparent !important;
    padding: 0px 14px 0px 28px !important;
}

/* Padding left of 18 less for expandable items to compensate for arrow */ 
.ld-item-list-item.ld-item-lesson-item.ld-expandable .ld-item-list-item-preview {
    padding: 0px 14px 0px 10px !important;
}

/* Text color black */
.ld-item-list-item.ld-item-lesson-item .ld-item-list-item-preview span:not(.ld-icon-checkmark),
.ld-item-list-item.ld-item-lesson-item .ld-table-list-title {
    color: var(--bb-alternate-text-color);
}

/* Hover in green on items that have href tags in the <a> (Learndash vs WooCommerce) */
.ld-item-list-item.ld-item-lesson-item a[href] span:hover {
    color: var(--bb-headings-color) !important;
}


/****************************************************************************
 * LEARNDASH - Learning Environment - Course side bar
 **************************************************************************/
/* Correct courses and topics font color */
.lms-topic-sidebar-wrapper .lms-course-quizzes-list>ul>li a.bb-lesson-head, 
.lms-topic-sidebar-wrapper .lms-lessions-list>ol>li a.bb-lesson-head,
.bb-type-list li a, .lms-quiz-list li a  {
    color: var(--bb-body-text-color);
}

/* Change style for selected lesson or topic */
.lms-lesson-item.current>.bb-lesson-head,
.lms-quiz-item.current>.bb-lms-title-wrap,
.lms-topic-item.current>.bb-lms-title-wrap {
    font-weight: bold !important;
    background-color: rgba(54, 57, 77, .15) !important;
}

/* Change style for selected lesson or topic DARK MODE */
.bb-sfwd-aside.bb-dark-theme .lms-lesson-item.current>.bb-lesson-head,
.bb-sfwd-aside.bb-dark-theme .lms-quiz-item.current>.bb-lms-title-wrap,
.bb-sfwd-aside.bb-dark-theme .lms-topic-item.current>.bb-lms-title-wrap {
    font-weight: bold !important;
    background-color: rgba(122, 122, 122, .35) !important;
}

/* Change style for hover in side bar navigation */
.bb-type-list li a:hover, 
.lms-quiz-list li a:hover,
.bb-lesson-head .bb-lesson-title:hover{
    color: var(--bb-primary-color) !important;
    font-weight: bold !important;
    background-color: transparent !important;
    -webkit-transition: none !important;
    transition: none !important;
}
.bb-lesson-head:hover {
    font-weight: bold !important;
    background-color: transparent !important;
}

/* Change style for hover in side bar navigation DARK MODE */
.bb-sfwd-aside.bb-dark-theme .bb-type-list li a:hover, 
.bb-sfwd-aside.bb-dark-theme .lms-quiz-list li a:hover,
.bb-sfwd-aside.bb-dark-theme .bb-lesson-head .bb-lesson-title:hover{
    color: #fff !important;
}

/* Make sure Topics and Quiz style doesn't change */
.bb-lesson-topics-count:hover,
.bb-lesson-sidebar-ld-sep:hover,
.bb-lesson-quizzes-count:hover,
.bb-lesson-topics-count,
.bb-lesson-sidebar-ld-sep,
.bb-lesson-quizzes-count{
    color: var(--bb-body-text-color) !important;
    font-weight: 100 !important;
}

/* Make sure Topics and Quiz style doesn't change DARK MODE */
.bb-sfwd-aside.bb-dark-theme .bb-lesson-topics-count:hover,
.bb-sfwd-aside.bb-dark-theme .bb-lesson-sidebar-ld-sep:hover,
.bb-sfwd-aside.bb-dark-theme .bb-lesson-quizzes-count:hover,
.bb-sfwd-aside.bb-dark-theme .bb-lesson-topics-count,
.bb-sfwd-aside.bb-dark-theme .bb-lesson-sidebar-ld-sep,
.bb-sfwd-aside.bb-dark-theme .bb-lesson-quizzes-count{
    color: #888 !important;
    font-weight: 100 !important;
}

/* Adding a separator between lesson titles */
.lms-topic-sidebar-wrapper .ld-item-list-section-heading {
    border-top: 1px solid var(--bb-content-border-color);
    padding-top: 11px;
}

/* Removing the top separator to avoid duplicate */
.lms-topic-sidebar-progress .course-progress-wrap {
    border-bottom: none !important;
}

/* Adjust progress wrapper color for selected lesson only */
.lms-lesson-item.current>.bb-lesson-head .bb-progress:after {
    border: 2px solid #bbb !important;
}


/****************************************************************************
 * LEARNDASH - Course content
 **************************************************************************/
/* Hide instructor and publish date in all course content */
.single-sfwd-courses .lms-header-instructor,
.single-sfwd-lessons .lms-header-instructor,
.single-sfwd-topic .lms-header-instructor,
.single-sfwd-quiz .lms-header-instructor,
.single-sfwd-assignment .lms-header-instructor {
    display: none;
}

/****************************************************************************
 * LEARNDASH - Quizz formatting
 **************************************************************************/

/* Make options for evaluations that are not on a scale (like 1-10) to be each on 1 line */
.wpProQuiz_questionListItem>p>label {
    display: block !important;
}

/* Add a line between Quizz description and question */
.single-sfwd-quiz .ld-tabs.ld-tab-count-1 {
    border-bottom: 2px solid #e2e7ed;
    margin-bottom: 30px;
}

/* Make the question text bigger */
.single-sfwd-quiz .wpProQuiz_question_text {
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 500;
}

/* Style the radio button on vertical list (not 1-10)
   so that all options are on separate lines and aligned left */
   .wpProQuiz_questionListItem p:not(.description) {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Adds spacing between options */
    align-items: flex-start !important; /* Aligns labels to the left */
}

/* Make the options less bold in assessments */
.single-sfwd-quiz .wpProQuiz_questionListItem label {
    font-weight: 400!important;
}

/* And make the sides of the scale more bold */
.single-sfwd-quiz .wpProQuiz_questionListItem p.description {
    font-weight: 700;
}

/* Style the Assessment questions that are on a scale from 1 to 10 */
.single-sfwd-quiz .wpProQuiz_questionListItem span.description-red {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically align the side text */
  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
  width: 100%; /* Ensure the container spans the full width */
  margin-right: 25px!important; /* Add space before the last right scale label*/
}
.single-sfwd-quiz .wpProQuiz_questionListItem .description-red label {
  display: flex !important;
  flex-direction: column;
  align-items: center; /* Center input and number horizontally */
  margin-right: 4px !important; /* Space between labels */
  text-align: center; /* Ensure the text is centered under the input */
}
.single-sfwd-quiz .wpProQuiz_questionListItem .description-red input {
  margin: 0 !important; /* Remove all default margins */
  margin-bottom: 5px !important; /* Add space between input and number */
}
.single-sfwd-quiz .wpProQuiz_questionListItem>p {
  display: flex; /* Ensure flex layout to manage text alignment */
  justify-content: space-between; /* Distribute "Very unlikely" and "Very likely" */
  align-items: center; /* Align vertically in the middle */
  width: 100%; /* Ensure full width to prevent wrapping */
  white-space: nowrap; /* Prevent wrapping in the description */
  overflow: hidden; /* Prevent text overflow */
}

/* Style the comment to a Quizz answer to be not centered but alligned left */
.wpProQuiz_AnswerMessage {
    text-align: left;
}

/* Mobile view styling */
@media (max-width: 768px) {
  .single-sfwd-quiz .wpProQuiz_questionListItem .description-red {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center all content */
    align-items: center; /* Center all content */
    gap: 15px; /* Add space between stacked elements */
  }
  .single-sfwd-quiz .wpProQuiz_questionListItem .description-red label {
    flex-direction: row; /* Display input and number on the same line */
    justify-content: center; /* Center the label's content */
    align-items: center; /* Center vertically */
    margin-right: 0; /* Remove horizontal spacing for stacked layout */
    gap: 10px; /* Add spacing between input and number */
  }
  .single-sfwd-quiz .wpProQuiz_questionListItem .description-red input {
    margin: 0; /* Remove unnecessary margins for better alignment */
  }
  .single-sfwd-quiz .wpProQuiz_questionListItem .description {
    text-align: center; /* Center the entire paragraph on mobile */
    flex-direction: column; /* Stack "Very unlikely" and "Very likely" vertically */
    align-items: center;
    justify-content: center;
  }
  .single-sfwd-quiz .wpProQuiz_questionListItem span.description-red {
    row-gap: 0px; /* Remove gap between rows on mobile */
  }
  .single-sfwd-quiz .wpProQuiz_questionListItem li.wpProQuiz_questionListItem {
    text-align: center !important; /* Center the entire list item */
  }
}
@media (max-width: 640px) {
    .learndash-wrapper .wpProQuiz_content .wpProQuiz_button, .learndash-wrapper .wpProQuiz_content .wpProQuiz_button2 {
      text-align: center; /* Center the text inside the button on mobile */
    }
}

/* Style the initial question that adds a date field */ 
.wpProQuiz_text .wpProQuiz_forms label {
    font-size:revert;
    font-weight: 500;
}
/* Target the 'day' select dropdown */
.wpProQuiz_text .wpProQuiz_forms select[name="wpProQuiz_field_1_day"],
.wpProQuiz_text .wpProQuiz_forms select[name="wpProQuiz_field_2_day"] {
  width: 90px!important; /* Adjust the width as needed */
}
/* Target the 'month' select dropdown */
.wpProQuiz_text .wpProQuiz_forms select[name="wpProQuiz_field_1_month"],
.wpProQuiz_text .wpProQuiz_forms select[name="wpProQuiz_field_2_month"] {
  width: 140px!important; /* Adjust the width as needed */
}
/* Target the 'year' select dropdown */
.wpProQuiz_text .wpProQuiz_forms .wpProQuiz_formFields select,
.wpProQuiz_text .wpProQuiz_forms .wpProQuiz_formFields select {
  width: 110px!important; /* Adjust the width as needed */
}
.wpProQuiz_text .wpProQuiz_forms td:first-child {
  width: 60%; /* Allocate 70% of space for the label */
  text-align: left; /* Align the label text to the left */
  vertical-align: middle;
  padding-right: 10px

}
.wpProQuiz_text .wpProQuiz_forms td:last-child {
  width: 40%; /* Allocate 30% of space for the input fields */
  text-align: right; /* Align the input fields to the right */
}
.wpProQuiz_text .wpProQuiz_forms table {
  border: none; /* Remove the border from the table */
}

/* Hide Grading disclaimer on open text submissions */
p.graded-disclaimer {
    display: none;
}

/* Hide the number of questions "correct" and the points for assessment Quizzes 
 * This works together with a JS injected by functions.php and a span in the 
 * Quiz description: <span class="assessment-quiz"></span> */
 .has-assessment-quiz .wpProQuiz_results>p:first-of-type,
 .has-assessment-quiz p.wpProQuiz_points {
     display: none;
 }

/****************************************************************************
 * LEARNDASH Hide future years and very old years in course evaluation Quiz
 **************************************************************************/
.wpProQuiz_formFields select option[value="2045"],
.wpProQuiz_formFields select option[value="2044"],
.wpProQuiz_formFields select option[value="2043"],
.wpProQuiz_formFields select option[value="2042"],
.wpProQuiz_formFields select option[value="2041"],
.wpProQuiz_formFields select option[value="2040"],
.wpProQuiz_formFields select option[value="2039"],
.wpProQuiz_formFields select option[value="2038"],
.wpProQuiz_formFields select option[value="2037"],
.wpProQuiz_formFields select option[value="2036"],
.wpProQuiz_formFields select option[value="2035"],
.wpProQuiz_formFields select option[value="2034"],
.wpProQuiz_formFields select option[value="2033"],
.wpProQuiz_formFields select option[value="2032"],
.wpProQuiz_formFields select option[value="2031"],
.wpProQuiz_formFields select option[value="2030"],
.wpProQuiz_formFields select option[value="2029"],
.wpProQuiz_formFields select option[value="2028"],
.wpProQuiz_formFields select option[value="2027"],
.wpProQuiz_formFields select option[value="2026"],

.wpProQuiz_formFields select option[value="2017"],
.wpProQuiz_formFields select option[value="2016"],
.wpProQuiz_formFields select option[value="2015"],
.wpProQuiz_formFields select option[value="2014"],
.wpProQuiz_formFields select option[value="2013"],
.wpProQuiz_formFields select option[value="2012"],
.wpProQuiz_formFields select option[value="2011"],
.wpProQuiz_formFields select option[value="2010"],
.wpProQuiz_formFields select option[value="2009"],
.wpProQuiz_formFields select option[value="2008"],
.wpProQuiz_formFields select option[value="2007"],
.wpProQuiz_formFields select option[value="2006"],
.wpProQuiz_formFields select option[value="2005"],
.wpProQuiz_formFields select option[value="2004"],
.wpProQuiz_formFields select option[value="2003"],
.wpProQuiz_formFields select option[value="2002"],
.wpProQuiz_formFields select option[value="2001"],
.wpProQuiz_formFields select option[value="2000"],
.wpProQuiz_formFields select option[value="1999"],
.wpProQuiz_formFields select option[value="1998"],
.wpProQuiz_formFields select option[value="1997"],
.wpProQuiz_formFields select option[value="1996"],
.wpProQuiz_formFields select option[value="1995"],
.wpProQuiz_formFields select option[value="1994"],
.wpProQuiz_formFields select option[value="1993"],
.wpProQuiz_formFields select option[value="1992"],
.wpProQuiz_formFields select option[value="1991"],
.wpProQuiz_formFields select option[value="1990"],
.wpProQuiz_formFields select option[value="1989"],
.wpProQuiz_formFields select option[value="1988"],
.wpProQuiz_formFields select option[value="1987"],
.wpProQuiz_formFields select option[value="1986"],
.wpProQuiz_formFields select option[value="1985"],
.wpProQuiz_formFields select option[value="1984"],
.wpProQuiz_formFields select option[value="1983"],
.wpProQuiz_formFields select option[value="1982"],
.wpProQuiz_formFields select option[value="1981"],
.wpProQuiz_formFields select option[value="1980"],
.wpProQuiz_formFields select option[value="1979"],
.wpProQuiz_formFields select option[value="1978"],
.wpProQuiz_formFields select option[value="1977"],
.wpProQuiz_formFields select option[value="1976"],
.wpProQuiz_formFields select option[value="1975"],
.wpProQuiz_formFields select option[value="1974"],
.wpProQuiz_formFields select option[value="1973"],
.wpProQuiz_formFields select option[value="1972"],
.wpProQuiz_formFields select option[value="1971"],
.wpProQuiz_formFields select option[value="1970"],
.wpProQuiz_formFields select option[value="1969"],
.wpProQuiz_formFields select option[value="1968"],
.wpProQuiz_formFields select option[value="1967"],
.wpProQuiz_formFields select option[value="1966"],
.wpProQuiz_formFields select option[value="1965"],
.wpProQuiz_formFields select option[value="1964"],
.wpProQuiz_formFields select option[value="1963"],
.wpProQuiz_formFields select option[value="1962"],
.wpProQuiz_formFields select option[value="1961"],
.wpProQuiz_formFields select option[value="1960"],
.wpProQuiz_formFields select option[value="1959"],
.wpProQuiz_formFields select option[value="1958"],
.wpProQuiz_formFields select option[value="1957"],
.wpProQuiz_formFields select option[value="1956"],
.wpProQuiz_formFields select option[value="1955"],
.wpProQuiz_formFields select option[value="1954"],
.wpProQuiz_formFields select option[value="1953"],
.wpProQuiz_formFields select option[value="1952"],
.wpProQuiz_formFields select option[value="1951"],
.wpProQuiz_formFields select option[value="1950"],
.wpProQuiz_formFields select option[value="1949"],
.wpProQuiz_formFields select option[value="1948"],
.wpProQuiz_formFields select option[value="1947"],
.wpProQuiz_formFields select option[value="1946"],
.wpProQuiz_formFields select option[value="1945"],
.wpProQuiz_formFields select option[value="1944"],
.wpProQuiz_formFields select option[value="1943"],
.wpProQuiz_formFields select option[value="1942"],
.wpProQuiz_formFields select option[value="1941"],
.wpProQuiz_formFields select option[value="1940"],
.wpProQuiz_formFields select option[value="1939"],
.wpProQuiz_formFields select option[value="1938"],
.wpProQuiz_formFields select option[value="1937"],
.wpProQuiz_formFields select option[value="1936"],
.wpProQuiz_formFields select option[value="1935"],
.wpProQuiz_formFields select option[value="1934"],
.wpProQuiz_formFields select option[value="1933"],
.wpProQuiz_formFields select option[value="1932"],
.wpProQuiz_formFields select option[value="1931"],
.wpProQuiz_formFields select option[value="1930"],
.wpProQuiz_formFields select option[value="1929"],
.wpProQuiz_formFields select option[value="1928"],
.wpProQuiz_formFields select option[value="1927"],
.wpProQuiz_formFields select option[value="1926"],
.wpProQuiz_formFields select option[value="1925"],
.wpProQuiz_formFields select option[value="1924"],
.wpProQuiz_formFields select option[value="1923"],
.wpProQuiz_formFields select option[value="1922"],
.wpProQuiz_formFields select option[value="1921"],
.wpProQuiz_formFields select option[value="1920"],
.wpProQuiz_formFields select option[value="1919"],
.wpProQuiz_formFields select option[value="1918"],
.wpProQuiz_formFields select option[value="1917"],
.wpProQuiz_formFields select option[value="1916"],
.wpProQuiz_formFields select option[value="1915"],
.wpProQuiz_formFields select option[value="1914"],
.wpProQuiz_formFields select option[value="1913"],
.wpProQuiz_formFields select option[value="1912"],
.wpProQuiz_formFields select option[value="1911"],
.wpProQuiz_formFields select option[value="1910"],
.wpProQuiz_formFields select option[value="1909"],
.wpProQuiz_formFields select option[value="1908"],
.wpProQuiz_formFields select option[value="1907"],
.wpProQuiz_formFields select option[value="1906"],
.wpProQuiz_formFields select option[value="1905"],
.wpProQuiz_formFields select option[value="1904"],
.wpProQuiz_formFields select option[value="1903"],
.wpProQuiz_formFields select option[value="1902"],
.wpProQuiz_formFields select option[value="1901"],
.wpProQuiz_formFields select option[value="1900"]
{
    display: none;
}


/****************************************************************************
 * LEARNDASH ASSIGNMENT PRO
 **************************************************************************/
/* Make the resubmit message bold in Assignment Pro */
div#assignments-pro-reopened-submission p:last-child {
    font-weight: 700;
}


/****************************************************************************
 * UNCANNY GROUP MANAGEMENT FOR LEARNDASH
 **************************************************************************/
/* Remove "title" style from Group dropdown and list of course title on group management page */
span.uo-looks-like-h3.ulg-manage-progress__title,
h2.group-courses-heading.uo-looks-like-h3 {
    font-size: unset;
    font-family: unset;
    font-weight:600;
}

/* Make the main selector wider on the group management page */
span.select2-dropdown.select2-dropdown--below {
    max-width: 400px;
}

/* Remove top margin for course list on group management page */
.uo-row.uo-groups-group-courses-list {
    margin: 0;
}

/* Make font of default course fit in the space essays page */
.uo-groups.uo-reports select#uo-group-report-courses {
    font-size: unset;
    font-weight: unset;
    width: 230px;
}

/* Make the Trash buttom red clearer on essays' page */
span.trash a.delete_essay_single {
        color: red;
}
span.trash a.delete_essay_single::before {
        content: "🗑️ ";
}
table#uo-group-essays-table .row-actions {
        padding-top: 20px;
}


/* Format the point editing field in the essay table */
table#uo-group-essays-table input.small-text{
    padding: 0 0 0 5px;
    margin: 8px 0 10px;
}

/* Format the approve button in the essay table */
table#uo-group-essays-table button.essay_approve_single {
    margin-top: 10px;
    padding: 5px 15px !important;
    font-size: 12px !important;
    background-color: var(--bb-primary-button-background-regular) !important;
    color: var(--bb-primary-button-text-regular) !important;
    border: 1px solid var(--bb-primary-button-background-regular) !important;
    border-radius: var(--bb-button-radius) !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: none !important; 
    -webkit-transition: none !important;
    transition: none !important;
}
table#uo-group-essays-table button.essay_approve_single:hover
{
    background-color: var(--bb-primary-button-background-hover) !important;
    color: var(--bb-primary-button-text-hover) !important;
    border: 1px solid var(--bb-primary-button-background-regular) !important;
    background-image: none !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: none !important; 
    -webkit-transition: none !important;
    transition: none !important;
}

/* Remove the check box before column customization and add margin on essays and course pages*/
input#uo-group-essays-table-filter-columns-field,
input#group-course-report-datatable-filter-columns-field {
    display: none;
}
div#uo-group-essays-table-filter-columns,
div#group-course-report-datatable-filter-columns {
    margin-top: 30px;
}

/* Move the "Reports" menu to the top right of the page */
.group-management-buttons__right {
    position: absolute;
    top: 0rem;
    right: 0;
}
@media (max-width: 500px) {
    .group-management-buttons__right {
        position: static;
    }
}

/* Prevent line break on group title before groupe dropdown */
span.uo-looks-like-h3.ulg-manage-progress__title {
    white-space: nowrap;
}

/* Limit the group dropdown width on mobile */
@media (max-width: 600px) {
    span.select2.select2-container.select2-container--default {
        width: auto !important;
    }
}


/****************************************************************************
 * PDF POSTER
 **************************************************************************/

 /* Small border around PDF and top margin */
 .pdfp_wrapper .iframe_wrapper {
    border: 1px solid var(--bb-content-border-color);
    margin-top: 40px
}
/****************************************************************************
 * WOOCOMMERCE Archives
 **************************************************************************/

/* Add margin above and below the description of a catefory or a tag archive page */
.tax-product_cat header.woocommerce-products-header,
.post-type-archive-product header.woocommerce-products-header {
    margin: 30px 0 60px;
}

/* Format the dates in a product card on archive list */
li.product p.event-date {
    display: flex;
    justify-content: center;
    color: var(--bb-body-text-color);
    font-size: .857em;
    font-weight: 500;
    padding: 0 0px;
    margin-bottom: 0;
}

/* Display the side bar on mobile - below products */
@media (max-width: 800px) {
    #secondary.wc-widget-area .wc-widget-area-expandable {
        display: block;
    }
    /* Remnove background and borders */
     .wc-widget-area-expandable aside:first-child {
        background: transparent;
        border: none;
    }
}

/****************************************************************************
 * WOOCOMMERCE Course Archives (Public Catalog)
 **************************************************************************/

/* Make the sidebar show next to products on desktop */
@media (min-width: 768px) {
    /* Target only the main content and sidebar on archive pages */
    .tax-product_cat.term-cours #primary,
    .tax-product_cat.term-courses #primary  {
        float: left;
        width: calc(100% - 320px); /* subtract 300px for sidebar plus 20px gap */
        max-width: 860px !important; /* if container is 1180px, 1180 - 300 - 20 = 860 */
        margin-right: 20px;
        box-sizing: border-box;
        padding-top: 0;
        margin-left: 20px !important;
    }
    .tax-product_cat.term-cours #secondary,
    .tax-product_cat.term-courses #secondary {
        float: left;
        width: 280px;
        max-width: 280px;
        box-sizing: border-box;
        padding-top: 0;
    }
    /* Clear floats after primary and sidebar if necessary */
    .tax-product_cat.term-cours #primary:after,
    .tax-product_cat.term-courses #primary:after,
    .tax-product_cat.term-cours #secondary:after,
    .tax-product_cat.term-courses #secondary:after {
        content: "";
        display: table;
        clear: both;
    }

    /* Line up the H1 below Elementor intro */
    .tax-product_cat.term-courses header.woocommerce-products-header,
    .tax-product_cat.term-cours header.woocommerce-products-header {
        margin-top: 0px !important;
    }
}

/* Hide breadcrumbs and title */
.tax-product_cat.term-cours nav.woocommerce-breadcrumb,
.tax-product_cat.term-cours header.woocommerce-products-header>h1,
.tax-product_cat.term-courses nav.woocommerce-breadcrumb,
.tax-product_cat.term-courses header.woocommerce-products-header>h1 {
    display: none;
}

/* Hide the widgets after categories and the first featured item in the sidebar */
.tax-product_cat.term-cours .wc-widget-area-expandable aside:nth-child(n+4),
.tax-product_cat.term-courses .wc-widget-area-expandable aside:nth-child(n+4) {
    display: none !important;
}


/****************************************************************************
 * WOOCOMMERCE Products
 **************************************************************************/

/* Hide the language warning when in FRENCH 
   WARNING - IF we have courses in English only, use a different class */
h3.language-warning:lang(fr-FR),
h3.language-warning:lang(fr-FR)+hr {
    display: none !important;
}

/* Make line height taller for titles on 2 lines for single product page */
.single-product h1.product_title.entry-title {
    line-height: 40px !important;
}

/* Hide product caracteristics on single product page */
.single-product h4.pr-sub-heading,  .single-product .pr-atts-row {
    display: none !important;
}

/* Make the option label grey and a bit thinner with more spacint on the product page */
.wpo-options-container label, .wpo-options-container p.wpo-option-name {
    color: var(--bb-body-text-color);
    font-weight: 400 !important;
    padding: 15px 0 5px;
}

/* Add some paddigng to the explanation text for the option in the product page */
.wpo-options-container p.wpo-field-description {
    padding: 10px 10px;
}

/* Make the option label grey and a bit thinner with more spacint on the product page */
.wpo-options-container label, .wpo-options-container p.wpo-option-name {
    color: var(--bb-body-text-color);
    font-weight: 400 !important;
    padding: 15px 0 5px;
}

/* Add some paddigng to the explanation text for the option in the product page */
.wpo-options-container p.wpo-field-description {
    padding: 10px 10px;
}

/* Hide the clear button for selecting a variation */
.single-product table.variations tr:has(button.reset_variations) {
    display: none;
}

/* Hide "Select an option" in the option's list - we default to none */
.wpo-options-container .nice-select-dropdown li.option.null[data-value=""] {
    display: none;
}

/* Make product page tabs bigger */
.woocommerce-tabs.wc-tabs-wrapper ul li a {
    font-size: 16px !important;
    font-weight: 500 !important;
}
.woocommerce-tabs.wc-tabs-wrapper ul li {
    margin-bottom: 10px !important;
}
.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs {
    margin-bottom: 0px !important;
}

/* Remove padding when not sticky to avoid jump */
.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs:not(.is-sticky) {
    padding-bottom: 0px !important;
}

/* Smaller tabs on mobile */
@media (max-width: 640px) {
    .woocommerce-tabs.wc-tabs-wrapper ul li a {
        font-size: 11px !important;
        font-weight: 400 !important;
        padding-bottom: 0px !important;
    }
    .woocommerce-tabs.wc-tabs-wrapper ul li {
        margin-bottom: 0px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Add a right margin to product tab content on mobile */
@media (max-width: 800px) {
    .woocommerce-tabs.wc-tabs-wrapper {
        max-width: calc(100% - 10px);
    }
}

/* Move related product a bit so the left border doesn't go in the sticky tabs */
.single-product section.related.products {
    margin-left: 20px;
}
/* Remove left margin of related products on mobile */
@media (max-width: 544px) {
    section.related.products {
        margin-left: 0px !important;
    }
}

/* PRODUCT TAB CONTENT */

/* Fix font size and reduce spacing in Woocommerce tabs */
#content div.product .woocommerce-tabs .panel p,
#content div.product .woocommerce-tabs .panel li a,
#content div.product .woocommerce-tabs .panel ,
#content div.product .woocommerce-tabs .panel td{
    font-size: 16px !important;
    line-height: 1.68rem;
    margin-bottom: 14px;
}
#content div.product .woocommerce-tabs .panel h4{
    line-height: 1.5rem;
    margin-top: 25px;
    margin-bottom: 8px;
}
#content div.product .woocommerce-tabs .panel h3{
    line-height: 1.5rem;
    margin-bottom: 15px;
    margin-top: 25px;
}
#content div.product .woocommerce-tabs .panel ul{
    margin-bottom: 15px !important;
}
#content div.product .woocommerce-tabs .panel li{
    margin-bottom: -2px !important;
}

/* Hide "Product Description" title in tab */
div#tab-description h2:nth-child(1):not(.wp-block-heading):not(.language-warning) {
    display: none;
}

/* PRODUCT WIDGETS IN SIDEBAR */

/* Adjust the padding on widgets of features products in the sidebar */
.wc-block-featured-product.wp-block-woocommerce-featured-product h2.wc-block-featured-product__title {
    padding: 15px
}

.wc-block-featured-product.wp-block-woocommerce-featured-product .wc-block-featured-product__description {
    padding: 10px 15px 15px;
}

/* Don't zoom into image, but make it cover the widget */
.wc-block-featured-product.wp-block-woocommerce-featured-product img.wc-block-featured-product__background-image {
    object-fit: cover !important;
}

/****************************************************************************
 * WOOCOMMERCE Cart, check-out and order confirmation page
 **************************************************************************/

/* Hide subtotals in the cart */
.cart_totals tr.recurring-totals,
.cart_totals tr.cart-subtotal,
.cart_totals tr.cart-subtotal.recurring-total {
    display: none;
}

/* Hide "Added to cart" banner with "Continue shopping" button */
.woocommerce .woocommerce-notices-wrapper .woocommerce-message  {
    display:none !important;
}

/* We have the problem that Woocommerce moves the zip field around when changing the country 
   Although we have this setup in the Checkout plugin, we need to do it one more time here
   to prevent this being messed up. */

/* 1) Make the billing field wrapper use Flexbox */
.woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-flow: row wrap; /* or column wrap if you want them stacked */
  }
  
  /* 2) Assign each field a specific "order" */
  #billing_first_name_field {
    order: 10;
    flex: 1 1 45%; /* share row with last name */
    margin-right: 10px;
  }
  #billing_last_name_field {
    order: 20;
    flex: 1 1 45%;
  }
  #billing_email_field {
    order: 30;
    flex: 1 1 45%; /* share row with phone */
    margin-right: 10px;
  }
  #billing_phone_field {
    order: 40;
    flex: 1 1 45%;
  }
  #billing_country_field {
    order: 50;
    flex: 0 0 100%; /* new line */
  }
  #billing_company_field {
    order: 60;          /* after Country which is typically ~50 */
    flex: 0 0 100%;     /* forces a new row, full width */
  }
  /* Heading "Billing address for invoice?" and checkbox on its own line */
  #billing_wooccm11_field {
    order: 70;
    flex: 1 1 auto;
    margin-bottom: 0px!important;
  }
  #billing_wooccm12_field {
    order: 80;
    flex: 1 1 auto;
    margin-top: 13px;
    margin-bottom: 0px!important;
  }
  #billing_address_1_field {
    order: 90;
    flex: 1 1 100%;
  }
  #billing_address_2_field {
    order: 100;
    flex: 1 1 100%;
  }
  #billing_postcode_field {
    order: 110;
    flex: 1 1 30%;  /* Postcode is small & city comes next to it */
    margin-right: 10px;
  }
  #billing_city_field {
    order: 120;
    flex: 1 1 65%;
  }


/* Make the bottom part of the checkout form with the nickname consistent with the rest */

  /* 1) Make the parent div a flex container that wraps items */
#wc4bp_checkout_field_group_1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center; 
    gap: 1rem; /* optional horizontal spacing */
  }
  
  /* 2) Ensure the H4 is full-width and on its own line */
  #wc4bp_checkout_field_group_1 > h4 {
    order: 1;          /* appear first in the order */
    flex: 0 0 100%;    /* take the entire row (new line) */
    margin: 0 0 1rem;  /* add bottom space if you want */
  }
  
  /* 3) The <p class="form-row validate-required"> that holds "Pseudonyme (requis)" */
  #wc4bp_checkout_field_group_1 .form-row.validate-required {
    order: 10;          /* after the H4 */
    display: inline-flex;
    align-items: center;
    margin: 0;          /* remove default <p> margin */
  }
  
  /* 4) The input (#field_3) on the same line, to the right of the legend */
  #wc4bp_checkout_field_group_1 #field_3 {
    order: 20;
  }
  
  /* 5) The description (#field_3-3) is full-width, new line, italic */
  #wc4bp_checkout_field_group_1 .description#field_3-3 {
    order: 30;
    flex: 0 0 100%;
    font-style: italic;
    margin: 0.5rem 0; 
  }
  
  /* 6) Hide the literal "(requis)" but keep the rest of the legend text */
  #wc4bp_checkout_field_group_1 .bp-required-field-label {
    display: none !important;
  }
  
  /* 7) Append a red asterisk after #field_3-1 (the legend) */
  #wc4bp_checkout_field_group_1 #field_3-1::after {
    content: ' *';
    color: red;
    margin-left: 0.25rem;
  }


/*Hide the SKU on the ORDER CONFIRMATION page */
.woocommerce-order-received span.bb_sku_wrapper {
    display: none !important;
}

/* Hide the billing details at the bottom of ORDER CONFIRMATION page (strange format and incomplete) */
.woocommerce-order-received section.woocommerce-customer-details {
    display: none;
}

/* Hide some strange message at the bottom of the ORDER CONFIRMATION page */
.woocommerce-order-received .woocommerce-order>h2.woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-order>table.woocommerce-table.shop_table.order_details {
    display: none;
}

/* For memberships order confirmation, hide the extra fields on the top that are not useful to show */
.woocommerce-order-received .woocommerce-order .woocommerce-order-over+p {
    display: none;
}


/* On order confirmation, make the account name normal text color and smaller than h3 */ 
section.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name {
    color: var(--bb-body-text-color);
    font-size: 120%;
}

/*  On order confirmation, hide the ":" at the end of the account name by putting a white box over it */
section.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name:after {
    content: ""; 
    display: inline-block; 	
    position: relative; 	
    right: 5px; 	
    top: 4px; 	
    background-color: white; 	
    width: 10px; 	
    height: 1em;
}
/* Put the banking details on the center just like the titles above on the order confirmation page */
.wc-bacs-bank-details.order_details.bacs_details {
    width: fit-content; /* or a set width, if needed */
    margin: 20px auto 80px;
}

/* Make product table nicer with options in there */

/* When we have options in the cart, we need to make the column of price 15% not 35% */
.woocommerce-checkout .bb-wc-co table.shop_table td.product-name:has(.variation) {
    width: 85%;
}
.woocommerce-checkout .bb-wc-co table.shop_table td.product-total:has(.variation) {
    width: 15%;
}
 
/* When we have options in the cart, we need to collapse that text below the product on bigger screens */
@media (max-width: 640px) or ((min-width: 993px) and (max-width: 1100px)){
    .woocommerce-checkout .bb-wc-co table.shop_table td.product-name:has(.variation) .bs-product-check {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/****************************************************************************
 * BUDDYPRESS Styling
 **************************************************************************/

/* Add the lock for private forums in the list of forums
  (the class "my-private-forum" added by JS in functions.php) */
a.bbp-forum-title.my-private-forum:before {
    content: "\eecd";
    font-family: "bb-icons", sans-serif;
    font-weight: 400;
    color: var(--bb-body-text-color);
    margin-right: 4px; /* Add spacing between the icon and the text */
}


/* Hide the counter on the order tab and the course tab of the profile menu*/
li#orders-personal-li span.count,
li#courses-personal-li span.count {
    display: none;
}

/* Make Group readable in "What's New" making a publication */
#whats-new-form #bp-activity-privacy-point span.bp-activity-privacy-status {
    font-weight: 600;
    color: var(--bb-alternate-text-color);
}

/* Make the activity "More options" menu wider to show French text fully */
.bb-activity-more-options.bb_more_dropdown.is_visible.open {
    min-width: 240px;
}
/* Make the back to admin menu wider to show French text fully in user profile */
.bb_more_options_list.bb_more_dropdown.is_visible.open {
    min-width: 240px;
}

/****************************************************************************
 * Gravity Form customization
 **************************************************************************/

 /* Reset and apply basic field style */
 .gform_wrapper form input:not([type=radio],[type=checkbox],[type=submit],[type=button],[type=image],[type=file]),
 .gform_wrapper form textarea,
 .gform-theme--foundation .gfield select.large
 {
    border-color: #E0E4E9 !important;
    border-width: 0px 0px 2px 0px !important;
    border-radius: 0px 0px 0px 0px !important;
    background-color: var(--bb-body-background-color) !important;
    box-shadow: none !important;
    font-size: 18px !important;
    color: #364B67 !important;
 }

 .gform-theme--foundation .gfield select.large {
    padding-top: 0px !important;
}

.gform_wrapper form textarea {
    min-block-size: 3rem !important;
    height: 20px !important;
}

/* Force global Header style for titles - TO BE DELETED */
/*.entry-title, .gform_title {
    font-family: "Parkinsans" !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 34px !important;
}*/

.gform_title {
    font-size: 28px !important;
}


/****************************************************************************
 * Unify form fields with Footer newsletter subscription
 **************************************************************************/

/* Input field on product page */
.wpo-options-container input {
    display: inline-block !important;
    font-family: inherit !important;
    font-style: inherit !important;
    font-size: 15px !important;
    height: 41px !important;
    outline: 0 !important;
    vertical-align: middle !important;
    background-color: var(--bb-content-background-color) !important;
    border: 1px solid var(--bb-content-border-color) !important;
    border-radius: var(--bb-input-radius) !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    color: var(--bb-body-text-color) !important;
}

.wpo-options-container input:focus {
    outline: 0 !important;
    background-color: var(--bb-content-background-color) !important;
    box-shadow: var(--bb-input-focus-shadow) !important;
    border-color: var(--bb-input-focus-border-color) !important;
}