/* VeeSave UI Contract: vs-chrome.css
   Ownership: Marketing (veesave.com)
   Scope: scroll host + chrome shell only
*/
:root{
  --vs-yellow:#EFE521;
  --vs-scrollbar-width: 14px;
  --vs-scrollbar-track: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.85));
}

html, body{
  height:100%;
  margin:0;
  background:#000;
  overflow:hidden; /* browser scrollbar OFF */
}

body{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

#vsHeaderMount,
#vsFooterMount{
  flex:0 0 auto;
}

/* Primary: marketing pages (HIW uses <main class="vs-main  vs-main-shell">) */
main.vs-main,
main.vs-main-shell,
.vs-main-shell{
  flex:1 1 auto;
  min-height:0;              /* allow flex child to scroll */
  overflow:auto;             /* internal scroll host */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  scrollbar-gutter: stable;  /* stable gutter so header/footer don't shift */
}

/* Secondary: optional wrapper support (if used by any marketing page) */
.vs-mkt-scroll-shell{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.vs-mkt-scroll-shell > main{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  scrollbar-gutter: stable;
}

/* WebKit/Blink scrollbar */
main.vs-main::-webkit-scrollbar,
main.vs-main-shell::-webkit-scrollbar,
.vs-main-shell::-webkit-scrollbar,
.vs-mkt-scroll-shell > main::-webkit-scrollbar{
  width: var(--vs-scrollbar-width);
}
main.vs-main::-webkit-scrollbar-track,
main.vs-main-shell::-webkit-scrollbar-track,
.vs-main-shell::-webkit-scrollbar-track,
.vs-mkt-scroll-shell > main::-webkit-scrollbar-track{
  background: var(--vs-scrollbar-track);
}
main.vs-main::-webkit-scrollbar-thumb,
main.vs-main-shell::-webkit-scrollbar-thumb,
.vs-main-shell::-webkit-scrollbar-thumb,
.vs-mkt-scroll-shell > main::-webkit-scrollbar-thumb{
  background: var(--vs-yellow);
  border-radius: 999px;
  border: 4px solid rgba(0,0,0,0.85);
}

/* Firefox */
main.vs-main,
main.vs-main-shell,
.vs-main-shell,
.vs-mkt-scroll-shell > main{
  scrollbar-width: thin;
  scrollbar-color: var(--vs-yellow) rgba(0,0,0,0.85);
}

/* VS-HF-CONTRACT-007: BEGIN */
/*
  VS-HF-CONTRACT-007
  - CLEAN: remove accidental '...' corruption and any debug outlines.
  - Pills: enforce equal-width pill sets (longest label wins) for nav.vs-pill-group across both sites.
  - Gutter: prevent root gutter reservation; keep gutter only on actual scroll host; keep track transparent.
  - HF: force header/footer backgrounds to black/near-black (override bg-neutral-950 classes).
*/

html { scrollbar-gutter: auto !important; }
body { background: #000 !important; }

/* Scroll host gutter (staging uses .vs-scroll-shell, marketing uses .vs-mkt-scroll-shell > main) */
.vs-scroll-shell { scrollbar-gutter: stable !important; }
.vs-mkt-scroll-shell > main { scrollbar-gutter: stable !important; }

/* Scrollbar track should not paint an extra strip */
::-webkit-scrollbar-track { background: transparent !important; }

/* Pill set law (max specificity) */
nav.vs-pill-group, nav.vs-pill-set, nav.vs-pill-set.vs-pill-group {
  display: inline-grid !important;
  grid-auto-flow: row;
  justify-items: stretch;
  width: max-content !important;
  gap: 10px;
}
nav.vs-pill-group > .vs-pill, nav.vs-pill-set > .vs-pill, nav.vs-pill-set.vs-pill-group > .vs-pill {
  display: block !important;
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100% !important;
  white-space: nowrap !important;
}

/* HF background */
header, footer { background-color: rgba(0,0,0,0.98) !important; }
/* VS-HF-CONTRACT-007: END */

/* VS-MKT-CHROME-015: BEGIN */
/*
  VS-MKT-CHROME-015
  - Ensure marketing scroll shell participates in body flex so footer isn't pushed offscreen.
*/
.vs-mkt-scroll-shell{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#vsFooterMount{ flex:0 0 auto !important; }
#vsHeaderMount{ flex:0 0 auto !important; }
/* VS-MKT-CHROME-015: END */

/* VS-MKT-WINDOW-SCROLL-019C: BEGIN */
/* Window scrollbar at far right + transparent gutter */
/* Ensure marketing shell does NOT become inner scroll host */
.vs-mkt-scroll-shell,
.vs-mkt-scroll-shell > main{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
/* Transparent track so gutter doesn't paint */
::-webkit-scrollbar-track{ background: transparent !important; }
/* VS-MKT-WINDOW-SCROLL-019C: END */

/* VS-MKT-WINDOW-SCROLL-023 */

/* Transparent track */
::-webkit-scrollbar-track{ background: transparent !important; }


/* VS_SCROLLBAR_CUSTOM_SHELL_V001
   CUSTOM scrollbar, single scroll owner.
   - Browser scroll OFF
   - HIW: main.vs-main-shell spans viewport so scrollbar is flush-right
   - Scrollbar styling only on scroll owners (not body)
*/

.vs-scroll-shell::-webkit-scrollbar,
main.vs-main-shell::-webkit-scrollbar,
.vs-mkt-scroll-shell > main::-webkit-scrollbar{
  width: 12px !important;
}

.vs-scroll-shell::-webkit-scrollbar-track,
main.vs-main-shell::-webkit-scrollbar-track,
.vs-mkt-scroll-shell > main::-webkit-scrollbar-track{
  background: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.00) 100%) !important;
}

.vs-scroll-shell::-webkit-scrollbar-thumb,
main.vs-main-shell::-webkit-scrollbar-thumb,
.vs-mkt-scroll-shell > main::-webkit-scrollbar-thumb{
  background-color: #EFE521 !important;
  border-radius: 9999px !important;
  border: 0 !important;
  background-clip: border-box !important;
}
VS_SCROLLBAR_CUSTOM_SHELL_V001 */


/* VS_MKT_LANDING_SCROLL_OWNER_V001
   Canonical shell behavior for marketing landing:
   - Browser scroll OFF
   - Single scroll owner: .vs-mkt-scroll-shell
   - Custom scrollbar only on the scroll owner
*/

/* Apply custom scrollbar only to the marketing scroll owner */
.vs-mkt-scroll-shell::-webkit-scrollbar{ width: 12px !important; }
.vs-mkt-scroll-shell::-webkit-scrollbar-track{
  background: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.00) 100%) !important;
}
.vs-mkt-scroll-shell::-webkit-scrollbar-thumb{
  background-color: #EFE521 !important;
  border-radius: 9999px !important;
  border: 0 !important;
  background-clip: border-box !important;
}
VS_MKT_LANDING_SCROLL_OWNER_V001 */


/* VS_HIW_SCROLLBAR_STANDARD_V001
   Single global scrollbar standard (HIW):
   - Browser scroll OFF
   - Scroll owners:
     - .vs-scroll-shell (global shell)
     - .vs-mkt-scroll-shell (marketing wrapper)
   - Custom yellow scrollbar, width 12px
*/
html, body{
  height: 100% !important;
  overflow: hidden !important;
}

.vs-scroll-shell,
.vs-mkt-scroll-shell{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin;
  scrollbar-color: #EFE521 rgba(0,0,0,0);
}

.vs-scroll-shell::-webkit-scrollbar,
.vs-mkt-scroll-shell::-webkit-scrollbar{
  width: 12px !important;
}

.vs-scroll-shell::-webkit-scrollbar-track,
.vs-mkt-scroll-shell::-webkit-scrollbar-track{
  background: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.00) 100%) !important;
}

.vs-scroll-shell::-webkit-scrollbar-thumb,
.vs-mkt-scroll-shell::-webkit-scrollbar-thumb{
  background-color: #EFE521 !important;
  border-radius: 9999px !important;
  border: 0 !important;
  background-clip: border-box !important;
}
VS_HIW_SCROLLBAR_STANDARD_V001 */


/* VS_SCROLL_GUTTER_STABLE_V001
   Reserve scrollbar gutter permanently to prevent horizontal layout shift
   when content height changes (scrollbar appears/disappears).
   Apply ONLY to canonical scroll owner.
*/
.__VS_SCROLL_OWNER__,
.vs-scroll-owner,
.vs-scroll-owner.__VS_SCROLL_OWNER__{
  overflow-y: scroll !important;        /* always reserve scrollbar space */
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;  /* modern browsers */
}

/* Some browsers support stable both-edges; harmless elsewhere */
@supports (scrollbar-gutter: stable both-edges){
  .__VS_SCROLL_OWNER__,
  .vs-scroll-owner,
  .vs-scroll-owner.__VS_SCROLL_OWNER__{
    scrollbar-gutter: stable both-edges !important;
  }
}

/* VS_SCROLL_GUTTER_STABLE_V002
   Keep scrollbar space stable, but do NOT force a scrollbar when no overflow.
   (This avoids arrows/no-thumb look on Windows when content fits.)
*/
.__VS_SCROLL_OWNER__,
.vs-scroll-owner,
.vs-scroll-owner.__VS_SCROLL_OWNER__{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

@supports (scrollbar-gutter: stable both-edges){
  .__VS_SCROLL_OWNER__,
  .vs-scroll-owner,
  .vs-scroll-owner.__VS_SCROLL_OWNER__{
    scrollbar-gutter: stable both-edges !important;
  }
}

/* VS_BROWSER_SCROLL_OFF_V001
   Enforce single scroll owner: browser must not scroll.
*/
html, body{
  height: 100% !important;
  overflow: hidden !important;
}

/* VS_INJECTED_FOOTER_STYLE_V001
   Ensures injected/forced footer cannot be hidden or clipped.
*/
footer.vs-injected-footer{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483000 !important;
  background: #000 !important;
}

/* VS_FOOTER_FIXED_STYLE_V001
   Deterministic footer styling for injected footer.
*/
footer.vs-injected-footer{
  background: #000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483000 !important;
}