/**
 * Global responsive overrides for the Bitcoin Grand Reserve Assets static mirror.
 * Loaded after page-embedded styles to unlock mobile/tablet layouts.
 */

/* Unlock desktop-only body constraint that clips subpages without React. */
html, body {
  min-width: 0 !important;
  overflow-x: hidden;
}
@media screen and (max-width: 1199px) {

  /* Promo pages with inline min-width: 128rem */
  [style*="min-width:128rem"],
  [style*="min-width: 128rem"] {
    min-width: 0 !important;
  }
}

/* ── Tablet (768px – 1199px) ── */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #app img,
  #app picture {
    max-width: 100%;
    height: auto;
  }
}

/* ── Mobile (≤ 767px) ── */
@media screen and (max-width: 767px) {
  #app img,
  #app picture {
    max-width: 100%;
    height: auto;
  }

  /* Homepage hero */
  .ssr7809783 {
    height: auto !important;
    min-height: 480px;
    padding: 80px 20px 40px !important;
  }

  .ssr7809785 {
    width: 100% !important;
    flex-direction: column !important;
    gap: 24px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .ssr7809785 .text {
    font-size: 28px !important;
    line-height: 40px !important;
    text-align: center;
  }

  .ssr7809786 img {
    height: auto !important;
    width: 100% !important;
    border-radius: 16px !important;
  }

  /* Homepage scroll sections */
  .ssr7809804,
  .ssr7809805 {
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .ssr7809805 .item {
    width: 100% !important;
    position: static !important;
  }

  .ssr7809805 > .itemVideo {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  .ssr7809805 > .itemVideo > video {
    width: 100% !important;
    height: auto !important;
  }

  .ssr7809807,
  .ssr7809809 > div h3 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .ssr7809808,
  .ssr7809809 > div p {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .ssr7809809 .comSection {
    height: auto !important;
    min-height: auto !important;
    padding: 40px 0;
  }

  .ssr7809809 > div img {
    height: auto !important;
    width: 100% !important;
  }

  /* Homepage card carousel */
  :root {
    --viewport-content: 100% !important;
    --part2-item-width: 85vw !important;
  }

  .part2-card-container {
    padding: 0 20px !important;
  }

  /* Homepage "What else we offer" cards */
  .ssr7809818 {
    position: static !important;
    height: auto !important;
    padding: 0 20px;
  }

  .ssr7809818 .card {
    position: static !important;
    width: 100% !important;
    margin-bottom: 32px;
    flex-direction: column !important;
  }

  .ssr7809818 .card .right-content {
    padding: 20px 0 !important;
  }

  /* Generic: fluid content wrappers (excludes header/nav/drawer) */
  #app section > div:not(.ssr7809543) [class^="ssr"]:not([class*="780955"]):not([class*="781005"]) {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Common 1200px content containers across marketing pages */
  #app [class^="ssr"] {
    max-width: 100vw;
  }

  #app header,
  #app header *,
  #app [class*="7810052"],
  #app [class*="7810053"] {
    max-width: none;
  }
}

/* ── Tablet-specific content adjustments ── */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .ssr7809783 {
    height: auto !important;
    min-height: 560px;
    padding: 100px 40px 60px !important;
  }

  .ssr7809785,
  .ssr7809804,
  .ssr7809805 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .ssr7809805 {
    height: auto !important;
  }

  .ssr7809805 > .itemVideo > video {
    width: 100% !important;
    max-width: 700px;
    height: auto !important;
  }

  .ssr7809807,
  .ssr7809809 > div h3 {
    font-size: 36px !important;
    line-height: 44px !important;
  }
}

/* ── Blue / teal accent → black rebrand ── */
:root {
  --webull-primary: #000000 !important;
  --wb-primary-color: #000000 !important;
  --primary-color: #000000 !important;
}

/* Tampa Bay Rays promo banner — keep original Webull blue */
#app .home-page-root-warp > div:first-child,
#app [class*="7809543"],
#app .ssr20140167 {
  background: #0D71FF !important;
  background-color: #0D71FF !important;
  background-image: none !important;
  color: #ffffff !important;
}

#app .home-page-root-warp > div:first-child .link,
#app .home-page-root-warp > div:first-child a.link,
#app [class*="7809543"] .link,
#app [class*="7809543"] a.link,
#app .ssr20140167 .link {
  display: inline !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  text-decoration: underline !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 4px !important;
  margin-top: 0 !important;
  font-weight: inherit !important;
  border: none !important;
}

/* Light-blue / teal card & section backgrounds */
#app [style*="D5EFFF"],
#app [style*="EFF6FF"],
#app [style*="E6F7FF"],
#app [style*="E8F4FF"],
#app [style*="E6F2FF"],
#app [style*="e6f2ff"],
#app [style*="35FEDA"],
#app [style*="0f71ff"],
#app [style*="0F71FF"],
#app [style*="0d71ff"],
#app [style*="0D71FF"],
#app [style*="081130"],
#app [style*="091130"] {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Navy hero / section backgrounds (#081130 / #091130) */
#app .ssr20140244,
#app [class*="20140244"],
#app .csr79,
body > div .csr79 {
  background-color: #000000 !important;
  background-image: none !important;
}

#app [style*="linear-gradient"][style*="D5EFFF"],
#app [style*="linear-gradient"][style*="EFF6FF"],
#app [style*="linear-gradient"][style*="E6F2FF"],
#app [style*="linear-gradient"][style*="35FEDA"],
#app [style*="linear-gradient"][style*="0D76FF"],
#app [style*="linear-gradient"][style*="0DA2FF"] {
  background-image: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
}

/* Buttons & blue-styled anchors */
#app button[style*="0D71FF"],
#app button[style*="0d71ff"],
#app button[style*="0D86FF"],
#app button[style*="0f71ff"],
#app button[style*="007CFF"],
#app a[style*="0D71FF"],
#app a[style*="0D86FF"],
#app a[style*="007CFF"],
#app a[style*="0f71ff"] {
  background-color: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Header auth button, modal CTAs, carousel CTAs */
#app header button,
#app [class*="40505"],
#app [class*="40181"],
#app [class*="40250"] {
  background-color: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

#app header button:hover,
#app button[class*="primary"]:hover,
#app [class*="40505"]:hover,
#app [class*="40250"]:hover,
#app [class*="40227"]:hover {
  background-color: #333333 !important;
}

/* Blue text links & CTA anchors → black pill buttons */
#app .right-content .link,
#app [class*="40279"] .link,
#app [class*="9466785"] .link,
#app [class*="40261"] a,
#app [class*="40262"] a,
#app [class*="40263"] a,
#app [class*="40264"] a,
#app [class*="40226"] [class*="40227"],
#app [class*="40227"],
#app section[aria-label="Hero Banner"] div > div > div,
#app a[href="stock-trading-mobile.html"],
#app a[href="stock-trading.html"],
#app a[href="trading-investing/options-mobile.html"]:not(footer a),
#app a[href="trading-investing/options.html"]:not(footer a),
#app a[href="trading-investing/etfs-mobile.html"]:not(footer a),
#app a[href="trading-investing/etfs.html"]:not(footer a),
#app a.link:not(.home-page-root-warp .link) {
  display: inline-block !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
}

#app .right-content .link:hover,
#app [class*="40261"] a:hover,
#app [class*="40263"] a:hover,
#app [class*="40264"] a:hover,
#app [class*="40227"]:hover,
#app section[aria-label="Hero Banner"] div > div > div:hover,
#app a[href="stock-trading-mobile.html"]:hover,
#app a[href="trading-investing/options-mobile.html"]:not(footer a):hover,
#app a[href="trading-investing/etfs-mobile.html"]:not(footer a):hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Footer disclaimer / regulatory links — plain inline text, not buttons */
footer [class*="40307"] a,
footer [class*="40308"] a,
footer p a {
  display: inline !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  text-decoration: underline !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  font-weight: inherit !important;
  border: none !important;
  line-height: inherit !important;
}

footer [class*="40307"] a:hover,
footer [class*="40308"] a:hover,
footer p a:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: underline !important;
}

/* Ko-builder promo pages */
#ko-page [style*="background-color:#1658ff"],
#ko-page [style*="background-color: #1658ff"],
#ko-page [style*="background-color:#0D71FF"],
#ko-page [style*="background-color: #0D71FF"],
#ko-page [style*="background-color:#0f71ff"] {
  background-color: #000000 !important;
}

/* Feature cards with light-blue gradient backgrounds */
#app [class*="40274"][style*="E6F2FF"],
#app [class*="40274"][style*="e6f2ff"],
#app [class*="40262"],
#app [class*="40279"] .card_1,
#app [class*="40279"] .card_2,
#app [class*="40279"] .card_3,
#app [style*="2B3858"],
#app [style*="58A5FE"],
#app [style*="0947E0"] {
  background-image: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
  background-color: #1a1a1a !important;
}

/* Carousel dot active state */
.slider_dots .dot.active,
.slider_dots .dot[style*="e6f7ff"],
.slider_dots .dot[style*="E6F7FF"] {
  background-color: #000000 !important;
}

/* SVG fills/strokes that use Webull blue */
#app svg [fill="#0D71FF"],
#app svg [fill="#0D86FF"],
#app svg [fill="#007CFF"],
#app svg [fill="#0d71ff"],
#app svg [fill="#0d86ff"],
#app svg [fill="#1294F7"] {
  fill: #000000 !important;
}

#app svg [stroke="#0D71FF"],
#app svg [stroke="#0D86FF"],
#app svg [stroke="#007CFF"] {
  stroke: #000000 !important;
}

/* Footer: hide empty disclaimer paragraphs left after i18n cleanup */
footer p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Footer: hide platforms / app download block */
footer div:has(> [data-i18n-key="H5_BIZ_COMP_US_0166"]),
footer div:has(> a[data-i18n-key="H5_BIZ_COMP_US_0166"]) {
  display: none !important;
}

/* Footer: hide Apple / Google / desktop download buttons */
footer div:has([data-i18n-key^="H5_BIZ_COMP_DOWNLOAD_"]):not(:has([data-i18n-key^="H5_BIZ_COMP_US_"])),
footer div:has(div.icons):not(:has([data-i18n-key^="H5_BIZ_COMP_US_"])) {
  display: none !important;
}

/* Footer: hide Careers and BrokerCheck links */
footer a[href*="brokercheck.finra"],
footer a[href*="rippling.com"],
footer a:has([data-i18n-key="H5_BIZ_COMP_US_0016"]) {
  display: none !important;
}

/* Footer: hide Follow us on / social icons */
footer div:has([aria-label="Follow us on"]) {
  display: none !important;
}

/* Sticky mobile download banner (sibling after footer) */
.home-page-root-warp > footer + div,
#app div:has([data-i18n-key="H5_US_1540"]):has([data-i18n-key="H5_US_1542"]),
.home-page-root-warp > div:has([data-i18n-key="H5_US_1540"]):has([data-i18n-key="H5_US_1542"]) {
  display: none !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Bitcoin Grand Reserve Assets header logos */
#app header img[alt="BITCOIN GRAND RESERVE ASSETS"],
#app header img[alt="WEBULL"],
header img[alt="BITCOIN GRAND RESERVE ASSETS"],
header img[alt="WEBULL"] {
  height: 24px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}