/* Premium Access purchase/redemption popup (gx-premium-access.php,
   premium-creators-membership-implementation-plan.md §5/§9 Phase 4).
   Hidden by default; js/gx-premium-access.js toggles .is-open. */
.gx-premium-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.gx-premium-popup.is-open {
    display: block;
}
body.gx-premium-popup-open {
    overflow: hidden;
}
.gx-premium-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 13, 30, 0.6);
}
.gx-premium-popup__dialog {
    position: relative;
    z-index: 1;
    max-width: 880px;
    width: calc(100% - 32px);
    margin: 4vh auto;
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 20px 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}
/* Thin decorative gradient bar along the dialog's own top edge. */
.gx-premium-popup__accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, #7a4ecc 0%, #a855c9 50%, #ec4899 100%);
}
.gx-premium-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #4b5563!important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.gx-premium-popup__title {
    font-size: 26px;
    font-weight: 800;
    margin: 4px 0 12px;
    color: #111827;
    text-align: center;
}
.gx-premium-popup__subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0 auto 28px;
    text-align: center;
    max-width: 480px;
    line-height: 1.6;
}
.gx-premium-popup__subtitle strong {
    color: #4b5563;
}

.gx-premium-popup__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 620px) {
    .gx-premium-popup__options {
        grid-template-columns: 1fr;
    }
}

.gx-premium-popup__option {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
}
.gx-premium-popup__option--pay {
    border: 2px solid var(--gx-primary-contrast, #7a4ecc);
}

.gx-premium-popup__option-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.gx-premium-popup__option-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gx-premium-popup__option-icon svg {
    width: 20px;
    height: 20px;
}
.gx-premium-popup__option-icon--pay {
    background: #efeaf9;
    color: var(--gx-primary-contrast, #7a4ecc);
}
.gx-premium-popup__option-icon--redeem {
    background: #fdf1e0;
    color: #e0a02c;
}
.gx-premium-popup__option-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}
.gx-premium-popup__option-sub {
    display: block;
    font-size: 12px;
    color: #9ca3af;
}

.gx-premium-popup__option-price {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}
.gx-premium-popup__option-period {
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
}
.gx-premium-popup__option-note {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 16px;
    line-height: 1.4;
}

.gx-premium-popup__checklist {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gx-premium-popup__checklist li {
    display: flex;
    /* flex-start (not center, the previous value) — center vertically
       centers the icon against the WHOLE wrapped text block, so on a
       2-line item it floated between both lines instead of sitting next
       to either one (reported 2026-09-24, screenshot). An explicit
       line-height is what actually makes flex-start look right here —
       without one, the text's inherited/ambient line-height left uneven
       gaps between wrapped lines. */
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #374151;
}
.gx-premium-popup__checklist-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    /* Nudges the icon down to sit level with the first line's text
       (cap-height), not its own top edge — the difference between the
       18px icon and this ~19px line-height (13px * 1.45) is small but
       visible without it. */
    margin-top: 1px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gx-premium-popup__checklist-icon svg {
    width: 11px;
    height: 11px;
}

/* Karma balance progress box */
.gx-premium-popup__balance-box {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 18px;
}
.gx-premium-popup__balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}
.gx-premium-popup__balance-row span:last-child {
    color: #1f2937;
}
.gx-premium-popup__balance-track {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    margin: 8px 0;
    overflow: hidden;
}
.gx-premium-popup__balance-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 999px;
}
.gx-premium-popup__balance-row--footer {
    font-weight: 500;
}
.gx-premium-popup__balance-row--footer span:first-child {
    color: #9ca3af;
}
.gx-premium-popup__balance-ok {
    color: #16a34a !important;
    font-weight: 600 !important;
}
.gx-premium-popup__disclosure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #6b7280;
    margin: auto 0 16px;
    padding-top: 12px;
    cursor: pointer;
}
/* Custom checkbox matching this site's own established pattern (see
   .gx-pcl-interests-grid__option input[type="checkbox"] in
   gx-profile-checklist.css) instead of the plain browser default —
   requested 2026-09-24, on a screenshot of the plain unstyled checkbox.
   Sized down a little (16px vs that component's 20px) to sit correctly
   inline with this disclosure's small 11px text. */
.gx-premium-popup__disclosure input {
    /* flex/min-width (not just width/height alone) — this label is a flex
       container and the checkbox a native replaced form control; some
       browsers keep using the native widget's own intrinsic size for it
       despite appearance:none and an explicit width/height unless the
       sizing instead comes from the flex layout itself. */
    flex: 0 0 16px;
    min-width: 16px;
    min-height: 16px !important;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px !important;
    margin: 1px 0 0;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gx-premium-popup__disclosure input:hover:not(:disabled) {
    border-color: var(--gx-primary-contrast, #7a4ecc);
}
.gx-premium-popup__disclosure input:checked {
    background-color: var(--gx-primary-contrast, #7a4ecc);
    border-color: var(--gx-primary-contrast, #7a4ecc);
}
.gx-premium-popup__disclosure input:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.gx-premium-popup__disclosure input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 78, 204, 0.2);
}
.gx-premium-popup__disclosure input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Matches this site's standard primary-button convention (.xchange-apply-btn
   and friends, xchange-campaigns-list.css) — solid brand color, not a
   gradient, with the same invert-on-hover behavior — instead of a bespoke
   style just for this popup. */
.gx-premium-popup__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--gx-primary-contrast, #7a4ecc);
    border-radius: var(--gx-radius-md, 8px);
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: var(--gx-primary-contrast, #7a4ecc);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: normal;
}
.gx-premium-popup__cta-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.gx-premium-popup__cta:hover {
    background: #ffffff;
    color: var(--gx-primary-contrast, #7a4ecc);
}
.gx-premium-popup__cta.is-disabled,
.gx-premium-popup__cta:disabled {
    background: #e5e7eb;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}
.gx-premium-popup__cta.is-disabled .gx-premium-popup__cta-icon,
.gx-premium-popup__cta:disabled .gx-premium-popup__cta-icon {
    color: #9ca3af;
}

.gx-premium-popup__status {
    margin: 20px 0 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    min-height: 1em;
}
.gx-premium-popup__status.is-success {
    color: #15803d;
}
.gx-premium-popup__status.is-error {
    color: #b91c1c;
}

/* Phase 6 — Access tab (gx-premium-access.php §6/§9): "Request Refund"
   button and the dismissible expiry banner.

   This button is echoed into MemberPress ReadyLaunch's per-row actions
   dropdown (.mepr-tooltip-content, the "..." menu on the Access tab's
   Subscriptions table — see mepr_account_subscriptions_actions in
   readylaunch/account/subscriptions.php). That menu's own CSS
   (memberpress/css/readylaunch/account.css) only styles plain-text menu
   items, not a filled/rounded CTA — a bare <button> falls back to the
   site's default solid-purple pill button styling instead, which looked
   out of place next to the other menu rows (reported 2026-09-23). Reset it
   explicitly to a full-width, left-aligned, plain destructive menu item
   matching that dropdown's own convention. */
.mepr-tooltip-content .gx-request-refund-btn,
.gx-request-refund-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #dc2626;
    text-align: left;
    padding: 0.25rem 1.5rem;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.mepr-tooltip-content .gx-request-refund-btn:hover,
.gx-request-refund-btn:hover {
    background: #fef2f2;
    color: #b91c1c;
}
.gx-request-refund-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.gx-request-refund-submitted {
    display: block;
    padding: 0.25rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
}

.gx-premium-expiry-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 13px;
    color: #92400e;
}
.gx-premium-expiry-banner__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #92400e;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* Premium Access History panel (Access tab, both standalone and BuddyBoss
   "Membership" screens). */
.gx-premium-history {
    margin: 0 0 24px;
}
.gx-premium-history__title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 10px;
}
.gx-premium-history__table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.gx-premium-history__table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
    background: #f9fafb;
    padding: 10px 14px;
}
.gx-premium-history__table td {
    font-size: 13px;
    color: #374151;
    padding: 10px 14px;
    border-top: 1px solid #f3f4f6;
}
.gx-premium-history__status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.gx-premium-history__status--complete,
.gx-premium-history__status--active {
    background: #dcfce7;
    color: #15803d;
}
.gx-premium-history__status--refunded {
    background: #fee2e2;
    color: #b91c1c;
}
.gx-premium-history__status--expired {
    background: #f3f4f6;
    color: #6b7280;
}
.gx-premium-history__status--denied {
    background: #fee2e2;
    color: #b91c1c;
}
.gx-premium-history__status--pending-review {
    background: #fef3c7;
    color: #92400e;
}
/* Matches the exact card style the Access/Payments tabs' own empty
   states already use (body.gx-membership-page .mp-wrapper.mp-no-subs /
   .mepr-no-active-subscriptions in the theme's gx-profile.css) — this
   tab's empty state used a different, dashed-border box instead
   (reported 2026-09-24, screenshot). Same CSS custom properties, so any
   future theme update to that card style is picked up here too. */
.gx-premium-history__empty {
    font-size: 14px;
    color: var(--gx-text-muted, #64748b);
    background: var(--gx-card-bg, #ffffff);
    border: 1px solid var(--gx-card-border, #e2e8f0);
    border-radius: var(--gx-card-radius, 12px);
    box-shadow: var(--gx-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04));
    padding: 40px 20px;
    text-align: center;
}
.gx-request-refund-btn {
    font-size: 13px!important;
    padding: 9px 24px;
    font-weight: 600!important;
}

/* ================================================================
   "12-Month Premium Access" checkout page (/register/12-month-premium-
   access/) — theme-matching redesign, added 2026-09-23 on request.
   Scoped entirely to body.gx-premium-checkout
   (gx_add_premium_checkout_body_class()) so none of this leaks onto any
   other memberpressproduct's checkout page, which reuses these exact same
   MemberPress ReadyLaunch classes (.mepr-checkout-container, .form-wrapper,
   etc.) sitewide.
   ================================================================ */

/* REAL BUG, fixed 2026-09-25, on request ("use same header and buddy
   side panel as for other pages have"): these 2 pages never rendered
   the theme's real header/sidebar at all — see
   gx_render_theme_chrome_on_premium_pages() (gx-premium-access.php) for
   the full root-cause writeup (MemberPress's own template_include
   override bypasses the theme's header.php entirely). That function now
   injects the real ones. The rules immediately below are what's left
   from the OLD workaround, now obsolete/actively wrong once the real
   chrome exists:
   - The old #page .site-header recolor rule (dark navy, white text)
     was approximating the theme's real header look on MemberPress's OWN
     separate header bar — no longer needed (and would now visually
     clash, showing twice) now that the real one renders; that bar is
     hidden below instead.
   - The old "margin-left: 0" override existed because there was no
     sidebar to reserve space for. Inverted below: the real sidebar
     needs that space now. */
body.gx-premium-checkout #page .site-header {
    display: none;
}
/* The theme's own base rule that reserves the sidebar's gutter,
   `.buddypanel-open:not(.register) .site { margin-left: 285px; }`
   (min-width:800px), explicitly excludes `.register` — meaning it
   already applies correctly on the Thank You page (no 'register' body
   class), but never on the checkout page, whose /register/{slug}/ URL
   does carry that class (that exclusion is meant for an actual
   BuddyPress registration page, which has no sidebar — collateral
   damage for MemberPress's differently-meant checkout URL). Re-declared
   unconditionally here for both pages: a no-op on the Thank You page
   (already true), the actual fix on the checkout page.

   Targets .gx-injected-header-page (the small wrapper
   gx_render_theme_chrome_on_premium_pages() puts just the injected
   header in), NOT the shared ".site" class — giving that div the real
   ".site" class too (so it could reuse the theme's own selector
   directly) was tried first and reproduced a real bug: the theme's base
   CSS gives ".site" a full-viewport min-height (the normal single
   "#page.site" wrapper holds header+content+footer together, sized to
   fill the screen) — applied to a second, header-only ".site" div, it
   left a blank 100vh gap above the real checkout content, which sits in
   MemberPress's OWN separate "#page.site.app-layout" further down the
   DOM. Kept as two visually-stacked-but-separate divs (buddypanel is
   position:fixed, so DOM order between them doesn't matter for
   correct rendering) but off the sizing side-effect. */
@media screen and (min-width: 800px) {
    /* REAL BUG, fixed 2026-09-25, reported live ("not able to toggle
       hamburge menu also page design weired for checkout data"):
       collapsing the sidebar (its default/non-"buddypanel-open" state,
       icon-only at 68px) is EXACTLY what the toggle correctly does —
       confirmed via a real click test that it was already working —
       but the checkout page's own content never reserved room for even
       that collapsed 68px, because the SAME ":not(.register)" collision
       hits a third rule: the theme's own default-state gutter,
       `.bb-buddypanel:not(.register) .site { margin-left: 68px; }`
       (theme.css) — confirmed via direct DOM measurement (900px width:
       .site's margin-left was really computing to 0px, not 68px) that
       this is why toggling the sidebar closed looked "broken": the
       content didn't shift back left to reclaim the freed space, and at
       some widths the still-visible 68px collapsed sidebar sat directly
       on top of (behind) the unshifted checkout content instead of
       beside it. The .buddypanel-open rule below (expanded, 285px) was
       already fixed; this is its default-state (68px) counterpart. */
    body.gx-premium-checkout:not(.buddypanel-open) .site,
    body.gx-premium-checkout:not(.buddypanel-open) .gx-injected-header-page {
        margin-left: 68px !important;
    }
    body.gx-premium-checkout.buddypanel-open .site,
    body.gx-premium-checkout.buddypanel-open .gx-injected-header-page {
        margin-left: 285px !important;
    }
    /* Same ":not(.register)" collision, same fix, for the sidebar's own
       expanded width (its collapsed default is 68px — confirmed via
       CSS.getMatchedStylesForNode this is exactly what was rendering
       before this rule: a correctly-styled but still icon-only-width
       sidebar, with its own logo graphic — sized for the full 285px
       state — overflowing past its 68px-wide box into the page). */
    body.gx-premium-checkout.buddypanel-open .buddypanel {
        width: 285px !important;
    }
}
/* REAL BUG, fixed 2026-09-25: MemberPress's own CSS hides any leftover
   theme sidebar/widget area on its "Pro" (ReadyLaunch) templates —
   `body.mepr-pro-template > aside { display: none !important; }`
   (mp-pro-theme-css) — a sensible generic rule for a real theme sidebar
   widget, but it also matches our newly-injected buddypanel (a direct
   child of body, same as any other), outranking gx-sidebar.css's own
   `.buddypanel { display: flex !important }` by specificity (their
   selector has 2 type selectors, ours has 0) — confirmed directly via
   Chrome DevTools Protocol's CSS.getMatchedStylesForNode, not guessed.
   Overridden with a selector specific enough to beat it (2 type + 2
   class selectors vs. their 2 type + 1 class). */
body.gx-premium-checkout > aside.buddypanel {
    display: flex !important;
}
/* REAL BUG, fixed 2026-09-25, reported live with a screenshot ("scanner
   and toggle button display right side" — on a real page's mobile
   header, the logo sits left and the resize-icon+hamburger sit at the
   FAR RIGHT; on the checkout/Thank You pages they were all crammed
   together on the left instead). Root-caused via
   CSS.getMatchedStylesForNode, not guessed: MemberPress's own base CSS
   has a plain, generic `.site-header { display: flex; background-color:
   #06429E; ...; justify-content: space-between; ... }` rule (their own
   header design, unrelated to the theme) — the injected header
   (gx_render_theme_chrome_on_premium_pages(), reusing the class name
   "site-header" so it also matches the theme's OWN ".site-header"
   styling) matches this MemberPress rule too. Its background gets
   overridden elsewhere already (confirmed still white, not their blue),
   but nothing was overriding `display`, so `#masthead` stayed
   MemberPress's flex row instead of the real theme's plain
   `display:block` (confirmed directly on a real page). That mattered
   specifically for the mobile header markup this same block injects
   (template-parts/header-mobile.php's own `.bb-mobile-header-wrapper`)
   — as a flex ITEM inside a flex #masthead, it shrank to its own
   content's width instead of the full-width block box it is on a real
   page, which is exactly why its own children (logo left, resize icon
   + hamburger right) never had room to spread out and instead bunched
   together on the left. */
body.gx-premium-checkout .gx-injected-header-page #masthead {
    display: block !important;
}
/* Fixed 2026-09-25, reported live with a screenshot of the mobile
   slide-in nav panel ("open menu screen have scroll and right side
   space") — confirmed via direct measurement this is a real, if very
   minor (~3-8px), site-wide quirk that exists identically on a real
   page too, not something specific to this checkout/Thank You
   injection: the panel's own scrollable content
   (.bb-mobile-panel-inner) is a few pixels taller than its wrapper
   (.bb-mobile-panel-wrapper), triggering a vertical scrollbar whose
   track visibly eats into the content width on the right edge (classic
   non-overlay scrollbars, as headless Chrome/most Linux and Windows
   browsers render by default). Rather than chase the exact few-pixel
   source (which could easily shift as menu items are added/removed —
   not a fixed, predictable number to design around), hides the
   scrollbar's own visual track while leaving actual scrolling (mouse
   wheel/touch) completely functional — the standard, low-risk pattern
   for exactly this kind of cosmetic sliver. Scoped to this page only,
   per this file's own established convention, even though the same
   fix would likely help every other page too — that's a separate,
   sitewide conversation. */
body.gx-premium-checkout .bb-mobile-panel-wrapper,
body.gx-premium-checkout .bb-mobile-panel-inner {
    scrollbar-width: none !important;
}
body.gx-premium-checkout .bb-mobile-panel-wrapper::-webkit-scrollbar,
body.gx-premium-checkout .bb-mobile-panel-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}
/* REAL BUG, fixed 2026-09-25, reported live a second time with another
   screenshot ("when i scroll its display like this right side empty
   white bar") even after the scrollbar-hiding fix directly above —
   found the actual root cause this time via direct measurement of
   BOTH the panel's outer wrapper and its inner content: the theme's
   own base CSS (theme.css) gives `.bb-mobile-panel-inner` (the padded,
   scrollable content div) a real dark background, but never gives
   `.bb-mobile-panel-wrapper` (the OUTER fixed-position box actually
   controlling the panel's scrolling) any background of its own at all
   — it renders plain white. Confirmed this is a real, if normally
   barely-visible, sitewide gap even on a real page (measured a real
   5px shortfall between the inner content's width and the wrapper's)
   — the previous fix closed that specific gap for these 2 pages by
   removing the scrollbar that caused it, but the underlying white
   wrapper was always still there underneath, an unrelated latent risk:
   ANY future mismatch between the inner content's rendered size and
   the wrapper's — a real touch-scroll's momentum/rubber-band
   overscroll on an actual phone being the likely real-world trigger
   here, not something this headless-Chrome environment can reproduce
   — reveals that plain white through the gap regardless of the
   scrollbar fix. Fixing the actual cause instead of the specific
   symptom: giving the wrapper itself the same dark background as its
   child means there is no color left to ever show through, no matter
   what causes the mismatch. */
body.gx-premium-checkout .bb-mobile-panel-wrapper {
    background-color: #0f172a !important;
}

/* Page background + the checkout container as a single rounded card,
   matching the popup's own surface language (.gx-premium-popup__dialog). */
body.gx-premium-checkout {
    background: #f9fafb !important;
}
/* REAL BUG, fixed 2026-09-25: the FIRST attempt at widening this page
   (raising .mepr-checkout-container's own max-width, below) had no
   visible effect at all — confirmed directly why via
   CSS.getMatchedStylesForNode: MemberPress's own vendor CSS
   (readylaunch/checkout.css) separately caps the <form> element that's
   this container's own PARENT — `.mepr-signup-form, .mepr-before-signup-
   form, .mepr-pro-template #primary { max-width: 1000px; margin: 0
   auto; }` — so the container (a normal block box, width:auto) only
   ever had 1000px of parent space to fill regardless of its own
   max-width. Both need raising together for either to actually matter. */
body.gx-premium-checkout .mepr-signup-form,
body.gx-premium-checkout .mepr-before-signup-form {
    max-width: 1300px !important;
}
/* The third selector in that same vendor rule, `.mepr-pro-template
   #primary`, needs its own override too — confirmed via direct
   measurement it's what was ALSO still capping the Thank You page at
   1000px even after the two selectors above were fixed (that page's
   own #primary genuinely computes maxWidth:1000px, vs. "none" on the
   checkout page for the same selector — an inconsistency between the
   two pages this project has hit more than once already with the
   ":not(.register)" collisions above, not fully explained here, but
   directly measured and fixed regardless). */
body.gx-premium-checkout #primary {
    max-width: none !important;
    /* max-width alone didn't move the needle — confirmed via direct
       measurement that #primary was shrink-wrapping to its own
       content's natural (max-content) width, not filling the space its
       now-uncapped max-width allows. That's why the checkout page (two
       real columns worth of content, wide enough on its own to reach
       ~1300px) looked fixed by the max-width change above while the
       Thank You page (one much narrower centered card) didn't move at
       all — shrink-to-fit sizing is driven by content, not by how high
       a ceiling is raised. An explicit width forces it to actually
       fill the space instead. */
    width: 100%;
}
body.gx-premium-checkout .mepr-checkout-container {
    /* REAL BUG, fixed 2026-09-25, reported live with 3 screenshots
       (1440/1024/768px) as cards "touch to screen": at any width below
       the desktop 2-column breakpoint, the two cards' own visible
       borders sat flush against the viewport edges with zero outer
       gutter. Root cause, confirmed by reading the vendor source
       directly: MemberPress's own CSS (readylaunch/checkout.css)
       explicitly zeroes .mepr-signup-form's own side padding below
       1024px — `.mepr-pro-template #primary > .mepr-signup-form {
       padding-left: 0; padding-right: 0; }` — a deliberate choice on
       their part so the FORM element doesn't double up on padding on
       top of .invoice-wrapper/.form-wrapper's own separate internal
       padding, which was invisible before today: those two elements
       had no visible border/background of their own then, so a card
       having zero space from the page edge was never noticeable. Now
       that this same day's "match website theme" redesign gave both a
       real visible white card with a border and shadow, that same
       zero padding is what made the card's own edge visibly touch the
       screen. Fixed with real padding directly on this container
       (works at every width, including the desktop 2-column state,
       where it just insets the two cards slightly from this
       container's own edges — negligible there since the container
       already has plenty of its own outer margin at that width). */
    padding: 0 20px;
    /* Widened from 1000px, reported live with a screenshot ("Side space
       is more and content width is small") — on a real desktop screen
       (now that the sidebar's own real 285px is reserved alongside it,
       on top of this container's own centering margin) capping this at
       1000px left a very large, empty gray gutter on both sides of the
       two cards. This site's own dashboard content area (#content, the
       BuddyBoss theme's real content column) has no max-width of its
       own at all — confirmed by direct measurement, it just fills
       whatever space is left beside the sidebar — but going fully
       edge-to-edge here specifically would stretch the two-card
       checkout layout uncomfortably wide on a large monitor, so this
       keeps a cap, just a much less aggressive one, closer to what the
       rest of this site actually uses. */
    max-width: 1300px;
    margin: 32px auto !important;
    /* No background/box-shadow here (removed 2026-09-23, on request) —
       with them, the card's edges sat flush against the text/inputs
       inside .invoice-wrapper/.form-wrapper (their own padding starts
       only where content begins, not where the rounded card itself
       starts), so headings and the "PAY GAMERSXCHANGE" label looked like
       they were touching the box. Plain content directly on the page's
       own gray background (body.gx-premium-checkout below) avoids that
       without needing to hunt down extra padding to compensate. */
    overflow: hidden;
    /* MemberPress's own base rule sets an unconditional height:100% (on
       top of html/body's own height:100%) — meant for a full-bleed,
       borderless split-screen page. Combined with the min-height:100vh
       override below, that stretched this card to fill the whole
       viewport, leaving a large empty gap below short content (reported
       2026-09-23, screenshot). Overriding back to a content-hugging
       height fixes it. */
    height: auto !important;
}
/* REAL BUG, fixed 2026-09-25, found while checking this page across a
   full responsive sweep (500–1366px) rather than just a couple of
   spot-check widths: MemberPress's own vendor CSS switches this
   container to a real 2-column layout (flex-direction: row-reverse) at
   a hardcoded `@media (min-width: 1024px)` — a threshold sized
   assuming the FULL viewport is available as content width. That's no
   longer true on this page once the real sidebar exists (2026-09-25,
   earlier the same day) — a fixed 285px is reserved for it — so the
   two columns were only ever getting `viewport - 285px` of real room,
   not the ~1024px MemberPress's own breakpoint was designed around.
   Confirmed directly across the sweep: from 1024px through ~1250px,
   both cards' text wrapped awkwardly mid-phrase ("12-Month Premium
   Access – Initial" / "Payment" split across lines, the consent
   checkbox text wrapping to 3 cramped lines) — it only looked
   comfortable again once the viewport reached ~1366px, i.e. roughly
   1024px of ACTUAL content room (1366 - 285 ≈ 1081, close enough given
   this container's own margin/gap overhead). Kept the layout stacked
   (single column, like the page already correctly does below 1024px)
   for this in-between range instead of guessing a single new
   breakpoint number for MemberPress's own rule to use — this page's
   sidebar-eaten width varies with the sidebar's own collapsed/expanded
   state anyway, so being conservative (stacking a bit longer than
   strictly necessary in the sidebar-collapsed case) is the safer
   choice over risking the cramped wrap returning. */
@media screen and (min-width: 1024px) and (max-width: 1309px) {
    body.gx-premium-checkout .mepr-checkout-container {
        flex-direction: column-reverse !important;
    }
}
/* Same full-bleed assumption, this time from the min-width:1024px
   breakpoint specifically (min-height:100vh there) — needs the same
   specificity to win. */
@media (min-width: 1024px) {
    body.gx-premium-checkout .mepr-checkout-container {
        min-height: 0 !important;
        /* The invoice column's own content (price/coupon/total) is much
           shorter than the payment column's — and how MUCH shorter varies
           a lot: barely at all once PayPal Complete Payments' own button/
           card-fields box replaces the classic form for a logged-in
           eligible user, but by a large margin for a logged-out guest's
           full 9-field registration form. The container's default flex
           align-items:stretch was forcing the invoice column to match
           whichever is taller, leaving empty space stranded below "Total"
           that looked like a bug for the small-gap case (reported
           2026-09-23, screenshot) — and centering the invoice content
           within that stretched box (tried next) fixed that case but made
           the large-gap guest case look broken instead, floating the
           whole invoice block awkwardly mid-box. Each column simply
           sizing to its own content and staying top-aligned handles both:
           a small trailing gap reads as normal card padding, and a larger
           one reads as an ordinary asymmetric two-column layout (a common,
           unremarkable pattern) rather than misplaced content. */
        align-items: flex-start !important;
    }
}
/* REAL BUG, fixed 2026-09-25, reported live with a screenshot ("make
   both box full width"): the rule just above sets `align-items:
   flex-start !important` on this same element for a real reason of its
   own (see its comment) — but that's meant for the 2-column layout,
   where it controls CROSS-axis (vertical) alignment between the two
   side-by-side columns. In the 1024–1309px stacked range above,
   flex-direction is column-reverse, so the cross-axis is now
   horizontal (width) — the exact same "flex-start" value that fixed
   vertical alignment in 2-column mode instead shrinks each stacked
   card down to its own content width here, leaving a large empty gap
   beside it instead of a full-width card. Placed AFTER that rule
   (same selector, same !important, so source order decides) to win
   specifically in this narrower range and restore the default stretch
   — the 2-column mode's own flex-start above is untouched outside it. */
@media screen and (min-width: 320px) and (max-width: 1309px) {
    body.gx-premium-checkout .mepr-checkout-container {
        align-items: stretch !important;
    }
    /* REAL BUG, fixed 2026-09-25, reported live with a screenshot
       showing the invoice card still narrow (the form/payment card
       correctly full-width) — `align-items: stretch` above wasn't
       enough on its own: confirmed via direct measurement that
       MemberPress's own vendor CSS (readylaunch/checkout.css) sets an
       EXPLICIT `.invoice-wrapper { width: 50% }` at this same
       min-width:1024px breakpoint (sized for the 2-column layout,
       where each column should take half) — an explicit width always
       wins over align-items:stretch (stretch only fills an item whose
       own cross-axis size is auto). `.form-wrapper` has no equivalent
       explicit width in that same vendor rule, which is exactly why it
       alone was already stretching correctly. */
    body.gx-premium-checkout .invoice-wrapper {
        width: 100% !important;
    }
}
body.gx-premium-checkout .mepr-rl-footer-widgets {
    max-width: 940px;
    margin: 0 auto;
}

/* REAL redesign, 2026-09-25, on request ("Overall design like website
   theme matching") — reported with a screenshot showing the price
   ("$11.99 for 1 Year") boxed with a border like an editable text
   input, the two consent checkboxes floating bare on the page's own
   gray background below the PayPal box with no visual grouping at all,
   and a large empty gray gap once both columns' short content ran out.
   Root cause: this checkout content never used this site's own
   established card language (--gx-card-bg/--gx-card-border/
   --gx-card-radius/--gx-card-shadow — the same tokens the dashboard's
   own widgets, tiles, and empty-state cards already use, defined in
   gx-layout.css) — it was a mix of MemberPress's own bare default rows
   (the "boxed like an input" price is genuinely MemberPress's own
   `.mepr_bold.mepr_price { background:#fff; border:1px solid
   var(--bb-content-border-color); border-radius:4px }`, confirmed via
   CSS.getMatchedStylesForNode) and one-off ad hoc styling (the payment
   box's own slightly-different border color/no shadow) instead of one
   consistent surface. Restyled below so each column IS one real card
   matching that same token set, exactly like every other card on this
   site — replacing the old column-divider hairline (no longer needed;
   two real cards with a gap between them reads as separated on its
   own) and the old bare/input-boxed content inside each. */

body.gx-premium-checkout .mepr-checkout-container {
        gap: 24px;
    }
body.gx-premium-checkout .invoice-wrapper {
    background: var(--gx-card-bg, #ffffff);
    border: 1px solid var(--gx-card-border, #e2e8f0);
    border-radius: var(--gx-card-radius, 12px);
    box-shadow: var(--gx-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04));
    /* Overrides MemberPress's own unconditional 2px dark border-bottom
       (readylaunch/checkout.css) — this card already has its own full
       border on every side. */
    border-bottom: 1px solid var(--gx-card-border, #e2e8f0) !important;
    padding: 28px !important;
}
@media (min-width: 1024px) {
    body.gx-premium-checkout .invoice-wrapper {
        /* Overrides MemberPress's own "padding-left:0 !important" (that
           rule existed so the invoice column's content lined up flush
           against the old shared divider hairline — this column is now
           its own standalone card and needs padding on every side like
           one). */
        padding-left: 28px !important;
    }
}
body.gx-premium-checkout .mepr-checkout-container .form-wrapper {
    background: var(--gx-card-bg, #ffffff);
    border: 1px solid var(--gx-card-border, #e2e8f0);
    border-radius: var(--gx-card-radius, 12px);
    box-shadow: var(--gx-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04));
}

/* Invoice side */
body.gx-premium-checkout .invoice-wrapper .invoice-heading {
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
}
/* The price row's own MemberPress-default boxed/bordered look (see the
   redesign comment above) — removed so it reads as plain bold text
   inside this card, not a second, input-like box nested inside it. */
body.gx-premium-checkout .invoice-wrapper .mp-form-row.mepr_bold.mepr_price {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
body.gx-premium-checkout .invoice-wrapper .invoice-amount {
    color: #111827;
    font-size: 32px;
    font-weight: 800;
}
body.gx-premium-checkout .have-coupon-link {
    color: var(--gx-primary-contrast, #7a4ecc);
    font-weight: 600;
}
/* The product-line-item box (.mp_wrapper.mp_invoice) has its own
   MemberPress-default white background + top margin — neutralized here
   so, now that it sits inside this same white card, it reads as one
   continuous card instead of a second white box nested inside the
   first (their shared white background alone wouldn't show a seam, but
   removing it here is more robust than relying on both happening to
   match). */
body.gx-premium-checkout .invoice-wrapper .mp_wrapper.mp_invoice {
    background: transparent !important;
    margin-top: 20px;
}
body.gx-premium-checkout .invoice-wrapper .mp-cart-item-image img {
    border-radius: 10px;
}
body.gx-premium-checkout .invoice-wrapper table .total_cell {
    color: var(--gx-primary-contrast, #7a4ecc);
    font-weight: 700;
}
body.gx-premium-checkout .invoice-wrapper svg {
    color: var(--gx-primary-contrast, #7a4ecc);
}

/* Form side */
body.gx-premium-checkout .mepr-checkout-container .form-wrapper {
    /* Base MemberPress padding (3rem top / 4rem bottom = 112px combined)
       was sized for a taller classic form (address fields, a visible
       submit button + loading spinner + error text below it) — most of
       that collapses away once PayPal Complete Payments takes over this
       whole area with just its own button/card-fields box, so that much
       padding just inflates this column (and, since both columns share
       height, the whole card) well past what its actual content needs —
       the root cause of the empty-card look reported 2026-09-23.
       Trimmed to close that gap without removing the padding outright. */
    padding-top: 28px;
    padding-bottom: 28px;
    /* Overrides MemberPress's own "padding-right:0" (min-width:1024px —
       that rule existed for the same old shared-divider layout the
       redesign comment above replaces) — this column is now its own
       standalone card and needs padding on every side like one. */
    padding-left: 28px !important;
    padding-right: 28px !important;
}
/* The PayPal payment-method box's own ad hoc border/radius (added
   2026-09-23, before this card-based redesign existed) — removed so it
   no longer reads as a second card nested inside this new outer one;
   a bottom rule is enough to separate it from the consent checkboxes
   below it, matching how a card's own internal sections are usually
   divided elsewhere on this site rather than nested boxes. */
body.gx-premium-checkout .mepr-payment-methods-wrapper {
    border: 0;
    border-radius: 0;
    padding: 0 0 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gx-card-border, #e2e8f0);
}
body.gx-premium-checkout .form-wrapper .mp-form-row input[type="text"],
body.gx-premium-checkout .form-wrapper .mp-form-row input[type="email"],
body.gx-premium-checkout .form-wrapper .mp-form-row input[type="url"],
body.gx-premium-checkout .form-wrapper .mp-form-row input[type="tel"],
body.gx-premium-checkout .form-wrapper .mepr-coupon-code {
    border-radius: var(--gx-radius-md, 8px);
}
body.gx-premium-checkout .form-wrapper .mp-form-row input:focus-visible,
body.gx-premium-checkout .form-wrapper .mp-form-row input:focus {
    border-color: var(--gx-primary-contrast, #7a4ecc) !important;
    box-shadow: 0 0 0 2px rgba(122, 78, 204, 0.15) !important;
    outline: none;
}
body.gx-premium-checkout [type="checkbox"],
body.gx-premium-checkout [type="radio"] {
    accent-color: var(--gx-primary-contrast, #7a4ecc);
}
body.gx-premium-checkout .mp-form-row.mepr_tos a,
body.gx-premium-checkout .mp-form-row a:not(.have-coupon-link) {
    color: var(--gx-primary-contrast, #7a4ecc);
}
/* MemberPress's own "Terms of Service" and "Privacy Policy" consent
   checkboxes (mepr_agree_to_tos / mepr_agree_to_privacy_policy — native
   fields, not built by this plugin) — restyled on request to match this
   same site's established small-print disclosure checkbox design
   (.gx-premium-popup__disclosure, the popup's own consent checkboxes):
   small muted-gray text with a custom purple checkmark box, instead of
   MemberPress's own plain full-size (16px) black label text and a bare
   accent-color-tinted native checkbox. Targeted by each field's real id
   (no distinguishing class exists on either row to hook into instead).
   appearance:none here doesn't fight the earlier accent-color rule
   above — accent-color has no effect once a checkbox's native rendering
   is replaced via appearance:none, it just becomes an inert, harmless
   declaration for these two checkboxes specifically.

   REAL BUG, fixed 2026-09-25: the privacy-policy row's label content is
   not just a single <a> like the popup's own disclosure checkbox — it's
   raw text + <a>Privacy Policy</a> + a trailing "." — so making the
   <label> itself display:flex turned each of those into its own
   anonymous flex item (flex items don't reflow into each other's line
   the way normal inline text does), splitting "Privacy" from "Policy."
   onto their own line instead of wrapping as one paragraph. Fixed by
   absolutely-positioning the checkbox in the label's top-left corner
   instead, so everything else stays normal inline text that wraps as
   one continuous paragraph (keeping "Privacy Policy." together, since
   there's no space before the period in the source markup). */
body.gx-premium-checkout label[for="mepr_agree_to_tos1"],
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"] {
    display: block !important;
    position: relative;
    padding-left: 24px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}
body.gx-premium-checkout label[for="mepr_agree_to_tos1"] input,
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"] input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px !important;
    margin: 0;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute !important;
    left: 0;
    top: 1px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.gx-premium-checkout label[for="mepr_agree_to_tos1"] input:hover:not(:disabled),
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"] input:hover:not(:disabled) {
    border-color: var(--gx-primary-contrast, #7a4ecc);
}
body.gx-premium-checkout label[for="mepr_agree_to_tos1"] input:checked,
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"] input:checked {
    background-color: var(--gx-primary-contrast, #7a4ecc);
    border-color: var(--gx-primary-contrast, #7a4ecc);
}
body.gx-premium-checkout label[for="mepr_agree_to_tos1"] input:checked::after,
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"] input:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body.gx-premium-checkout label[for="mepr_agree_to_tos1"] input:focus-visible,
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"] input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 78, 204, 0.2);
}
/* REAL BUG, fixed 2026-09-25, reported with a screenshot ("There are
   invalid this fields its display as attach image"): MemberPress's own
   generic required-field error style (vendor file
   memberpress/css/ui/theme.css: ".mepr-form label.mepr-checkbox-field
   .invalid { border: 2px solid red !important; background-color:
   #ff6666 !important; }") adds a class of "invalid" to these two
   labels (memberpress/js/validate.js, on submit / blur, for any
   required .mepr-form-input left blank/unchecked) and wraps the WHOLE
   row — including all its text — in a solid red box with a pink fill.
   That's a generic style built for MemberPress's own plain full-size
   checkbox row; here it visually clashes with this smaller redesigned
   checkbox. Overridden below with the same !important (this selector's
   extra "body" + real "label" type selectors already give it higher
   specificity than the vendor rule's, so it reliably wins regardless of
   file order): the row itself stays visually unchanged, only the
   checkbox square gets a red border, matching how form errors are
   indicated elsewhere on this site (an accent on the control itself,
   not a full-block background). No change needed on the "valid"/click
   behavior itself — confirmed checking the box still correctly removes
   MemberPress's own "invalid" class (JS untouched), which reverts this
   back to the normal purple-on-checked state immediately. */
body.gx-premium-checkout label[for="mepr_agree_to_tos1"].invalid,
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"].invalid {
    border: 0 !important;
    background-color: transparent !important;
}
body.gx-premium-checkout label[for="mepr_agree_to_tos1"].invalid input,
body.gx-premium-checkout label[for="mepr_agree_to_privacy_policy1"].invalid input {
    border-color: #ef4444 !important;
    background-color: #ffffff !important;
}
.mepr-checkout-container .form-wrapper .mepr_spacer {
    margin-top: 0!important;
    line-height: 0!important;
}
.mepr-signup-form, .mepr-before-signup-form, .mepr-pro-template #primary {
    margin-top: 15px!important;
}
.mepr-signup-form .mepr_error {
    border-radius: 8px;
}
.mepr-signup-form .mepr_error ul {
    font-size: 14px;
}
.have-coupon-link {
    display: none!important;
}
.mepr-checkout-container .invoice-wrapper .mepr_price {
    margin-bottom: 0!important;
}
.mepr-checkout-container .invoice-wrapper p, .mp_wrapper .mepr-form-has-errors, .mp_wrapper .cc-error, .mp_wrapper .mepr-validation-error {
    font-size: 14px!important;
    line-height: normal!important;
}
body.gx-premium-checkout .mepr-checkout-container .form-wrapper input[type="submit"],
body.gx-premium-checkout .mepr-submit {
    background: var(--gx-primary-contrast, #7a4ecc) !important;
    border: 1px solid var(--gx-primary-contrast, #7a4ecc) !important;
    border-radius: var(--gx-radius-md, 8px) !important;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease;
}
body.gx-premium-checkout .mepr-checkout-container .form-wrapper input[type="submit"]:hover,
body.gx-premium-checkout .mepr-submit:hover {
    background: #ffffff !important;
    color: var(--gx-primary-contrast, #7a4ecc) !important;
}

/* Thank-you confirmation screen — same template, reached after a
   successful purchase (also the plain WordPress "Thank You" page itself —
   see gx_is_premium_thankyou_page() — which reuses this identical markup,
   just without a .form-wrapper sibling). */
body.gx-premium-checkout .invoice-wrapper.thankyou .mepr-button {
    background: var(--gx-primary-contrast, #7a4ecc) !important;
    border-radius: var(--gx-radius-md, 8px);
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mepr-button:hover {
    background: #ffffff !important;
    color: var(--gx-primary-contrast, #7a4ecc) !important;
}
/* REAL BUG, fixed 2026-09-25, same report as the checkout page's own
   width fix above: on the Thank You page specifically, this container
   has no .form-wrapper sibling (its own MemberPress template reuses
   the same 2-column markup, just without the payment-form half — see
   gx_is_premium_thankyou_page()'s docblock) — with only one flex child
   and nothing forcing it to fill the row, the flex CONTAINER itself
   shrank to that one child's own natural content width (measured:
   ~480px) rather than filling the 1300px its own max-width now allows,
   so raising that max-width alone (unlike on the checkout page, where
   two columns share the row) had no visible effect here. Forcing a
   real width makes it actually claim that space; the card inside it
   then gets its own explicit width below instead of also shrinking to
   its own content. */
body.gx-premium-checkout .mepr-checkout-container.thankyou {
    width: 100%;
}
/* REAL BUG, fixed 2026-09-25, found during a full responsive/design
   audit of the Thank You page: this rule is old, undocumented, and had
   no ".thankyou" scoping — it correctly hides the redundant "$11.99 for
   1 Year" line on the checkout page's own product row (the price is
   already shown once, prominently, above in the invoice heading — this
   was genuinely a repeat there) but that exact same selector ALSO
   matches the Thank You page's identical markup, where
   gx-premium-access.js specifically repurposes this element's text to
   show the real resolved expiry date ("Expires September 23, 2027" —
   confirmed via direct DOM inspection the JS was correctly setting that
   text; the element was just `display:none`d out from under it
   regardless of its content). Scoped with :not(.thankyou) so the
   checkout page's own behavior is completely unchanged. */
.mepr-checkout-container .invoice-wrapper:not(.thankyou) .mp-cart-item-details .desc {
    display: none!important;
}
body.gx-premium-checkout .invoice-wrapper.thankyou {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    /* A real max-width, not full-bleed — a payment confirmation card
       stays comfortable to read at a fixed width on a large monitor
       (the same convention this site's own popup dialog and other
       modals already use, .gx-premium-popup__dialog), it just doesn't
       need to be as narrow as the ~480px it was shrinking to before
       the width:100% fix above. */
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Narrow screens: the base MemberPress template's own left/right padding
   (3rem/48px each side, never overridden) stacked with this card's own
   32px left/right padding was leaving only ~158px of actual width for the
   icon+title+price row on a real ~320px-wide phone — confirmed with a
   same-width iframe harness (headless Chrome's --window-size has a hard
   500px floor in this environment, so a plain resize can't actually
   reproduce narrow-phone widths for testing) — which is what was causing
   the title to wrap into 3-4 near-useless-width lines with the price
   floating oddly beside the first one (reported 2026-09-23, screenshot).
   Trimming both paddings here frees up real room instead. */
@media screen and (max-width: 480px) {
    body.gx-premium-checkout .invoice-wrapper.thankyou {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    body.gx-premium-checkout .invoice-wrapper.thankyou .mp_wrapper.mp_invoice {
        padding-left: 16px;
        padding-right: 16px;
    }
}
body.gx-premium-checkout .invoice-wrapper.thankyou h1 {
    color: #111827;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
/* Filled soft-purple circle behind the checkmark instead of a bare
   outline — modernized 2026-09-23, on request. */
body.gx-premium-checkout .invoice-wrapper.thankyou svg.thankyou {
    width: 22px !important;
    height: 22px !important;
    padding: 11px;
    margin-bottom: 10px;
    /* Green (not brand purple) — matches the reference design and this
       site's own existing "success" color convention elsewhere (the
       Access tab's "Active" badge, "Payment Successful" text). */
    color: #16a34a;
    background: #dcfce7;
    border-radius: 999px;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.06);
    box-sizing: content-box;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mepr-order-no {
    margin: 2px 0 12px;
}
/* No standalone styling for .mepr-order-no p:first-child — the JS
   (gx-premium-access.js) adds .gx-thankyou-badge to that same <p>, and its
   rule below (a single class, lower specificity than a class+pseudo-class
   selector here would have been) needs to be the one that wins, since it's
   the actual current design. */
body.gx-premium-checkout .invoice-wrapper.thankyou .mepr-order-no p {
    font-size: 13px;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .invoice-amount {
    font-size: 34px;
}
/* Order summary as its own light card, separated from the page background
   — modernized 2026-09-23, on request ("give modern look"). Scoped to the
   thank-you state specifically; the checkout form's own invoice column
   stays as plain rows (removed on request in an earlier pass — see the
   .mepr-checkout-container comment above). */
body.gx-premium-checkout .invoice-wrapper.thankyou .mp_wrapper.mp_invoice {
    max-width: 100%;
    margin: 28px auto 0;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 13, 30, 0.05);
    text-align: left;
}
/* The "Terms: $11.99 for 1 Year" line above this (.mp_price_str) is
   already hidden by MemberPress's own base CSS, but the blank &nbsp; div
   that used to sit below it (.mp-spacer) isn't — nothing hides it just
   because its neighbor is hidden, so it was still adding an empty line of
   space above the product row (reported 2026-09-24). */
body.gx-premium-checkout .invoice-wrapper.thankyou .mp_wrapper.mp_invoice .mp-spacer {
    display: none;
}
/* The "Back to home" link (.mepr-thank-you-page's own variant — a plain
   <a>, not MemberPress's .mepr-button) styled as a real CTA button instead
   of small inline text, matching this site's standard button convention
   (.gx-premium-popup__cta and friends) rather than leaving the page's one
   remaining action easy to miss. */
body.gx-premium-checkout .mepr-back-to-home {
    display: block;
    margin-top: 28px;
}
body.gx-premium-checkout .mepr-back-to-home a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gx-primary-contrast, #7a4ecc);
    border-radius: var(--gx-radius-md, 8px);
    padding: 11px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important;
    background: var(--gx-primary-contrast, #7a4ecc);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
body.gx-premium-checkout .mepr-back-to-home a:hover {
    background: #ffffff;
    color: var(--gx-primary-contrast, #7a4ecc) !important;
}

/* Thank You page redesign, continued (2026-09-23, design reference) — the
   new elements gx-premium-access.js builds/marks up above. Plain
   background (the dotted pattern from the initial pass was removed on
   request the same day) — background-color alone here, so it doesn't
   fight the background-image longhand this same selector already sets
   near the top of this file (body.gx-premium-checkout { background:
   #f9fafb !important; }). */
body.gx-premium-checkout {
    background-image: none !important;
}
body.gx-premium-checkout .gx-thankyou-badge {
    display: inline-block;
    background: #dcfce7;
    color: #15803d !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0 0 16px;
}
body.gx-premium-checkout .gx-thankyou-subtitle {
    color: #6b7280;
    font-size: 13px;
    margin: 0 0 18px;
}
/* The product row's icon — a plain lightning-bolt CSS icon in a soft
   purple rounded box, replacing MemberPress's own small raster icon
   (hidden below), matching the reference. */
body.gx-premium-checkout .invoice-wrapper.thankyou .gx-thankyou-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(122, 78, 204, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4ecc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    flex-shrink: 0;
    margin-right: 10px;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .gx-thankyou-icon img {
    display: none;
}
/* Mobile layout bug fix (2026-09-23, reported with a screenshot): with no
   explicit width, a flex child sizes to its own shrink-to-fit content
   width by default, not the space actually available before its
   siblings — so this title text was wrapping to its narrowest possible
   width ("12-Month" / "Premium" / "Access" each on their own line) well
   before it needed to, with the price left floating oddly beside the
   first line instead of clearly at the row's right edge. flex:1 lets it
   actually claim the row's remaining space (up to the icon and price);
   min-width:0 is required alongside it — flex items default to
   min-width:auto, which still refuses to shrink for wrapping otherwise. */
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-cart-item {
    align-items: flex-start;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-cart-item-details {
    flex: 1 1 auto;
    min-width: 0;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-cart-item-details p:first-child {
    color: #111827;
    font-weight: 700;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-cart-item-details .desc {
    color: #9ca3af;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-currency-cell {
    color: #111827;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 12px;
    white-space: nowrap;
}
/* New "Order Reference" row, inserted between the product line and Total. */
body.gx-premium-checkout .gx-thankyou-order-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 14px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
}
body.gx-premium-checkout .gx-thankyou-order-ref__label {
    color: #9ca3af;
    font-size: 13px;
}
body.gx-premium-checkout .gx-thankyou-order-ref__value {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    color: #374151;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 6px;
    word-break: break-all;
}
/* Narrow screens: the order reference value is long and monospace — stack
   it under the label instead of squeezing both onto one row, where it
   overflowed the card (reported 2026-09-23, screenshot). */
@media screen and (max-width: 480px) {
    body.gx-premium-checkout .gx-thankyou-order-ref {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    body.gx-premium-checkout .invoice-wrapper.thankyou .gx-thankyou-icon {
        width: 35px;
        height: 35px;
    }
    body.gx-premium-checkout .mepr-checkout-container .form-wrapper, body.gx-premium-checkout .invoice-wrapper {
        padding: 15px!important;
    }
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-cart-footer {
    border-top: none;
    margin: 0;
    padding-top: 0;
}
body.gx-premium-checkout .invoice-wrapper.thankyou .mp-cart-footer div.bt:not(.mp-currency-cell) {
    color: #111827;
    font-weight: 700;
}

/* Access/Payments row-actions dropdown clipped by its own table wrapper —
   see js/gx-premium-access.js for the full root-cause writeup. The
   wrapper's own overflow-x:auto (needed for small-screen horizontal
   scroll) is suspended only while a dropdown is actually open. */
.table-responsive.gx-table-actions-open {
    overflow: visible !important;
}