/* Liberty Markets site-wide polish layer. Loaded after generated CSS. */

:root,
.dark {
  --primary: 142 71% 45%;
  --primary-foreground: 0 0% 0%;
  --accent: 142 71% 45%;
  --accent-foreground: 0 0% 0%;
  --ring: 142 71% 45%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background: #0a0a0a;
  color: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#root {
  max-width: 100%;
  overflow-x: hidden;
}

/* Keep the original Liberty green/black identity on pages that used alternate accents. */
.text-orange-400,
.text-yellow-400,
.text-purple-400,
.text-blue-400,
.text-sky-400,
.text-cyan-400,
.text-pink-400,
[class*="text-orange-"],
[class*="text-yellow-"],
[class*="text-purple-"],
[class*="text-blue-"],
[class*="text-sky-"],
[class*="text-cyan-"],
[class*="text-pink-"],
[class*="text-emerald-"],
.hover\:text-orange-400:hover,
.hover\:text-yellow-400:hover,
.hover\:text-purple-400:hover,
.hover\:text-blue-400:hover,
.hover\:text-sky-400:hover,
.hover\:text-cyan-400:hover,
.hover\:text-pink-400:hover {
  color: hsl(var(--primary)) !important;
}

.bg-orange-400,
.bg-yellow-400,
.bg-purple-400,
.bg-blue-400,
.bg-sky-400,
.bg-cyan-400,
.bg-pink-400,
[class*="bg-orange-"],
[class*="bg-yellow-"],
[class*="bg-purple-"],
[class*="bg-blue-"],
[class*="bg-sky-"],
[class*="bg-cyan-"],
[class*="bg-pink-"],
[class*="bg-emerald-"],
[class*="bg-orange-400/"],
[class*="bg-yellow-400/"],
[class*="bg-purple-400/"],
[class*="bg-blue-400/"],
[class*="bg-sky-400/"],
[class*="bg-cyan-400/"],
[class*="bg-pink-400/"],
[class*="bg-orange-500/"],
[class*="bg-yellow-500/"],
[class*="bg-purple-500/"],
[class*="bg-blue-500/"],
[class*="bg-sky-500/"],
[class*="bg-cyan-500/"],
[class*="bg-pink-500/"] {
  background-color: hsl(var(--primary) / .12) !important;
}

.bg-orange-400.text-black,
.bg-yellow-400.text-black,
.bg-purple-400.text-black,
.bg-blue-400.text-black,
.bg-sky-400.text-black,
.bg-cyan-400.text-black,
.bg-pink-400.text-black,
[class*="bg-orange-"][class*="text-black"],
[class*="bg-yellow-"][class*="text-black"],
[class*="bg-purple-"][class*="text-black"],
[class*="bg-blue-"][class*="text-black"],
[class*="bg-sky-"][class*="text-black"],
[class*="bg-cyan-"][class*="text-black"],
[class*="bg-pink-"][class*="text-black"],
[class*="bg-emerald-"][class*="text-black"] {
  background-color: hsl(var(--primary)) !important;
  color: #000 !important;
}

[class*="border-orange-"],
[class*="border-yellow-"],
[class*="border-purple-"],
[class*="border-blue-"],
[class*="border-sky-"],
[class*="border-cyan-"],
[class*="border-pink-"],
[class*="border-emerald-"] {
  border-color: hsl(var(--primary) / .26) !important;
}

[class*="from-orange-"],
[class*="from-yellow-"],
[class*="from-purple-"],
[class*="from-blue-"],
[class*="from-sky-"],
[class*="from-cyan-"],
[class*="from-pink-"],
[class*="from-emerald-"] {
  --tw-gradient-from: hsl(var(--primary) / .12) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[class*="via-orange-"],
[class*="via-yellow-"],
[class*="via-purple-"],
[class*="via-blue-"],
[class*="via-sky-"],
[class*="via-cyan-"],
[class*="via-pink-"],
[class*="via-emerald-"] {
  --tw-gradient-via: hsl(var(--primary) / .08) var(--tw-gradient-via-position) !important;
}

[class*="to-orange-"],
[class*="to-yellow-"],
[class*="to-purple-"],
[class*="to-blue-"],
[class*="to-sky-"],
[class*="to-cyan-"],
[class*="to-pink-"],
[class*="to-emerald-"] {
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position) !important;
}

/* Desktop menu: improve dense top-nav fit and dropdown readability. */
nav {
  max-width: min(96rem, calc(100vw - 1.25rem)) !important;
}

nav a {
  text-decoration: none;
  text-underline-offset: 4px;
}

nav > div > div > div:nth-child(2) > div > a {
  min-height: 40px;
  align-items: center;
  letter-spacing: .035em !important;
}

nav > div > div > div:nth-child(2) > div > div > div {
  min-width: 230px;
}

nav > div > div > div:nth-child(2) > div > div a {
  line-height: 1.25;
}

@media (min-width: 1280px) and (max-width: 1440px) {
  nav > div > div > div:nth-child(2) > div > a {
    padding-left: .4rem !important;
    padding-right: .4rem !important;
    font-size: 10px !important;
  }

  nav > div > div > div:nth-child(3) a {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    font-size: 10px !important;
  }
}

/* Buttons: keep long trading CTAs readable on Safari/Chrome mobile. */
a[class*="rounded-full"],
button[class*="rounded-full"],
a[class*="rounded-xl"],
button[class*="rounded-xl"] {
  min-width: 0;
}

@media (max-width: 640px) {
  main {
    overflow-x: clip;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] {
    box-sizing: border-box;
    height: 100vh !important;
    min-height: 100vh !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] > video {
    object-position: center top !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] > div[class*="relative"][class*="z-10"][class*="min-h-screen"] {
    box-sizing: border-box;
    min-height: calc(100vh - 100px) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: clamp(4.5rem, 11vh, 6rem) !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] h1 {
    font-size: clamp(2.35rem, 13vw, 3.25rem) !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] p {
    max-width: min(20rem, calc(100vw - 2rem)) !important;
    margin-top: .75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1rem, 4.6vw, 1.125rem) !important;
    line-height: 1.35 !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] p + div {
    margin-top: 1rem !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] a[href*="open-live-account"] {
    width: min(12.5rem, calc(100vw - 3rem)) !important;
    max-width: min(12.5rem, calc(100vw - 3rem)) !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    font-size: .75rem !important;
    line-height: 1 !important;
  }

  #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] > div:last-child {
    height: 3.5rem !important;
  }

  div[class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] {
    right: .75rem !important;
    bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
  }

  div[class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] > button[aria-label="Open support chat"] {
    width: 3.25rem !important;
    height: 3.25rem !important;
    border-width: 1px !important;
  }

  div[class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] > div {
    width: min(23rem, calc(100vw - 1.5rem)) !important;
    height: min(31rem, calc(100vh - 1.5rem)) !important;
    height: min(31rem, calc(100svh - 1.5rem)) !important;
  }

  @supports (height: 100svh) {
    #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] {
      height: 100svh !important;
      min-height: 100svh !important;
    }

    #root section[class*="-mt-[100px]"][class*="pt-[100px]"][class*="min-h-screen"] > div[class*="relative"][class*="z-10"][class*="min-h-screen"] {
      min-height: calc(100svh - 100px) !important;
      padding-bottom: clamp(4.5rem, 11svh, 6rem) !important;
    }
  }

  main h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  main h1.text-5xl,
  main h1[class*="text-5xl"] {
    font-size: clamp(2.25rem, 10.5vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  a[class*="tracking-widest"],
  button[class*="tracking-widest"] {
    white-space: normal !important;
    text-align: center;
    line-height: 1.15 !important;
  }

  a[class*=" h-14"],
  button[class*=" h-14"],
  a[class*=" h-16"],
  button[class*=" h-16"] {
    height: auto !important;
    min-height: 3rem;
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
  }

  .flex.gap-4 {
    flex-wrap: wrap;
  }

  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] > [class*="grid-cols-5"] {
    min-width: 580px;
  }

  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] > [class*="grid-cols-6"] {
    min-width: 680px;
  }

  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] > [class*="grid-cols-7"] {
    min-width: 760px;
  }

  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] > [class*="grid-cols-5"],
  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] > [class*="grid-cols-6"],
  main [class*="bg-[#0D0D0D]"][class*="rounded-3xl"][class*="overflow-hidden"] > [class*="grid-cols-7"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  main [class*="justify-between"] {
    min-width: 0;
  }

  main [class*="justify-between"] > [class*="flex"][class*="gap-2"] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  main [class*="justify-between"][class*="mb-6"] {
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start;
  }

  form {
    max-width: calc(100vw - 2rem) !important;
    overflow-x: hidden;
  }
}

@media (max-width: 1279px) {
  nav > div:nth-child(2) {
    max-height: calc(100vh - 112px) !important;
    max-height: calc(100dvh - 112px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  nav > div:nth-child(2) > div {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

@supports not (overflow: clip) {
  @media (max-width: 640px) {
    main {
      overflow-x: hidden;
    }
  }
}

/* Homepage generated ticker cells after live binding. */
.lm-live-price {
  font-variant-numeric: tabular-nums;
}

.lm-live-up {
  color: hsl(var(--primary)) !important;
}

.lm-live-down {
  color: #f87171 !important;
}

.lm-live-flat {
  color: #9ca3af !important;
}

/* Trading cards: keep compact stock/index badges from overflowing fixed squares. */
main a[href*="/trading/stocks/"] .w-9.h-9,
main a[href*="/trading/indices/"] .w-9.h-9 {
  overflow: hidden;
  text-align: center;
  font-size: clamp(8px, 1.9vw, 11px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

main .lr-card-price,
main .lr-card-live {
  flex-shrink: 0;
}