/*
  RedGuides: XenForo-like aMember theme ("Option 1" shell theme)

  Goal:
  - Make aMember pages look/feel like XenForo (RG4 style) without bootstrapping XF PHP.
  - Keep aMember markup intact; restyle via CSS + light layout chrome.

  Notes:
  - We intentionally use XF-ish token names so future copy/paste from XF CSS is easier.
  - This theme is still pure CSS; no iframe; no XenForo JS is required.
*/

/* =========================
   Design tokens (RG4)
   ========================= */

:root {
  color-scheme: light;

  /* RG4 palette (from XenForo style export) */
  --xf-paletteAccent1: #FFEBEE;
  --xf-paletteAccent2: #F44336;
  --xf-paletteAccent3: #C62828;

  --xf-paletteColor1: #E1F5FE;
  --xf-paletteColor2: #B3E5FC;
  --xf-paletteColor3: #81D4FA;
  --xf-paletteColor4: #0277BD;
  --xf-paletteColor5: #01579B;

  /* Base surfaces */
  --xf-pageBg: #f5f7f9;
  --xf-contentBg: #ffffff;
  --xf-contentAltBg: #f8fafc;

  /* Text */
  --xf-textColor: #111827;
  --xf-textColorMuted: #6b7280;

  /* Links / primary */
  --xf-linkColor: var(--xf-paletteColor4);
  --xf-linkHoverColor: var(--xf-paletteColor5);

  /* Borders / radii / shadows */
  --xf-borderColor: rgba(0, 0, 0, 0.12);
  --xf-borderColorLight: rgba(0, 0, 0, 0.08);
  --xf-borderColorHeavy: rgba(0, 0, 0, 0.20);
  --xf-borderRadiusSmall: 4px;
  --xf-borderRadiusMedium: 8px;
  --xf-borderRadiusLarge: 12px;
  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --xf-shadow2: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* Typography */
  --xf-fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --xf-fontSizeNormal: 16px;
  --xf-fontSizeSmall: 13px;
  --xf-fontSizeSmaller: 12px;
  --xf-fontSizeLarge: 18px;
  --xf-fontSizeLarger: 20px;
  --xf-lineHeight: 1.5;

  /* Block headers/footers (roughly aligned to XenForo's defaults) */
  --xf-majorHeadingBg: var(--xf-paletteColor2);
  --xf-majorHeadingTextColor: #0c2331;
  --xf-blockFooterBg: var(--xf-contentAltBg);
  --xf-blockFooterTextColor: var(--xf-textColorMuted);

  /* Focus ring */
  --xf-focusRing: 0 0 0 3px rgba(2, 119, 189, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* RG4 alternate palette */
    --xf-paletteAccent1: #f0a8a8;
    --xf-paletteAccent2: #c32222;
    --xf-paletteAccent3: #4e0e0e;

    --xf-paletteColor1: #85bde0;
    --xf-paletteColor2: #479cd1;
    --xf-paletteColor3: #276e9b;
    --xf-paletteColor4: #16405a;
    --xf-paletteColor5: #0c2331;

    --xf-pageBg: #0b1220;
    --xf-contentBg: #0f172a;
    --xf-contentAltBg: #111c34;

    --xf-textColor: #e5e7eb;
    --xf-textColorMuted: #9ca3af;

    /* In dark mode, use the lighter "primary" colors for links */
    --xf-linkColor: var(--xf-paletteColor1);
    --xf-linkHoverColor: var(--xf-paletteColor2);

    --xf-borderColor: rgba(255, 255, 255, 0.12);
    --xf-borderColorLight: rgba(255, 255, 255, 0.08);
    --xf-borderColorHeavy: rgba(255, 255, 255, 0.18);

    --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --xf-shadow2: 0 18px 50px rgba(0, 0, 0, 0.35);

    --xf-majorHeadingBg: rgba(255, 255, 255, 0.05);
    --xf-majorHeadingTextColor: var(--xf-textColor);

    --xf-focusRing: 0 0 0 3px rgba(133, 189, 224, 0.25);
  }
}

/* Optional override: force scheme based on XenForo cookies/localStorage (set by layout.phtml script) */
:root[data-rg-color-scheme="light"] {
  color-scheme: light;

  --xf-paletteAccent1: #FFEBEE;
  --xf-paletteAccent2: #F44336;
  --xf-paletteAccent3: #C62828;

  --xf-paletteColor1: #E1F5FE;
  --xf-paletteColor2: #B3E5FC;
  --xf-paletteColor3: #81D4FA;
  --xf-paletteColor4: #0277BD;
  --xf-paletteColor5: #01579B;

  --xf-pageBg: #f5f7f9;
  --xf-contentBg: #ffffff;
  --xf-contentAltBg: #f8fafc;

  --xf-textColor: #111827;
  --xf-textColorMuted: #6b7280;

  --xf-linkColor: var(--xf-paletteColor4);
  --xf-linkHoverColor: var(--xf-paletteColor5);

  --xf-borderColor: rgba(0, 0, 0, 0.12);
  --xf-borderColorLight: rgba(0, 0, 0, 0.08);
  --xf-borderColorHeavy: rgba(0, 0, 0, 0.20);

  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --xf-shadow2: 0 10px 30px rgba(0, 0, 0, 0.10);

  --xf-majorHeadingBg: var(--xf-paletteColor2);
  --xf-majorHeadingTextColor: #0c2331;
  --xf-blockFooterBg: var(--xf-contentAltBg);
  --xf-blockFooterTextColor: var(--xf-textColorMuted);

  --xf-focusRing: 0 0 0 3px rgba(2, 119, 189, 0.25);
}

:root[data-rg-color-scheme="dark"] {
  color-scheme: dark;

  --xf-paletteAccent1: #f0a8a8;
  --xf-paletteAccent2: #c32222;
  --xf-paletteAccent3: #4e0e0e;

  --xf-paletteColor1: #85bde0;
  --xf-paletteColor2: #479cd1;
  --xf-paletteColor3: #276e9b;
  --xf-paletteColor4: #16405a;
  --xf-paletteColor5: #0c2331;

  --xf-pageBg: #0b1220;
  --xf-contentBg: #0f172a;
  --xf-contentAltBg: #111c34;

  --xf-textColor: #e5e7eb;
  --xf-textColorMuted: #9ca3af;

  --xf-linkColor: var(--xf-paletteColor1);
  --xf-linkHoverColor: var(--xf-paletteColor2);

  --xf-borderColor: rgba(255, 255, 255, 0.12);
  --xf-borderColorLight: rgba(255, 255, 255, 0.08);
  --xf-borderColorHeavy: rgba(255, 255, 255, 0.18);

  --xf-shadow1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --xf-shadow2: 0 18px 50px rgba(0, 0, 0, 0.35);

  --xf-majorHeadingBg: rgba(255, 255, 255, 0.05);
  --xf-majorHeadingTextColor: var(--xf-textColor);

  --xf-focusRing: 0 0 0 3px rgba(133, 189, 224, 0.25);
}

/* =========================
   Base elements
   ========================= */

html, body {
  background: var(--xf-pageBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell {
  margin: 0;
  font-family: var(--xf-fontFamily);
  font-size: var(--xf-fontSizeNormal);
  line-height: var(--xf-lineHeight);
}

body.rg-xf-shell a {
  color: var(--xf-linkColor);
  text-decoration: none;
}

body.rg-xf-shell a:hover {
  color: var(--xf-linkHoverColor);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--xf-linkHoverColor), transparent 55%);
}

body.rg-xf-shell :focus-visible {
  outline: none;
  box-shadow: var(--xf-focusRing);
}

/* =========================
   XenForo-like chrome (header/nav/body/footer)
   ========================= */

.rg-xfPageWrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rg-xfHeader {
  background: var(--xf-contentBg);
  border-bottom: 1px solid var(--xf-borderColor);
}

.rg-xfHeader-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
}

.rg-xfHeader-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.rg-xfHeaderAccount {
  display: flex;
  align-items: center;
}

.rg-xfHeaderAccount .rg-xfNavgroup {
  justify-content: flex-end;
}

.rg-xfHeaderAccount .rg-xfNavgroup-link {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .rg-xfHeaderAccount {
    width: 100%;
    justify-content: flex-end;
  }
}

.rg-xfHeaderAccount .rg-xfNavgroup-account {
  font-weight: 700;
}

.rg-xfHeader-logo img {
  max-height: 90px;
  max-width: 215px;
  height: auto;
  width: auto;
  display: block;
}

.rg-xfLogo--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .rg-xfLogo--light { display: none; }
  .rg-xfLogo--dark { display: block; }
}

:root[data-rg-color-scheme="dark"] .rg-xfLogo--light {
  display: none;
}
:root[data-rg-color-scheme="dark"] .rg-xfLogo--dark {
  display: block;
}
:root[data-rg-color-scheme="light"] .rg-xfLogo--light {
  display: block;
}
:root[data-rg-color-scheme="light"] .rg-xfLogo--dark {
  display: none;
}

.rg-xfNavSticky {
  background: var(--xf-contentBg);
  border-bottom: 1px solid var(--xf-borderColor);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.rg-xfNav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rg-xfNav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.rg-xfNavEl {
  display: block;
}

.rg-xfNavLink {
  display: block;
  padding: 9px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  color: var(--xf-textColor);
  border: 1px solid transparent;
  text-decoration: none;
}

.rg-xfNavLink:hover {
  background: var(--xf-paletteColor1);
  border-color: var(--xf-borderColor);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .rg-xfNavLink:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.rg-xfNav-opposite {
  display: flex;
  align-items: center;
}

.rg-xfNavgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rg-xfNavgroup-link {
  display: inline-block;
  padding: 7px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid var(--xf-borderColor);
  background: transparent;
  color: var(--xf-textColor);
  text-decoration: none;
  font-size: var(--xf-fontSizeSmall);
}

.rg-xfNavgroup-link:hover {
  background: var(--xf-contentAltBg);
  text-decoration: none;
}

.rg-xfNavgroup-link.rg-xfNavgroup-primary {
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 25%);
  background: var(--xf-linkColor);
  color: #fff;
}

.rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  background: var(--xf-linkHoverColor);
  border-color: color-mix(in srgb, var(--xf-linkHoverColor), transparent 20%);
  color: #fff;
  text-decoration: none;
}

/* Dark scheme: avoid white-on-light-blue low contrast (Register + primary submit buttons) */
@media (prefers-color-scheme: dark) {
  :root:not([data-rg-color-scheme]) .rg-xfNavgroup-link.rg-xfNavgroup-primary,
  :root:not([data-rg-color-scheme]) .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
    color: var(--xf-pageBg);
  }

  :root:not([data-rg-color-scheme]) body.rg-xf-shell .am-body-content input[type=submit] {
    color: var(--xf-pageBg);
  }
}

:root[data-rg-color-scheme="dark"] .rg-xfNavgroup-link.rg-xfNavgroup-primary,
:root[data-rg-color-scheme="dark"] .rg-xfNavgroup-link.rg-xfNavgroup-primary:hover {
  color: var(--xf-pageBg);
}

:root[data-rg-color-scheme="dark"] body.rg-xf-shell .am-body-content input[type=submit] {
  color: var(--xf-pageBg);
}

.rg-xfBody {
  flex: 1;
}

.rg-xfBody-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 30px;
}

/* Let aMember's content container be the "surface" so we can round it nicely */
.rg-xfBody-pageContent {
  background: transparent;
  border: 0;
  padding: 0;
}

.rg-xfFooter {
  border-top: 1px solid var(--xf-borderColor);
  background: var(--xf-contentBg);
}

.rg-xfFooter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
}

.rg-xfFooter-link {
  color: inherit;
  text-decoration: none;
}

.rg-xfFooter-link:hover {
  text-decoration: underline;
}

.rg-xfFooter-sep {
  margin: 0 8px;
  opacity: 0.7;
}

/* =========================
   aMember -> XenForo component mapping
   ========================= */

/* Content surface */
body.rg-xf-shell .am-body-content {
  min-height: auto;
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  overflow: hidden;
}

body.rg-xf-shell .am-body-content-top {
  padding: 14px 18px 0;
}

body.rg-xf-shell .am-body-content-content {
  padding: 0 18px 18px;
}

/* Breadcrumbs */
body.rg-xf-shell ul.am-breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--xf-fontSizeSmall);
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell ul.am-breadcrumbs .am-breadcrumbs-item,
body.rg-xf-shell ul.am-breadcrumbs .am-breadcrumbs-separator {
  float: none;
  margin: 0;
}

body.rg-xf-shell ul.am-breadcrumbs .am-breadcrumbs-separator {
  opacity: 0.6;
}

body.rg-xf-shell ul.am-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

body.rg-xf-shell ul.am-breadcrumbs a:hover {
  color: var(--xf-textColor);
  text-decoration: underline;
}

/* Page title */
body.rg-xf-shell .am-body-content-top > h1 {
  margin: 0 0 12px 0;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Member toolbar (mobile hamburger / language chooser) */
body.rg-xf-shell .am-account-toolbar {
  margin: 0;
  display: none;
}

@media all and (max-width: 500px) {
  body.rg-xf-shell .am-account-toolbar {
    display: block;
  }

  /* Contain the floated mobile controls (dashboard + hamburger) so they stay inside the toolbar bar */
  body.rg-xf-shell .am-account-toolbar-items {
    display: flow-root;
  }

  /* Make the mobile controls readable in dark mode + match our tokenized UI */
  body.rg-xf-shell .am-tabs-narrow-dashboard,
  body.rg-xf-shell .am-tabs-narrow-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0 8px 0 0;
    border-radius: var(--xf-borderRadiusMedium);
    border: 1px solid var(--xf-borderColor);
    background: var(--xf-contentBg);
    color: var(--xf-textColor);
    text-decoration: none;
  }

  body.rg-xf-shell .am-tabs-narrow-dashboard::before,
  body.rg-xf-shell .am-tabs-narrow-switch::before {
    color: currentColor;
  }

  body.rg-xf-shell .am-tabs-narrow-dashboard:hover,
  body.rg-xf-shell .am-tabs-narrow-switch:hover {
    background: var(--xf-contentAltBg);
  }
}

body.rg-xf-shell .am-account-toolbar-items {
  overflow: visible;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
}

/* If the toolbar is empty (common on desktop), don't render an empty bar. */
body.rg-xf-shell .am-account-toolbar-items:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Avoid duplicate "login/logout" block (we render account links in header nav) */
body.rg-xf-shell .am-user-identity-block {
  display: none;
}

/* Tabs menu (member area) -> XF-ish pill nav */
body.rg-xf-shell .am-tabs-wrapper {
  margin: 0;
}

body.rg-xf-shell ul.am-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px;
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  overflow: visible;
}

body.rg-xf-shell ul.am-tabs > li {
  float: none;
  background: transparent;
}

/* aMember default theme sets a red/orange gradient on the LI on hover/active.
   That bleeds through our rounded A background as "orange corners". Kill it. */
body.rg-xf-shell ul.am-tabs li.active,
body.rg-xf-shell ul.am-tabs li.normal:hover {
  background: transparent;
  background-image: none;
}

/* Dropdown menus under tabs */
body.rg-xf-shell ul.am-tabs .has-children ul {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow2);
  padding: 6px;
  overflow: hidden;
}

body.rg-xf-shell ul.am-tabs .has-children ul a {
  padding: 8px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  color: var(--xf-textColor);
  background: transparent;
}

body.rg-xf-shell ul.am-tabs .has-children ul a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

/* Make the parent item visually "connected" to the open dropdown */
body.rg-xf-shell ul.am-tabs .has-children:hover > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.rg-xf-shell ul.am-tabs a {
  height: auto;
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid transparent;
  color: var(--xf-textColorMuted);
  background: transparent;
  text-decoration: none;
}

body.rg-xf-shell ul.am-tabs li.active > a,
body.rg-xf-shell ul.am-tabs li.normal > a:hover {
  color: var(--xf-textColor);
  background: var(--xf-contentBg);
  border-color: var(--xf-borderColor);
  box-shadow: var(--xf-shadow1);
  text-decoration: none;
}

body.rg-xf-shell ul.am-tabs .menu-item-alert {
  background: var(--xf-paletteAccent1);
  color: var(--xf-paletteAccent3);
  border-radius: 999px;
  padding: 0 6px;
  min-width: auto;
  height: auto;
  line-height: 1.4;
}

/* Keep badge styling stable when base theme tries to recolor it on hover. */
body.rg-xf-shell ul.am-tabs li.active .menu-item-alert,
body.rg-xf-shell ul.am-tabs li.normal:hover .menu-item-alert {
  background: var(--xf-paletteAccent1);
  color: var(--xf-paletteAccent3);
}

@media (prefers-color-scheme: dark) {
  body.rg-xf-shell ul.am-tabs .menu-item-alert {
    background: rgba(255, 255, 255, 0.10);
    color: var(--xf-textColor);
  }

  body.rg-xf-shell ul.am-tabs li.active .menu-item-alert,
  body.rg-xf-shell ul.am-tabs li.normal:hover .menu-item-alert {
    background: rgba(255, 255, 255, 0.10);
    color: var(--xf-textColor);
  }
}

/* Remove FA "home" icon squash in the first tab */
body.rg-xf-shell ul.am-tabs #menu-member {
  width: auto;
  overflow: visible;
}

body.rg-xf-shell ul.am-tabs #menu-member::before {
  display: none;
}

/* Narrow tabs (mobile member menu) */
body.rg-xf-shell .am-tabs-narrow-wrapper {
  margin: 10px 0 0;
}

body.rg-xf-shell ul.am-tabs-narrow {
  list-style: none;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  background: var(--xf-contentBg);
  box-shadow: var(--xf-shadow1);
}

body.rg-xf-shell ul.am-tabs-narrow li {
  margin: 0;
  padding: 0;
}

body.rg-xf-shell ul.am-tabs-narrow a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--xf-borderRadiusMedium);
  color: var(--xf-textColor);
  text-decoration: none;
}

body.rg-xf-shell ul.am-tabs-narrow li.active > a {
  background: var(--xf-contentAltBg);
  font-weight: 600;
}

body.rg-xf-shell ul.am-tabs-narrow li.normal > a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

/* Buttons */
body.rg-xf-shell .am-body-content a.button,
body.rg-xf-shell .am-body-content button,
body.rg-xf-shell .am-body-content input[type=button] {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  color: var(--xf-textColor);
  padding: 0.55em 1.05em;
  border-radius: var(--xf-borderRadiusMedium);
  box-shadow: none;
  background-image: none;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body.rg-xf-shell .am-body-content a.button:hover,
body.rg-xf-shell .am-body-content button:hover,
body.rg-xf-shell .am-body-content input[type=button]:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 30%);
  border-color: var(--xf-borderColorHeavy);
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

body.rg-xf-shell .am-body-content a.button:active,
body.rg-xf-shell .am-body-content button:active,
body.rg-xf-shell .am-body-content input[type=button]:active {
  transform: translateY(0);
}

/* Primary actions: submit buttons */
body.rg-xf-shell .am-body-content input[type=submit] {
  background: var(--xf-linkColor);
  border: 1px solid color-mix(in srgb, var(--xf-linkColor), transparent 20%);
  color: #fff;
  padding: 0.55em 1.15em;
  border-radius: var(--xf-borderRadiusMedium);
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body.rg-xf-shell .am-body-content input[type=submit]:hover,
body.rg-xf-shell .am-body-content input[type=submit]:active {
  cursor: pointer;
  background: var(--xf-linkHoverColor);
  border-color: color-mix(in srgb, var(--xf-linkHoverColor), transparent 20%);
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 10px 26px rgba(0, 0, 0, 0.14);
}

body.rg-xf-shell .am-body-content button:disabled,
body.rg-xf-shell .am-body-content input[type=button]:disabled,
body.rg-xf-shell .am-body-content input[type=submit]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Form controls */
body.rg-xf-shell .am-body-content input,
body.rg-xf-shell .am-body-content textarea,
body.rg-xf-shell .am-body-content select {
  font-family: var(--xf-fontFamily);
}

body.rg-xf-shell .am-body-content select,
body.rg-xf-shell .am-body-content textarea,
body.rg-xf-shell .am-body-content input[type=email],
body.rg-xf-shell .am-body-content input[type=number],
body.rg-xf-shell .am-body-content input[type=text],
body.rg-xf-shell .am-body-content input[type=password] {
  padding: 0.55em 0.75em;
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
  background: var(--xf-contentBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell .am-body-content select:focus,
body.rg-xf-shell .am-body-content textarea:focus,
body.rg-xf-shell .am-body-content input[type=email]:focus,
body.rg-xf-shell .am-body-content input[type=number]:focus,
body.rg-xf-shell .am-body-content input[type=text]:focus,
body.rg-xf-shell .am-body-content input[type=password]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 40%);
  box-shadow: var(--xf-focusRing);
}

body.rg-xf-shell .am-body-content input:disabled,
body.rg-xf-shell .am-body-content input[readonly],
body.rg-xf-shell .am-body-content textarea:disabled,
body.rg-xf-shell .am-body-content textarea[readonly],
body.rg-xf-shell .am-body-content select:disabled {
  background: color-mix(in srgb, var(--xf-contentBg), var(--xf-pageBg) 55%);
  color: var(--xf-textColorMuted);
}

/* Forms (aMember's default form layout -> closer to XF blocks) */
body.rg-xf-shell .am-form form {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

/* Auth/login forms: aMember defaults are light-only; restyle for our light/dark tokens */
body.rg-xf-shell .am-auth-form form {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  overflow: hidden;
}

body.rg-xf-shell .am-auth-form div.am-row {
  background: transparent;
}

/* Email confirmation code page (legacy aMember CSS targets #EmailCode with a yellow background).
   In current markup #EmailCode is a FORM id, so override it to match our theme. */
body.rg-xf-shell form#EmailCode {
  background: transparent;
  font-size: inherit;
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

/* "Confirmation link has been sent..." notice row */
body.rg-xf-shell form#EmailCode [id^="row-email-confirm-message"] .am-element {
  margin-left: 0;
  padding: 12px 14px;
  border-radius: var(--xf-borderRadiusLarge);
  background: color-mix(in srgb, var(--xf-paletteColor1), var(--xf-contentBg) 70%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteColor2), transparent 50%);
  color: var(--xf-textColor);
  max-width: 75ch;
  margin-inline: auto;
}

body.rg-xf-shell .am-form fieldset legend,
body.rg-xf-shell .am-auth-form legend {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
  padding: 0.75em 1rem;
  font-size: var(--xf-fontSizeLarge);
}

body.rg-xf-shell .am-form div.am-element-title label {
  color: var(--xf-textColor);
}

body.rg-xf-shell .am-form div.am-element-title .comment {
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  opacity: 1;
}

/* Filter/search input wrapper (aMember defaults to white box) */
body.rg-xf-shell .am-input-filter-wrapper {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusMedium);
}

body.rg-xf-shell .am-input-filter-wrapper.am-input-filter-wrapper_focus {
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 40%);
  box-shadow: var(--xf-focusRing);
  background: var(--xf-contentBg);
}

body.rg-xf-shell .am-input-filter-wrapper .am-input-filter-inner-wrapper {
  background: transparent;
}

body.rg-xf-shell .am-input-filter-wrapper input[type=text].am-input-filter {
  background-image: none;
  padding-left: 0;
}

/* Reduce hard borders between rows; let spacing do the work */
body.rg-xf-shell .am-form div.am-row {
  border-top: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-form div.am-row:first-child {
  border-top: 0;
}

/* Make row highlight feel like XF */
body.rg-xf-shell .am-form .am-row.am-row-highlight {
  background: color-mix(in srgb, var(--xf-paletteColor1), transparent 80%);
}

/* Login page extras */
body.rg-xf-shell .am-signup-link {
  margin: 14px 0 0;
  font-size: var(--xf-fontSizeSmall);
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .am-signup-link a {
  color: var(--xf-linkColor);
  text-decoration: none;
  font-weight: 600;
}

body.rg-xf-shell .am-signup-link a:hover {
  text-decoration: underline;
}

/* Notices / messages */
body.rg-xf-shell .am-info,
body.rg-xf-shell .am-notice,
body.rg-xf-shell .am-notification,
body.rg-xf-shell .am-errors,
body.rg-xf-shell .am-flash-content,
body.rg-xf-shell .am-flash-content-error {
  border-radius: var(--xf-borderRadiusMedium);
  box-shadow: none;
}

body.rg-xf-shell .am-info {
  background: color-mix(in srgb, var(--xf-paletteColor1), var(--xf-contentBg) 70%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteColor2), transparent 50%);
}

body.rg-xf-shell .am-notice,
body.rg-xf-shell .am-notification {
  background: color-mix(in srgb, var(--xf-paletteAccent1), var(--xf-contentBg) 75%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteAccent2), transparent 55%);
  color: var(--xf-textColor);
}

body.rg-xf-shell .am-flash-content-error,
body.rg-xf-shell ul.am-error,
body.rg-xf-shell ul.am-errors {
  background: color-mix(in srgb, var(--xf-paletteAccent2), var(--xf-contentBg) 85%);
  border: 1px solid color-mix(in srgb, var(--xf-paletteAccent2), transparent 40%);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  body.rg-xf-shell .am-flash-content-error,
  body.rg-xf-shell ul.am-error,
  body.rg-xf-shell ul.am-errors {
    color: var(--xf-textColor);
  }
}

/* Member dashboard blocks/widgets */
body.rg-xf-shell .am-widget > h2 {
  margin: 0 0 10px 0;
  font-size: var(--xf-fontSizeLarge);
  color: var(--xf-majorHeadingTextColor);
}

body.rg-xf-shell .am-block {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
}

/* Empty states (aMember defaults to light grey boxes) */
body.rg-xf-shell .am-block-nodata {
  background: var(--xf-contentAltBg);
  border: 1px dashed var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  padding: 16px 18px;
  margin-bottom: 1em;
  text-align: center;
  font-size: var(--xf-fontSizeLarge);
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .am-block-nodata a {
  color: var(--xf-linkColor);
  font-weight: 600;
}

/* Grids/tables (payment history/invoices/etc) */
body.rg-xf-shell .am-grid-container {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  overflow: hidden;
  background: var(--xf-contentBg);
}

body.rg-xf-shell table.am-grid {
  border-collapse: collapse;
}

body.rg-xf-shell .am-grid th {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-grid tr.am-grid-row > td {
  border-bottom: 1px solid var(--xf-borderColorLight);
  background: var(--xf-contentBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell .am-grid tr.am-grid-row.even td {
  background: var(--xf-contentBg);
}

body.rg-xf-shell .am-grid tr.am-grid-row.odd td {
  background: var(--xf-contentAltBg);
}

body.rg-xf-shell .am-grid tr.am-grid-row:hover > td {
  background: color-mix(in srgb, var(--xf-paletteColor1), transparent 70%);
}

/* Links inside grids */
body.rg-xf-shell .am-grid a {
  color: var(--xf-linkColor);
}

body.rg-xf-shell .am-grid a:hover {
  color: var(--xf-linkHoverColor);
}

/* Receipt tables (thank-you page) */
body.rg-xf-shell .am-receipt {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  padding: 0;
  box-shadow: var(--xf-shadow1);
  overflow: hidden;
  background: var(--xf-contentBg);
}

body.rg-xf-shell .am-receipt table.am-receipt-table {
  width: 100%;
  border-collapse: collapse;
}

body.rg-xf-shell .am-receipt th {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-receipt td {
  background: transparent;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-receipt .am-receipt-price,
body.rg-xf-shell .am-receipt .am-receipt-unit-price,
body.rg-xf-shell .am-receipt .am-receipt-qty {
  text-align: right;
}

body.rg-xf-shell .am-receipt .am-receipt-row-delimiter td,
body.rg-xf-shell .am-receipt td.am-receipt-indent {
  background: transparent;
  border-bottom: 0;
}

body.rg-xf-shell .am-receipt td.am-receipt-total {
  background: var(--xf-contentAltBg);
}

body.rg-xf-shell .am-receipt td.am-receipt-terms {
  background: transparent;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
}

/* Invoice summary (signup/checkout) */
body.rg-xf-shell .am-invoice-summary {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  padding: 0;
  overflow: hidden;
}

body.rg-xf-shell .am-invoice-summary table.am-invoice-summary-items {
  width: 100%;
  border-collapse: collapse;
}

body.rg-xf-shell .am-invoice-summary td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-item-last td {
  border-bottom: 0;
}

body.rg-xf-shell .am-invoice-summary .am-invoice-summary-item-num {
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-delimeter td {
  padding: 0;
  border-bottom: 0;
}

body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-delimeter hr {
  border: 0;
  height: 1px;
  background: var(--xf-borderColorLight);
  margin: 0;
}

body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-row-subtotal td,
body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-row-discount td,
body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-row-shipping td,
body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-row-tax td,
body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-row-total td {
  background: var(--xf-contentAltBg);
}

body.rg-xf-shell .am-invoice-summary tr.am-invoice-summary-row-total td {
  font-weight: 700;
}

body.rg-xf-shell .am-invoice-summary .am-invoice-summary-terms {
  padding: 10px 12px;
  background: transparent;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  border-top: 1px solid var(--xf-borderColorLight);
}

/* Popups/modals (aMember defaults to white) */
body.rg-xf-shell .am-popup {
  background-color: var(--xf-contentBg);
  color: var(--xf-textColor);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow2);
}

body.rg-xf-shell .am-popup .am-popup-header {
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
}

body.rg-xf-shell .am-popup .am-popup-close-icon:after {
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .am-popup .am-popup-close-icon:hover:after {
  color: var(--xf-textColor);
}

/* Affiliate banner preview (aMember defaults to white box) */
body.rg-xf-shell .am-aff-banner-preview {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  padding: 12px 14px;
  overflow: hidden;
}

body.rg-xf-shell .am-aff-banner-preview dt {
  color: var(--xf-textColor);
}

body.rg-xf-shell .am-aff-banner-preview dd,
body.rg-xf-shell .am-aff-banner-preview a {
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .am-aff-banner-note {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColorLight);
  border-radius: var(--xf-borderRadiusLarge);
  color: var(--xf-textColorMuted);
}

/* Invoices (member payment history) */
body.rg-xf-shell .am-active-invoice {
  padding: 0;
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  margin: 0 0 12px;
  overflow: hidden;
  background: var(--xf-contentBg);
  box-shadow: var(--xf-shadow1);
}

body.rg-xf-shell .am-active-invoice-header {
  padding: 10px 12px;
  background: var(--xf-majorHeadingBg);
  color: var(--xf-majorHeadingTextColor);
  border-bottom: 1px solid var(--xf-borderColorLight);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

body.rg-xf-shell .am-active-invoice-header a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 65%);
}

body.rg-xf-shell .am-active-invoice-header a:hover {
  text-decoration-color: currentColor;
}

body.rg-xf-shell .am-active-invoice .am-active-invoice-terms {
  font-style: normal;
  opacity: 0.9;
}

body.rg-xf-shell .am-active-invoice .am-active-invoice-rebill-info {
  width: 100%;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
}

body.rg-xf-shell .am-active-invoice .am-active-invoice-product-list {
  margin: 0;
  padding: 10px 14px 12px 28px;
}

body.rg-xf-shell .am-active-invoice .am-active-invoice-product-list li {
  list-style-type: disc;
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .am-active-invoice .am-active-invoice-item-title {
  color: var(--xf-textColor);
}

/* Pagination */
body.rg-xf-shell .am-pagination a,
body.rg-xf-shell .am-pagination span {
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid var(--xf-borderColor);
  background: var(--xf-contentAltBg);
  color: var(--xf-textColor);
}

body.rg-xf-shell .am-pagination a:hover {
  background: color-mix(in srgb, var(--xf-contentAltBg), var(--xf-paletteColor1) 25%);
  text-decoration: none;
}

body.rg-xf-shell .am-pagination .am-pagination-current {
  background: var(--xf-linkColor);
  border-color: color-mix(in srgb, var(--xf-linkColor), transparent 25%);
  color: #fff;
}

/* Two-column login/signup panels */
body.rg-xf-shell .am-layout-two-coll {
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  background: var(--xf-contentAltBg);
}

/* aMember adds top/bottom spacer bars with light backgrounds (and a tiled image on desktop). */
body.rg-xf-shell .am-layout-two-coll .am-layout-two-coll-top,
body.rg-xf-shell .am-layout-two-coll .am-layout-two-coll-bottom {
  background: transparent;
  background-image: none;
}

@media all and (min-width: 750px) {
  body.rg-xf-shell .am-layout-two-coll {
    background: var(--xf-contentAltBg);
  }
}

/* =========================
   Marketing / signup highlights (custom HTML snippets)
   ========================= */

body.rg-xf-shell .rg-marketing {
  display: grid;
  gap: 14px;
  margin: 0 0 14px 0;
}

body.rg-xf-shell .rg-stack {
  display: grid;
  gap: 14px;
}

/* Card container used to replace inline-styled <div style="background/border/padding"> blocks */
body.rg-xf-shell .rg-card {
  background: var(--xf-contentAltBg);
  border: 1px solid var(--xf-borderColor);
  border-radius: var(--xf-borderRadiusLarge);
  box-shadow: var(--xf-shadow1);
  padding: 14px 16px;
  margin: 0 0 14px 0;
}

/* When cards are placed in a stack/grid, let the gap handle spacing */
body.rg-xf-shell .rg-stack > .rg-card,
body.rg-xf-shell .rg-marketing > .rg-card {
  margin: 0;
}

body.rg-xf-shell .rg-card:last-child {
  margin-bottom: 0;
}

body.rg-xf-shell .rg-card--center {
  text-align: center;
}

body.rg-xf-shell .rg-card__title {
  margin: 0;
  max-width: 56ch;
  margin-inline: auto;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

body.rg-xf-shell .rg-body {
  margin: 0;
  font-size: var(--xf-fontSizeLarge);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

body.rg-xf-shell .rg-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

body.rg-xf-shell .rg-feature__image {
  display: block;
  width: 100%;
  max-width: 389px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--xf-borderRadiusMedium);
  border: 1px solid var(--xf-borderColorLight);
  background: var(--xf-contentBg);
}

body.rg-xf-shell .rg-feature__caption {
  margin: 0;
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--xf-fontSizeNormal);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColorMuted);
}

/* Keep existing markup flexible: allow <em> but don't force italics */
body.rg-xf-shell .rg-feature__caption em {
  font-style: normal;
}

/* =========================
   Content components (stats / lists / notes)
   ========================= */

body.rg-xf-shell .rg-divider {
  border: 0;
  height: 1px;
  background: var(--xf-borderColorLight);
  margin: 14px 0;
}

body.rg-xf-shell .rg-lede {
  margin: 0;
  max-width: 70ch;
  margin-inline: auto;
  font-size: var(--xf-fontSizeLarge);
  line-height: var(--xf-lineHeight);
  color: var(--xf-textColor);
}

body.rg-xf-shell .rg-kicker {
  margin: 0 0 6px 0;
  font-size: var(--xf-fontSizeSmall);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xf-textColorMuted);
}

body.rg-xf-shell .rg-statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

body.rg-xf-shell .rg-stat {
  background: var(--xf-contentBg);
  border: 1px solid var(--xf-borderColorLight);
  border-radius: var(--xf-borderRadiusLarge);
  padding: 12px 14px;
}

body.rg-xf-shell .rg-stat__value {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--xf-linkColor);
}

body.rg-xf-shell .rg-stat__label {
  margin: 4px 0 0 0;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  line-height: 1.35;
}

body.rg-xf-shell .rg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

body.rg-xf-shell .rg-list li {
  position: relative;
  padding-left: 22px;
  color: var(--xf-textColor);
  line-height: var(--xf-lineHeight);
}

body.rg-xf-shell .rg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--xf-linkColor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-linkColor), transparent 85%);
  transform: translateY(-50%);
}

body.rg-xf-shell .rg-note {
  margin: 0;
  color: var(--xf-textColorMuted);
  font-size: var(--xf-fontSizeSmall);
  line-height: var(--xf-lineHeight);
}