/*
 * JR My Groups Redesign v1.0.10
 * Presentation only. Shared shell/title geometry follows the confirmed
 * Invited Memories Redesign v1.0.5 dimensional master.
 */

/* -------------------------------------------------------------------------
   Remove the legacy Kadence page-title hero on My Groups only.
   The replacement title card lives inside the shared content shell.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active .entry-hero.page-hero-section,
body.jr-my-groups-redesign-active .entry-hero-container-inner.page-hero-container-inner {
    display: none !important;
}

/* -------------------------------------------------------------------------
   CONFIRMED MASTER: container hierarchy.
   Important: #primary and .content-container keep Kadence's native width.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active #primary.content-area,
body.jr-my-groups-redesign-active .content-container.site-container {
    box-sizing: border-box !important;
}

body.jr-my-groups-redesign-active #main.site-main {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.jr-my-groups-redesign-active #main.site-main > .content-wrap,
body.jr-my-groups-redesign-active #main.site-main .content-wrap > article,
body.jr-my-groups-redesign-active article.single-entry,
body.jr-my-groups-redesign-active .entry-content-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

body.jr-my-groups-redesign-active article.single-entry {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.jr-my-groups-redesign-active .entry-content-wrap {
    margin: 76px auto 92px !important;
    padding: 40px 32px 46px !important;
    background:
        linear-gradient(rgba(255,253,249,.968), rgba(255,253,249,.968)),
        repeating-linear-gradient(
            0deg,
            rgba(112,83,56,.018) 0,
            rgba(112,83,56,.018) 1px,
            transparent 1px,
            transparent 4px
        ) !important;
    border: 1px solid rgba(221,208,190,.76) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 48px rgba(55,39,24,.10) !important;
}

body.jr-my-groups-redesign-active .entry-content.single-content,
body.jr-my-groups-redesign-active .jr-my-groups-redesign {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.jr-my-groups-redesign-active .jr-my-groups-redesign,
body.jr-my-groups-redesign-active .jr-my-groups-redesign__content {
    min-width: 0;
}

/* Neutralise common Kadence/BuddyPress inner-shell width restrictions only;
   no styling is applied to the My Groups directory itself. */
body.jr-my-groups-redesign-active .entry-content.single-content > .wp-block-group,
body.jr-my-groups-redesign-active .entry-content.single-content > .wp-block-group > .wp-block-group__inner-container,
body.jr-my-groups-redesign-active .entry-content.single-content > .kt-inside-inner-col,
body.jr-my-groups-redesign-active .entry-content.single-content > #buddypress {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* -------------------------------------------------------------------------
   CONFIRMED MASTER: title/header card.
   No independent desktop max-width; it fills the shared usable content area.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active .jr-my-groups-hero {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0 0 22px;
    padding: 46px 28px 34px;
    text-align: center;
    background: var(--jr-card, #fffdfa);
    border: 1px solid rgba(118,90,65,.15);
    border-radius: var(--jr-radius-card, 24px);
    box-shadow: 0 9px 24px rgba(58,42,30,.055);
}

body.jr-my-groups-redesign-active .jr-my-groups-hero__title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(42px, 4.4vw, 58px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    color: var(--jr-heading, #513b2f) !important;
    text-align: center !important;
}

body.jr-my-groups-redesign-active .jr-my-groups-hero__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: min(250px, 56%);
    margin: 22px auto 18px;
    color: rgba(201,125,83,.68);
}

body.jr-my-groups-redesign-active .jr-my-groups-hero__divider::before,
body.jr-my-groups-redesign-active .jr-my-groups-hero__divider::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
}

body.jr-my-groups-redesign-active .jr-my-groups-hero__divider > span {
    display: block;
    flex: 0 0 auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px);
}

body.jr-my-groups-redesign-active .jr-my-groups-hero__subtitle {
    box-sizing: border-box;
    width: min(720px, 100%);
    max-width: none;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #67615c !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

/* Preserve page-specific content exactly as supplied by the existing My
   Groups plugins. This wrapper only prevents an accidental inherited margin. */
body.jr-my-groups-redesign-active .jr-my-groups-redesign__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
   Tablet: same structural principle, reduced shell gutters only.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body.jr-my-groups-redesign-active #main.site-main {
        width: calc(100% - 32px) !important;
    }

    body.jr-my-groups-redesign-active .entry-content-wrap {
        margin: 48px auto 64px !important;
        padding: 30px 22px 36px !important;
        border-radius: 20px !important;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero {
        margin-bottom: 20px;
        padding: 40px 24px 31px;
        border-radius: 21px;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero__title {
        font-size: clamp(40px, 6vw, 52px) !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile: maintain the hierarchy without horizontal overflow.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.jr-my-groups-redesign-active #main.site-main {
        width: calc(100% - 20px) !important;
    }

    body.jr-my-groups-redesign-active .entry-content-wrap {
        margin: 26px auto 44px !important;
        padding: 16px 12px 24px !important;
        border-radius: 16px !important;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero {
        margin-bottom: 18px;
        padding: 30px 16px 24px;
        border-radius: 18px;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero__title {
        font-size: clamp(34px, 11vw, 42px) !important;
        line-height: 1.08 !important;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero__divider {
        gap: 11px;
        width: min(210px, 70%);
        margin: 18px auto 15px;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero__divider > span {
        font-size: 24px;
    }

    body.jr-my-groups-redesign-active .jr-my-groups-hero__subtitle {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    body.jr-my-groups-redesign-active .entry-content.single-content,
    body.jr-my-groups-redesign-active .jr-my-groups-redesign,
    body.jr-my-groups-redesign-active .jr-my-groups-redesign__content {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.3 — control polish.
   Use the actual live My Groups selectors confirmed in DevTools so these
   presentation tweaks cannot be lost beneath the older directory styles.
   No dimensions, positioning, labels or click behaviour are changed.
   ------------------------------------------------------------------------- */

/* Primary CTA: gold treatment matched to the site's existing Send button. */
body.jr-my-groups-redesign-active #my-groups-directory .mgd-create-group > a.button.create-group-btn.jr-mg-refine-create {
    background: #c49c5d !important;
    background-image: linear-gradient(180deg, #d0ad6d 0%, #c49c5d 56%, #b98d4f 100%) !important;
    border: 1px solid #b78b4a !important;
    color: #fffdfa !important;
    -webkit-text-fill-color: #fffdfa !important;
    box-shadow: 0 7px 16px rgba(126, 89, 43, .14) !important;
    text-shadow: none !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-create-group > a.button.create-group-btn.jr-mg-refine-create:hover,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-create-group > a.button.create-group-btn.jr-mg-refine-create:focus-visible {
    background: #ba904f !important;
    background-image: linear-gradient(180deg, #c7a25f 0%, #ba904f 58%, #ad8144 100%) !important;
    border-color: #a97c3e !important;
    color: #fffdfa !important;
    -webkit-text-fill-color: #fffdfa !important;
}

/* The original leading cross can render as a coloured glyph/emoji. The JS
   swaps only that decorative glyph for this plain text + span. */
body.jr-my-groups-redesign-active #my-groups-directory .jr-mg-create-plus {
    display: inline-block;
    margin-right: .48em;
    color: #fffdfa !important;
    -webkit-text-fill-color: #fffdfa !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.18em;
    font-weight: 400;
    line-height: 1;
    vertical-align: -.03em;
    text-shadow: none !important;
}

/* Selected directory state: deliberately match the primary CTA. */
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.active.jr-mg-refine-tab-active,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn[aria-selected="true"].jr-mg-refine-tab-active {
    background: #c87452 !important;
    background-image: none !important;
    border-color: #c87452 !important;
    color: #fffdfa !important;
    -webkit-text-fill-color: #fffdfa !important;
    text-shadow: none !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.active.jr-mg-refine-tab-active:hover,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.active.jr-mg-refine-tab-active:focus-visible {
    background: #b96646 !important;
    border-color: #b96646 !important;
}

/* Secondary action: visibly warm, but still subordinate to Create Group. */
body.jr-my-groups-redesign-active #my-groups-directory #jr-mgd-load-more-wrap > #jr-mgd-load-more-btn.jr-mg-refine-load-more {
    background: #fffdfa !important;
    background-image: none !important;
    border: 1px solid rgba(201, 125, 83, .52) !important;
    color: #81573f !important;
    -webkit-text-fill-color: #81573f !important;
    box-shadow: 0 5px 14px rgba(74, 50, 30, .055) !important;
    text-shadow: none !important;
}

body.jr-my-groups-redesign-active #my-groups-directory #jr-mgd-load-more-wrap > #jr-mgd-load-more-btn.jr-mg-refine-load-more:hover,
body.jr-my-groups-redesign-active #my-groups-directory #jr-mgd-load-more-wrap > #jr-mgd-load-more-btn.jr-mg-refine-load-more:focus-visible {
    background: #fff8ef !important;
    border-color: rgba(201, 125, 83, .74) !important;
    color: #6f4934 !important;
    -webkit-text-fill-color: #6f4934 !important;
}


/* -------------------------------------------------------------------------
   v1.0.4 — requested group-card outline + gold Create Group CTA.
   The JS adds .jr-mg-refine-group-card to each live/dynamically loaded card
   so the border applies consistently across Public, Private and Hidden tabs.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active #my-groups-directory #mgd-groups-list .jr-mg-refine-group-card {
    border: 1px solid rgba(126, 87, 58, .48) !important;
}


/* -------------------------------------------------------------------------
   v1.0.5 — Public / Private / Hidden segmented-control refinement.
   These are still the existing functional directory buttons; only their
   presentation changes. The active option now shares the site's gold CTA
   language while inactive options remain quiet and neutral.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    background: rgba(255, 253, 249, .96) !important;
    border: 1px solid rgba(183, 139, 74, .40) !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 14px rgba(74, 50, 30, .055) !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab {
    box-sizing: border-box !important;
    min-width: 110px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 22px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 1px solid rgba(183, 139, 74, .22) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: #414858 !important;
    -webkit-text-fill-color: #414858 !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    text-shadow: none !important;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab:first-child {
    border-left-color: transparent !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab:hover:not(.jr-mg-refine-tab-active),
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab:focus-visible:not(.jr-mg-refine-tab-active) {
    background: #fbf4e8 !important;
    color: #6f5539 !important;
    -webkit-text-fill-color: #6f5539 !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.active.jr-mg-refine-tab-active,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn[aria-selected="true"].jr-mg-refine-tab-active,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab-active {
    position: relative !important;
    z-index: 1 !important;
    background: #c49c5d !important;
    background-image: linear-gradient(180deg, #d0ad6d 0%, #c49c5d 56%, #b98d4f 100%) !important;
    border-left-color: transparent !important;
    color: #fffdfa !important;
    -webkit-text-fill-color: #fffdfa !important;
    box-shadow: 0 4px 10px rgba(126, 89, 43, .16) !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab-active + .mgd-filter-btn.jr-mg-refine-tab {
    border-left-color: transparent !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.active.jr-mg-refine-tab-active:hover,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.active.jr-mg-refine-tab-active:focus-visible,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab-active:hover,
body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab-active:focus-visible {
    background: #ba904f !important;
    background-image: linear-gradient(180deg, #c7a25f 0%, #ba904f 58%, #ad8144 100%) !important;
    color: #fffdfa !important;
    -webkit-text-fill-color: #fffdfa !important;
}

@media (max-width: 767px) {
    body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters {
        width: 100% !important;
    }

    body.jr-my-groups-redesign-active #my-groups-directory .mgd-filters .mgd-filter-btn.jr-mg-refine-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 9px 10px !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.7 — mobile outer-shell alignment.
   Keep the existing My Groups design intact, but remove the redundant
   Kadence/global backing layers that create the visible extra edge on one
   side. The redesigned .entry-content-wrap remains the single paper shell.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    body.jr-my-groups-redesign-active #primary.content-area,
    body.jr-my-groups-redesign-active .content-container.site-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.jr-my-groups-redesign-active #main.site-main {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 18px !important;
    }

    body.jr-my-groups-redesign-active #main.site-main > .content-wrap,
    body.jr-my-groups-redesign-active #main.site-main > .content-wrap > article,
    body.jr-my-groups-redesign-active #main.site-main .content-wrap > article,
    body.jr-my-groups-redesign-active article.single-entry,
    body.jr-my-groups-redesign-active article.entry {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    body.jr-my-groups-redesign-active #main.site-main > .content-wrap::before,
    body.jr-my-groups-redesign-active #main.site-main > .content-wrap::after,
    body.jr-my-groups-redesign-active article.single-entry::before,
    body.jr-my-groups-redesign-active article.single-entry::after {
        content: none !important;
        display: none !important;
    }

    body.jr-my-groups-redesign-active .entry-content-wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 26px 0 44px !important;
        padding: 16px 12px 24px !important;
        border-radius: 16px !important;
        overflow: visible !important;
    }

    body.jr-my-groups-redesign-active .entry-content.single-content,
    body.jr-my-groups-redesign-active .jr-my-groups-redesign,
    body.jr-my-groups-redesign-active .jr-my-groups-redesign__content,
    body.jr-my-groups-redesign-active #my-groups-directory {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.8 — My Groups Totals mobile floating-box compatibility.
   The totals widget is supplied by the existing My Groups functionality.
   On mobile it should begin as a compact icon and expand only when requested.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.jr-my-groups-redesign-active .jr-mg-totals-panel {
        z-index: 100050 !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel:not(.jr-mg-totals-open) {
        display: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open {
        display: block !important;
        position: fixed !important;
        top: 50% !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        width: min(354px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: min(72vh, 620px) !important;
        margin: 0 !important;
        overflow: auto !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle {
        position: fixed !important;
        z-index: 100060 !important;
        right: 16px !important;
        top: 57% !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #a97c3e !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, #d0ad6d 0%, #c49c5d 56%, #b98d4f 100%) !important;
        color: #fffdfa !important;
        box-shadow: 0 8px 20px rgba(74, 50, 30, .18) !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:hover,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:focus-visible {
        background: linear-gradient(180deg, #c7a25f 0%, #ba904f 58%, #ad8144 100%) !important;
        outline: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        pointer-events: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle[aria-expanded="true"] {
        top: calc(14% + 2px) !important;
    }
}

@media (min-width: 768px) {
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle {
        display: none !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.10 — Totals control visibility + stronger mobile presentation.
   - Dark brown floating trigger to better match the site palette.
   - Trigger is only used for Private / Hidden tabs (JS controls existence).
   - Open panel receives a clear cream/brown treatment and dimmed backdrop.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle {
        border: 2px solid #a87429 !important;
        background: #5b4337 !important;
        color: #f3d59a !important;
        box-shadow:
            0 10px 24px rgba(53, 35, 24, .28),
            0 0 0 3px rgba(255, 253, 249, .74) !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:hover,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:focus-visible,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle[aria-expanded="true"] {
        background: #4a342b !important;
        border-color: #c09348 !important;
        color: #ffe6b6 !important;
        outline: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 100040 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(47, 36, 29, .34) !important;
        backdrop-filter: blur(1.5px) !important;
        -webkit-backdrop-filter: blur(1.5px) !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open {
        z-index: 100050 !important;
        padding: 18px 18px 16px !important;
        border: 2px solid #8f672f !important;
        border-radius: 18px !important;
        background: #fffdf8 !important;
        color: #2f2925 !important;
        box-shadow:
            0 24px 55px rgba(39, 27, 19, .34),
            0 4px 14px rgba(39, 27, 19, .16) !important;
        opacity: 1 !important;
        filter: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open h1,
    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open h2,
    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open h3,
    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open h4 {
        color: #5b4337 !important;
        font-weight: 750 !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open::before {
        content: "" !important;
        display: block !important;
        height: 4px !important;
        margin: -18px -18px 14px !important;
        border-radius: 16px 16px 0 0 !important;
        background: linear-gradient(90deg, #5b4337, #a87429, #5b4337) !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.11 — centre the Create a New Group CTA.
   Keeps the existing button size, colours and behaviour; only its horizontal
   alignment is changed so it sits centrally above the group tabs.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active #my-groups-directory .mgd-create-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

body.jr-my-groups-redesign-active #my-groups-directory .mgd-create-group > a.button.create-group-btn.jr-mg-refine-create {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* -------------------------------------------------------------------------
   v1.0.12 — desktop single-shell corner cleanup.
   Remove only redundant Kadence backing surfaces which show an offset curved
   edge behind the page. The existing .entry-content-wrap keeps its 22px
   radius, paper colour, border, shadow and exact dimensions.
   Tablet/mobile and the directory content remain unchanged.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    html body.jr-my-groups-redesign-active #main.site-main > .content-wrap,
    html body.jr-my-groups-redesign-active #main.site-main > .content-wrap > article,
    html body.jr-my-groups-redesign-active #main.site-main .content-wrap > article,
    html body.jr-my-groups-redesign-active #main.site-main article.single-entry,
    html body.jr-my-groups-redesign-active #main.site-main article.entry {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    html body.jr-my-groups-redesign-active #main.site-main > .content-wrap::before,
    html body.jr-my-groups-redesign-active #main.site-main > .content-wrap::after,
    html body.jr-my-groups-redesign-active #main.site-main article.single-entry::before,
    html body.jr-my-groups-redesign-active #main.site-main article.single-entry::after,
    html body.jr-my-groups-redesign-active #main.site-main article.entry::before,
    html body.jr-my-groups-redesign-active #main.site-main article.entry::after {
        content: none !important;
        display: none !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.13 — mobile My Groups Totals floating trigger.
   Match the semi-transparent charcoal/grey circles with warm terracotta
   outlines used on the private-group timeline. The closed button is centred
   vertically in the viewport for consistency across pages. Open-panel
   placement, behaviour and the desktop/tablet interface are untouched.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle {
        background: rgba(91, 93, 96, 0.75) !important;
        border: 3px solid #cb7855 !important;
        color: #ffffff !important;
        box-shadow: 0 7px 17px rgba(32, 30, 29, 0.20) !important;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:not([aria-expanded="true"]) {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:hover,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:focus-visible,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle[aria-expanded="true"] {
        background: rgba(76, 79, 82, 0.86) !important;
        border-color: #d18460 !important;
        color: #ffffff !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.14 — Mobile totals modal polish.
   Keep the site at normal brightness when the panel opens; retain the
   backdrop only as a transparent click-outside target. The trigger stays
   at the same 50%-of-viewport position and keeps its closed-state styling.
   Centre the totals panel in both axes, with a safe viewport width.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.jr-my-groups-redesign-active .jr-mg-totals-backdrop {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-toggle,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle[aria-expanded="true"],
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:hover,
    body.jr-my-groups-redesign-active .jr-mg-totals-toggle:focus-visible {
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(91, 93, 96, 0.75) !important;
        border: 3px solid #cb7855 !important;
        color: #fff !important;
        box-shadow: 0 7px 17px rgba(32, 30, 29, 0.20) !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: min(354px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 48px) !important;
        overflow: auto !important;
        box-sizing: border-box !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-panel .jr-mg-totals-heading {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* -------------------------------------------------------------------------
   v1.0.15 — mobile totals pop-out clearance + light background blur.
   Centre the panel vertically but position it within the space to the left
   of the always-visible 52px floating control (right:16px). A 10px gap
   remains at common mobile widths, without clipping the control or panel.
   Backdrop exists only while totals are open and remains very light.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.jr-my-groups-redesign-active .jr-mg-totals-panel.jr-mg-totals-open {
        top: 50% !important;
        left: calc(50% - 24px) !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(312px, calc(100vw - 108px)) !important;
        max-width: calc(100vw - 108px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.jr-my-groups-redesign-active .jr-mg-totals-backdrop {
        background: rgba(255, 251, 246, .06) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        backdrop-filter: blur(2px) !important;
    }
}

/* -------------------------------------------------------------------------
   v1.0.17 — Group-card link colour, corrected selector.
   The directory's group names are not consistently h2/h3, nor given the
   class names assumed by v1.0.16. Target actual GROUP LINKS within the
   directory and the existing JS-marked name links instead, without relying
   on a guessed heading hierarchy or extra parent nesting. Applies to all
   Public / Private / Hidden results, including AJAX-updated cards.
   ------------------------------------------------------------------------- */
body.jr-my-groups-redesign-active #mgd-groups-list a.jr-mg-gold-group-title,
body.jr-my-groups-redesign-active #mgd-groups-list a.jr-mg-gold-group-title *,
body.jr-my-groups-redesign-active #mgd-groups-list a[href*="/groups/"]:not(.button):not([class*="btn"]),
body.jr-my-groups-redesign-active #mgd-groups-list a[href*="/groups/"]:not(.button):not([class*="btn"]) *,
body.jr-my-groups-redesign-active #mgd-groups-list .jr-mg-refine-group-card [class*="group-title"],
body.jr-my-groups-redesign-active #mgd-groups-list .jr-mg-refine-group-card [class*="group-name"],
body.jr-my-groups-redesign-active #mgd-groups-list .jr-mg-refine-group-card [class*="card-title"] {
    color: #a78043 !important;
    -webkit-text-fill-color: #a78043 !important;
}

body.jr-my-groups-redesign-active #mgd-groups-list a.jr-mg-gold-group-title:hover,
body.jr-my-groups-redesign-active #mgd-groups-list a[href*="/groups/"]:not(.button):not([class*="btn"]):hover {
    color: #8e692f !important;
    -webkit-text-fill-color: #8e692f !important;
}