/*
 * Safety-only overrides for the static visual capture.
 * These rules disable controls without changing the page layout.
 */

[data-static-capture="true"] a,
[data-static-capture="true"] button,
[data-static-capture="true"] input,
[data-static-capture="true"] select,
[data-static-capture="true"] textarea,
[data-static-capture="true"] [role="button"],
[data-static-capture="true"] [role="link"] {
  pointer-events: none !important;
  cursor: default !important;
}

/*
 * Keep native buttons interactive for hover and click feedback.
 * The static capture has no action handlers, so clicks remain harmless.
 */
[data-static-capture="true"] button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

[data-static-capture="true"] .demo-clickable,
[data-static-capture="true"] .demo-clickable * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

[data-static-capture="true"] .demo-clickable:hover {
  filter: brightness(1.06);
}

[data-static-capture="true"] * {
  transition-duration: 0s !important;
}

.wallet-canvas-static {
  display: block;
  width: 477px;
  height: 494px;
  object-fit: cover;
  clip-path: inset(175px 0 0);
  transform: translateY(-75px);
  vertical-align: top;
}

@media (max-width: 600px) {
  /* The live app swaps the desktop tabs for a compact menu at this breakpoint. */
  [data-testid="Trade-tab"],
  [data-testid="Explore-tab"],
  [data-testid="Pool-tab"],
  [data-testid="Portfolio-tab"] {
    display: none !important;
  }

  /* Replace the desktop chevron next to the logo with the mobile hamburger. */
  [data-testid="nav-company-menu"] svg[style*="width: 12px"] {
    display: none !important;
  }

  [data-testid="nav-company-menu"] > div::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 2px;
    margin-left: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow:
      0 -6px 0 rgba(255, 255, 255, 0.65),
      0 6px 0 rgba(255, 255, 255, 0.65);
  }

  /* The original mobile layout intentionally clips the animated wallet canvas. */
  .wallet-canvas-static {
    display: none !important;
  }

  /* Prevent the desktop-captured product wrapper from using min-content width. */
  [class*="_pr-_md_48px"][class*="_pl-_md_48px"] {
    width: 100% !important;
    max-width: 100vw !important;
  }
}