/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fbfefa;
  --accent-2: #f5fbf4;
  --accent-3: #e8f7e6;
  --accent-4: #d9f2d6;
  --accent-5: #c6eac3;
  --accent-6: #b0dfab;
  --accent-7: #91d18b;
  --accent-8: #62bc5b;
  --accent-9: #006e00d5;
  --accent-10: #005e00;
  --accent-11: #22801e;
  --accent-12: #1f3d1d;

  --accent-a1: #33cc0005;
  --accent-a2: #18a3000b;
  --accent-a3: #15ae0019;
  --accent-a4: #13af0029;
  --accent-a5: #0da6003c;
  --accent-a6: #109e0054;
  --accent-a7: #0e9a0074;
  --accent-a8: #0b9700a4;
  --accent-a9: #006e00;
  --accent-a10: #005e00;
  --accent-a11: #056f00e1;
  --accent-a12: #022400e2;

  --accent-contrast: #fff;
  --accent-surface: #f3faf1cc;
  --accent-indicator: #006e00d5;
  --accent-track: #006e00d5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0065 142.5);
      --accent-2: oklch(98.2% 0.0112 142.5);
      --accent-3: oklch(96.1% 0.0283 142.5);
      --accent-4: oklch(93.4% 0.0452 142.5);
      --accent-5: oklch(90.1% 0.0648 142.5);
      --accent-6: oklch(85.8% 0.0874 142.5);
      --accent-7: oklch(79.8% 0.1163 142.5);
      --accent-8: oklch(71.6% 0.1592 142.5);
      --accent-9: oklch(46.6% 0.1587 142.5 / 0.8353);
      --accent-10: oklch(41.3% 0.1587 142.5);
      --accent-11: oklch(52.7% 0.1587 142.5);
      --accent-12: oklch(32.7% 0.0655 142.5);

      --accent-a1: color(display-p3 0.4118 0.8039 0.0196 / 0.02);
      --accent-a2: color(display-p3 0.1216 0.6118 0.0235 / 0.04);
      --accent-a3: color(display-p3 0.1765 0.6706 0.0118 / 0.095);
      --accent-a4: color(display-p3 0.1569 0.6431 0.0039 / 0.153);
      --accent-a5: color(display-p3 0.1255 0.6157 0.0039 / 0.224);
      --accent-a6: color(display-p3 0.1294 0.5843 0.0039 / 0.31);
      --accent-a7: color(display-p3 0.1216 0.5608 0.0039 / 0.428);
      --accent-a8: color(display-p3 0.1255 0.549 0 / 0.6);
      --accent-a9: color(display-p3 0.0784 0.3529 0 / 0.891);
      --accent-a10: color(display-p3 0.0745 0.302 0 / 0.914);
      --accent-a11: color(display-p3 0.0863 0.3843 0 / 0.82);
      --accent-a12: color(display-p3 0.0275 0.1255 0 / 0.875);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9804 0.9529 / 0.8);
      --accent-indicator: oklch(46.6% 0.1587 142.5 / 0.8353);
      --accent-track: oklch(46.6% 0.1587 142.5 / 0.8353);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.541 0.556 0.532);
      --grayscale-track: color(display-p3 0.541 0.556 0.532);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #0b150a;
  --accent-3: #0e2a0d;
  --accent-4: #0b3b0b;
  --accent-5: #114a10;
  --accent-6: #1a5a18;
  --accent-7: #216b1f;
  --accent-8: #258023;
  --accent-9: #00e013;
  --accent-10: #00d500;
  --accent-11: #00de0c;
  --accent-12: #abf6a5;

  --accent-a1: #00000000;
  --accent-a2: #86ff7a15;
  --accent-a3: #55ff4f2a;
  --accent-a4: #30ff303b;
  --accent-a5: #3bff384a;
  --accent-a6: #4aff445a;
  --accent-a7: #4fff4a6b;
  --accent-a8: #4aff4680;
  --accent-a9: #00ff16e0;
  --accent-a10: #00ff00d5;
  --accent-a11: #00ff0ede;
  --accent-a12: #b1ffabf6;

  --accent-contrast: #162715;
  --accent-surface: #162a1480;
  --accent-indicator: #00e013;
  --accent-track: #00e013;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0203 142.8);
      --accent-2: oklch(18.1% 0.0256 142.8);
      --accent-3: oklch(25.6% 0.062 142.8);
      --accent-4: oklch(31% 0.0915 142.8);
      --accent-5: oklch(36% 0.1054 142.8);
      --accent-6: oklch(41.1% 0.117 142.8);
      --accent-7: oklch(46.6% 0.1323 142.8);
      --accent-8: oklch(52.7% 0.1536 142.8);
      --accent-9: oklch(78.6% 0.2646 142.8);
      --accent-10: oklch(75.2% 0.2646 142.8);
      --accent-11: oklch(78% 0.2646 142.8);
      --accent-12: oklch(90.5% 0.1322 142.8);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.6157 0.9961 0.5216 / 0.083);
      --accent-a3: color(display-p3 0.5137 1 0.4157 / 0.161);
      --accent-a4: color(display-p3 0.451 1 0.3098 / 0.228);
      --accent-a5: color(display-p3 0.4784 1 0.3451 / 0.287);
      --accent-a6: color(display-p3 0.5059 1 0.3843 / 0.35);
      --accent-a7: color(display-p3 0.5255 1 0.4 / 0.412);
      --accent-a8: color(display-p3 0.5176 1 0.3882 / 0.495);
      --accent-a9: color(display-p3 0.4627 1 0.3137 / 0.867);
      --accent-a10: color(display-p3 0.4588 1 0.2941 / 0.824);
      --accent-a11: color(display-p3 0.4627 1 0.3059 / 0.859);
      --accent-a12: color(display-p3 0.7647 1 0.7098 / 0.957);

      --accent-contrast: #162715;
      --accent-surface: color(display-p3 0.102 0.1569 0.0863 / 0.5);
      --accent-indicator: oklch(78.6% 0.2646 142.8);
      --accent-track: oklch(78.6% 0.2646 142.8);
    }
  }
}


.dark {
  --grayscale-1: #111210;
  --grayscale-2: #181917;
  --grayscale-3: #212220;
  --grayscale-4: #282a27;
  --grayscale-5: #2f312e;
  --grayscale-6: #383a36;
  --grayscale-7: #454843;
  --grayscale-8: #5c625b;
  --grayscale-9: #687066;
  --grayscale-10: #767d74;
  --grayscale-11: #afb5ad;
  --grayscale-12: #eceeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f1f2f008;
  --grayscale-a3: #f4f5f312;
  --grayscale-a4: #f3fef21a;
  --grayscale-a5: #f2fbf122;
  --grayscale-a6: #f4faed2c;
  --grayscale-a7: #f2fced3b;
  --grayscale-a8: #edfdeb57;
  --grayscale-a9: #ebfde766;
  --grayscale-a10: #f0fdec74;
  --grayscale-a11: #f6fef4b0;
  --grayscale-a12: #fdfffded;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #687066;
  --grayscale-track: #687066;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.07 0.063);
      --grayscale-2: color(display-p3 0.095 0.098 0.091);
      --grayscale-3: color(display-p3 0.131 0.135 0.126);
      --grayscale-4: color(display-p3 0.158 0.163 0.153);
      --grayscale-5: color(display-p3 0.186 0.192 0.18);
      --grayscale-6: color(display-p3 0.221 0.229 0.215);
      --grayscale-7: color(display-p3 0.273 0.284 0.266);
      --grayscale-8: color(display-p3 0.365 0.382 0.359);
      --grayscale-9: color(display-p3 0.414 0.438 0.404);
      --grayscale-10: color(display-p3 0.467 0.49 0.458);
      --grayscale-11: color(display-p3 0.69 0.709 0.682);
      --grayscale-12: color(display-p3 0.927 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f1f2f008;
      --grayscale-a3: #f4f5f312;
      --grayscale-a4: #f3fef21a;
      --grayscale-a5: #f2fbf122;
      --grayscale-a6: #f4faed2c;
      --grayscale-a7: #f2fced3b;
      --grayscale-a8: #edfdeb57;
      --grayscale-a9: #ebfde766;
      --grayscale-a10: #f0fdec74;
      --grayscale-a11: #f6fef4b0;
      --grayscale-a12: #fdfffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.414 0.438 0.404);
      --grayscale-track: color(display-p3 0.414 0.438 0.404);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 110, 0, 0.8352941176470589);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(228, 231, 235, 1);
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(0, 224, 19, 1);
  --background: rgba(0, 0, 0, 1);
  --border: rgba(102, 102, 102, 1);
  --sidebar-background: initial;
  --header-background: rgba(0, 0, 0, 1);
  --card-background: initial;
  --theme-color: #000;
}

/** Define accent color variable */
:root {
    --accent-color: #006e00d5;
    --landing-page-card-border-color: #959595;  
    --text-color: rgba(0, 0, 0, 0.90);
    --landing-page-button-color: #E8E8E8;
    --header-border-color: #E4E7EB;
    --sidebar-link-color: #101010;
    --sidebar-link-bg-hover: #F0F0F0;
    --button-text-color: #000000;
    --selection-bg-color: #C9E3FE;
    --mermaid-background-color: #fff;
  }

.dark {
  --accent-color: #00E013;
  --landing-page-card-border-color: #959595;
  --text-color: rgba(255, 255, 255, 0.90);
  --landing-page-button-color: #e8e8e8;
  --header-border-color: #666666;
  --sidebar-link-color: #ffffff;
  --sidebar-link-bg-hover: #595959;
  --selection-bg-color: rgba(201, 227, 254, 0.3);
  --mermaid-background-color: #fff;
}

  
  /* Add separator after each tab, including the last one */
  .fern-header-tabs [data-radix-collection-item]::after {
   content: "|";
   position: absolute;
   left: calc(100% + 0px); /* Moved separator closer to the tab */
   top: 25%; 
   transform: translateY(-50%);
   color: var(--grayscale-a11) !important;
   font-weight: normal;
   pointer-events: none;
   font-size: var(--text-sm);
   line-height: var(--text-sm--line-height);
   opacity: 0.6;
   z-index: 1;
  }
  
  div[role="tablist"] a > span {
    color: var(--sidebar-link-color) !important;
  }

  /* Make the selected tab color the accent color */
  div[role="tablist"] a[aria-selected="true"] > span {
    color: var(--accent-color) !important;
  }

  /* 
    API Reference Tab Styles
    These styles set the fonts, sizes, and colors for headers, code blocks, and links
    within the API reference tab (fern-layout-reference-content).
  */
  /* Style for h3 headers in the API reference tab */
  .fern-layout-reference-content .prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
      /* Set header color, font size, and font family */
      color: var(--tw-prose-headings);
      font-size: 32px;
      font-family: 'Cash Sans Medium', 'CashSans-Medium', 'CashSans', 'Inter', Arial, sans-serif;
      font-weight: 600;
  }
  
  /* Style for inline code in the API reference tab */
  .fern-layout-reference-content .prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
      /* Set code color and font size */
      color: var(--tw-prose-code);
      font-size: 14px;
      font-weight: 600;
  }
  
  .fern-prose.prose.max-w-none.break-words .fern-mdx-link {
   color: var(--text-color) !important;
   font-weight: 500;
   font-size: 16px;
   text-decoration: underline;
  }
  
  .fern-layout-guide .fern-mdx-link svg.external-link-icon {
    color: var(--text-color) !important;
  }
  
  .fern-layout-guide .fern-mdx-link {
   color: var(--text-color) !important;
   font-weight: 500;
   font-size: 16px;
   text-decoration: underline;
  }
  
  /* Style for links in the API reference tab */
  .fern-layout-guide .prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
    /* Set link color, font weight, font size, and underline */
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline;
  }
  
  .fern-layout-reference-content .prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
   color: var(--text-color);
   font-weight: 500;
   font-size: 16px;
   text-decoration: underline;
  }
  
  .fern-layout-reference-content .prose {
   font-size: 16px !important;
  }
  
  /* Add top border to the tabs header */
  body:not(:has(.home-page-specific)) .fern-header-tabs {
    border-top: 1px solid;
    width: 100%;
    box-sizing: border-box;
    border-top-color: var(--header-border-color) !important;
  }
  
  
  h1, h2, h3 {
   font-family: 'CashSans-Medium', sans-serif;
   src: url('../assets/fonts/CashSans-AllStyles-v1.000-OTF-MAC/CashSans-Medium.otf') format('opentype');
   font-weight: 501;
  }
  
  h1 {
  font-size: 44px;
  }

  h2 {
    font-size: 32px;
  } 

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 18px;
  }

  body:has(.home-page-specific) .prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-bottom: .6em;
    margin-top: 1em;
  }
  body:has(.home-page-specific) .prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-bottom: .6em;
    margin-top: 1em !important;
  }
  body:has(.home-page-specific) #for-payment-service-providers {
    margin-bottom: .6em;
    margin-top: 0.5em !important;
  }

  /* Target cards in CardGroups with 3 columns (quick access cards) */
  .quick-access .fern-card > div > div > div {
    font-weight: normal !important; 
    font-size: 14px !important;
  }
  
  /* Fix chevron arrow color for subsections when selected */
  .fern-sidebar-link[data-state=active] svg {
    color: var(--sidebar-link-color) !important;
  }
  .fern-sidebar-link .expand-indicator[data-state=active] {
    background-color: var(--sidebar-link-bg-hover) !important;
  }
  
  /* Clearpay Callout styling */
  .fern-callout {
    border: 1px solid;
    border-bottom: 3px solid;
    background: none !important;
  }
  
  .fern-callout[data-intent="note"] {
    color: var(--accent-color);
  }

  /* Setting the color of the text in the Note callout */
  .fern-callout[data-intent="note"] > div > div > p {
    color: var(--accent-color);
  }
  .fern-callout[data-intent="note"] > div > div > h5 {
    color: var(--accent-color);
  }
  .fern-callout[data-intent="note"] > div > div > ul > li {
    color: var(--accent-color);
  }
  .fern-callout[data-intent="note"] > div > div > ul {
    color: var(--accent-color);
  }

  .fern-callout[data-intent="note"] svg {
    color: inherit !important;
  }
  
  /* Font face declaration for CashSans-Regular */
  @font-face {
    font-family: 'CashSans-Regular', sans-serif;
    src: url('../fonts/CashSans-AllStyles-v1.000-OTF-MAC/CashSans-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Table of Contents (TOC) styling with Cash Sans Regular 16px */
  .mb-2.last\:mb-0,
  .mb-2.last\:mb-0 *,
  .mb-2.last\:mb-0 a,
  .mb-2.last\:mb-0 span {
    font-family: 'CashSans-Regular', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
  }
  
  /* Override any var(--text-sm) usage in TOC items */
  .mb-2.last\:mb-0,
  .mb-2.last\:mb-0 * {
    font-size: 16px !important;
  } 
  
  /* Text selection styling */
  ::selection,
  ::-moz-selection {
    background-color: var(--selection-bg-color) !important;
    color: inherit !important;
  }
  
  /* API Property Key styling with Cash Mono Medium 18px, bold */
  .fern-api-property-key {
    font-family: 'CashMono-Medium', monospace !important;
    font-size: 18px !important;
    /* font-weight: bold !important; */
  } 
  
  /* Make the selected item in the search bar light gray */
    #fern-search-desktop-command[data-cmdk-root] [data-cmdk-item][data-selected=true]:not([data-conversation-id]) {
      background-color: var(--selection-bg-color) !important;
    }
  
  /* Hide feedback on home page - using layout targeting */
  body:has(.home-page-specific) .fern-page-actions {
    display: none !important;
  }
  
  /* Home page specific styles - scoped to prevent affecting other pages */
  .home-page-specific .fern-button {
      align-items: center;
      border-radius: 9999px;
      background-color: var(--landing-page-button-color);
      color: var(--button-text-color) !important;
      padding-left: 16px;
      padding-right: 16px;
  }
  
  .home-page-specific {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .home-page-specific h1 {
    margin-top: -10px;
    margin-bottom: 2px;
    width: 100%;
  }
  
  .home-page-specific h2 {
    width: 100%;
    text-align: left;
  }

  .home-page-specific h3 {
    width: 100%;
    text-align: left;
  }

  .home-page-specific h4 {
    width: 100%;
    text-align: left;
  }

  .home-page-specific > div {
    width: 100%;
  }
  
  /* Sidebar link styling - default state */
  .fern-sidebar-link {
   color: var(--sidebar-link-color) !important;
  }
  
  /* Sidebar link styling for selected/active state */
  .fern-sidebar-link[data-state="active"] {
   background-color: var(--sidebar-link-bg-hover) !important;
   color: var(--sidebar-link-color) !important;
   font-weight: normal !important;
  }
  
  /* Also handle hover state for better UX */
  .fern-sidebar-link:hover {
   background-color: var(--sidebar-link-bg-hover) !important;
   color: var(--sidebar-link-color) !important;
  }
.fern-sidebar-link:focus-visible {
   background-color: var(--sidebar-link-bg-hover) !important;
   color: var(--sidebar-link-color) !important;
  }
  
  /* Ensure the sidebar right border line extends the full height of the viewport */
  #fern-sidebar[data-viewport=desktop] {
   border-right: 1px solid var(--header-border-color) !important;
   min-height: 100vh;
  }

  /* Add bottom padding to ensure last sidebar item is visible */
  #fern-sidebar[data-viewport=desktop] [data-radix-scroll-area-viewport] {
   padding-bottom: 100px; /* Ensures last item is fully visible with clearance */
  }
  
  #fern-search-button, #fern-ask-ai-button{
   border-radius: 9999px !important;
  }
  
  .fern-scroll-area-scrollbar {
    color: var(--accent-color);
  }

  /* Centered image utility classes (migrated from Stoplight focus: center) */
  /* These classes can be combined for different effects */
  .img-centered {
    display: block;
    margin: 0 auto;
  }

  .img-w-250 {
    width: 250px;
  }

  .img-bg-light {
    background-color: #f5f5f5;
    padding: 8px;
  }

  .img-bg-gray {
    background-color: #f5f5f4;
    padding: 8px;
  }
  
 /* To change the color of the icon in the card - scoped to home page */
 body:has(.home-page-specific) .fern-card > div > svg > path {
     fill: var(--landing-page-card-border-color) !important;
 }

/* Source footnote styling */
.source-footnote > p {
  text-align: left;
  font-size: 12px !important; 
}

.mermaid-diagram {
  background-color: var(--mermaid-background-color);
}

/* ===========================================
   DISPUTES PAGES - DARK MODE MERMAID STYLING

   Page-specific: disputes-api-diagram, disputes-lifecycle-diagram
   Modal view: mermaid-container-expanded (applies to all mermaid modals)
   =========================================== */

/* Layout for dispute diagrams (page-level only) */
.disputes-api-diagram,
.disputes-lifecycle-diagram {
  margin-top: 24px;
}

.dark .disputes-api-diagram,
.dark .disputes-lifecycle-diagram {
  padding: 16px;
  border-radius: 8px;
}

/* Modal view - white background wrapped around the SVG */
.dark .mermaid-container-expanded svg {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

/* --- Sequence Diagram Styles --- */
/* Applies to: disputes-api-diagram (page) and mermaid-container-expanded (modal) */

/* Actor boxes - dark blue with white text */
.dark .disputes-api-diagram svg rect.actor,
.dark .mermaid-container-expanded svg rect.actor {
  fill: #1e293b !important;
  stroke: #1e293b !important;
  rx: 6 !important;
  ry: 6 !important;
}

.dark .disputes-api-diagram svg .actor,
.dark .mermaid-container-expanded svg .actor {
  fill: #fff !important;
}

.dark .disputes-api-diagram svg text.actor > tspan,
.dark .mermaid-container-expanded svg text.actor > tspan {
  fill: #fff !important;
}

/* Note boxes - light gray background with dark text */
.dark .disputes-api-diagram svg rect.note,
.dark .mermaid-container-expanded svg rect.note {
  fill: #e5e7eb !important;
  stroke: #d1d5db !important;
  rx: 6 !important;
  ry: 6 !important;
}

.dark .disputes-api-diagram svg .noteText,
.dark .disputes-api-diagram svg .noteText > tspan,
.dark .disputes-api-diagram svg text.noteText,
.dark .disputes-api-diagram svg g.note text,
.dark .disputes-api-diagram svg g.note text tspan,
.dark .mermaid-container-expanded svg .noteText,
.dark .mermaid-container-expanded svg .noteText > tspan,
.dark .mermaid-container-expanded svg text.noteText,
.dark .mermaid-container-expanded svg g.note text,
.dark .mermaid-container-expanded svg g.note text tspan {
  fill: #1f2937 !important;
}

/* Message and loop text - gray */
.dark .disputes-api-diagram svg .messageText,
.dark .mermaid-container-expanded svg .messageText {
  fill: #6b7280 !important;
}

.dark .disputes-api-diagram svg .loopText > tspan,
.dark .mermaid-container-expanded svg .loopText > tspan {
  fill: #6b7280 !important;
}

/* Lines, arrows, and lifelines */
.dark .disputes-api-diagram svg line,
.dark .mermaid-container-expanded svg line {
  stroke: #9ca3af !important;
}

.dark .disputes-api-diagram svg .messageLine0,
.dark .disputes-api-diagram svg .messageLine1,
.dark .mermaid-container-expanded svg .messageLine0,
.dark .mermaid-container-expanded svg .messageLine1 {
  stroke: #9ca3af !important;
}

.dark .disputes-api-diagram svg .arrowMarkerPath,
.dark .mermaid-container-expanded svg .arrowMarkerPath {
  fill: #9ca3af !important;
  stroke: #9ca3af !important;
}

.dark .disputes-api-diagram svg .actor-line,
.dark .mermaid-container-expanded svg .actor-line {
  stroke: #d1d5db !important;
}

/* Loop/section backgrounds and activation boxes */
.dark .disputes-api-diagram svg .loopLine,
.dark .mermaid-container-expanded svg .loopLine {
  stroke: #e5e7eb !important;
}

.dark .disputes-api-diagram svg rect.rect,
.dark .mermaid-container-expanded svg rect.rect {
  fill: #f9fafb !important;
  stroke: #e5e7eb !important;
}

.dark .disputes-api-diagram svg .activation0,
.dark .disputes-api-diagram svg .activation1,
.dark .disputes-api-diagram svg .activation2,
.dark .mermaid-container-expanded svg .activation0,
.dark .mermaid-container-expanded svg .activation1,
.dark .mermaid-container-expanded svg .activation2 {
  fill: #e5e7eb !important;
  stroke: #d1d5db !important;
}

/* --- Flowchart Styles --- */
/* Applies to: disputes-lifecycle-diagram (page) and mermaid-container-expanded (modal) */

/* Nodes - dark blue with white text */
.dark .disputes-lifecycle-diagram svg .node rect,
.dark .disputes-lifecycle-diagram svg .node polygon,
.dark .disputes-lifecycle-diagram svg .node circle,
.dark .disputes-lifecycle-diagram svg .node ellipse,
.dark .disputes-lifecycle-diagram svg .node path,
.dark .mermaid-container-expanded svg .node rect,
.dark .mermaid-container-expanded svg .node polygon,
.dark .mermaid-container-expanded svg .node circle,
.dark .mermaid-container-expanded svg .node ellipse,
.dark .mermaid-container-expanded svg .node path {
  fill: #1e293b !important;
  stroke: #1e293b !important;
}

.dark .disputes-lifecycle-diagram svg .nodeLabel,
.dark .disputes-lifecycle-diagram svg .node .label,
.dark .disputes-lifecycle-diagram svg .node .label div,
.dark .disputes-lifecycle-diagram svg .node foreignObject div,
.dark .mermaid-container-expanded svg .nodeLabel,
.dark .mermaid-container-expanded svg .node .label,
.dark .mermaid-container-expanded svg .node .label div,
.dark .mermaid-container-expanded svg .node foreignObject div {
  color: #fff !important;
}

/* Edge lines and arrows - gray */
.dark .disputes-lifecycle-diagram svg .edgePath path,
.dark .disputes-lifecycle-diagram svg .flowchart-link,
.dark .mermaid-container-expanded svg .edgePath path,
.dark .mermaid-container-expanded svg .flowchart-link {
  stroke: #6b7280 !important;
}

.dark .disputes-lifecycle-diagram svg marker path,
.dark .mermaid-container-expanded svg marker path {
  fill: #6b7280 !important;
  stroke: #6b7280 !important;
}

/* Edge labels - gray text on transparent background */
.dark .disputes-lifecycle-diagram svg .edgeLabel,
.dark .mermaid-container-expanded svg .edgeLabel {
  background-color: transparent !important;
  color: #6b7280 !important;
}

.dark .disputes-lifecycle-diagram svg .edgeLabel rect,
.dark .mermaid-container-expanded svg .edgeLabel rect {
  fill: transparent !important;
  stroke: none !important;
}

.dark .disputes-lifecycle-diagram svg .edgeLabel span,
.dark .disputes-lifecycle-diagram svg .edgeLabel .label div,
.dark .mermaid-container-expanded svg .edgeLabel span,
.dark .mermaid-container-expanded svg .edgeLabel .label div {
  color: #6b7280 !important;
}

#builtwithfern {
  display: none !important;
}
/* Button previews on the Cash App Pay assets page. Every button sits on the
   same gray card, so the white buttons and their outline stay visible. Each card is as
   tall as a logo card (156px) and shows the button at its native 320x48. */
.button-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 156px;
  padding: 0 16px;
  border-radius: 12px;
}

.button-preview img {
  display: block;
  max-width: 100%;
  height: auto;
}

.button-preview-bg-light {
  background-color: #e8e8e8;
}