/* VidaMarkets host-shell globals. Loaded for product 7 by layout.tsx via the
   neutral /global.css path (staged by CUSTOMER=vidamarkets). Layers brand
   overrides over the base globals. */

@import url('../base/global.css');

/* Radix's scroll lock (via vaul) offsets body by a scrollbar width that
   `scrollbar-gutter: stable` never reclaims, insetting the page. Cf. PLA-3306. */
body[data-brand='vidamarkets'][data-scroll-locked] {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* The reserved gutter has no scrollbar in it, so the canvas paints it — and the
   canvas takes body's colour unless html has its own. Give it the page colour. */
html.light:has(body[data-brand='vidamarkets']) {
  background-color: #d6f5ea;
}
html.dark:has(body[data-brand='vidamarkets']) {
  background-color: #141e1a;
}

/* Dim it with the sheet, keyed on the overlay's own open/closed state. Eased
   like vaul's overlay (index.js:612) but slower, so the gutter trails it. */
html:has(body[data-brand='vidamarkets']) {
  transition: background-color 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}
html.light:has(.trade-form-sheet__overlay[data-state='open']) {
  background-color: #768781; /* #d6f5ea under the overlay's 45% black */
}
html.dark:has(.trade-form-sheet__overlay[data-state='open']) {
  background-color: #0b110e; /* #141e1a under the overlay's 45% black */
}

/* Shell background tokens. The Next app shell (body, shell cards) paints with
   the HSL --background and --card tokens from global.css — a SEPARATE system
   from the widget theme colour tokens. These are DARK-theme values, so scope
   them to dark only: `.dark` is set on <html> (by app-loader.tsx) and the brand
   is on <body>, so `.dark [data-brand='vidamarkets']` = this brand in dark mode.
   Light mode falls back to the base light palette. */
.dark [data-brand='vidamarkets'] {
  --background: 156 20% 10%; /* #141E1A — page bg behind everything */
  --card: 150 17% 5%; /* #0a0e0c — shell cards (near-black, recessed) */

  /* Primary — the shell accent (Sign Up button, etc.). Base is purple
     (270 100% 71%, #b56bff); override to the vidamarkets green. */
  --primary: 158 40% 39%; /* #3B8B6E */
  --primary-foreground: 0 0% 100%; /* white text on the green button */
}

/* Light-mode shell tokens — DIFFERENT palette from dark, sampled from the light
   reference: soft mint page, white cards, brighter/more-saturated green accent.
   Values approximate — tweak freely. */
.light [data-brand='vidamarkets'] {
  --background: 159 61% 90%; /* #D6F5EA mint page bg (lighter sibling of dark) */
  --card: 0 0% 100%; /* #ffffff white cards */
  --primary: 142 76% 36%; /* ~#16a34a bright green accent (Sign Up, etc.) */
  --primary-foreground: 0 0% 100%; /* white text on the green button */
}

/* Header CTA colours — theme-independent, defined in this shell layer so they're
   correct at first paint (the widget token sheet loads later). */
[data-brand='vidamarkets'] {
  --vm-cta-bg: #3b8b6e;
  --vm-cta-bg-hover: #45a184;
  --vm-login-bg: rgba(255, 255, 255, 0.15);
  --vm-login-bg-hover: rgba(255, 255, 255, 0.25);
  /* LAYOUT.bottomToolbar is false, so drop the 68px reserve from brands/base —
     otherwise mobile leaves a dead gap under the footer. Shell-wide (this
     selector targets <body>), so it also fixes header-layout.css and
     footer-default.css, not just the footer. */
  --bottom-toolbar-height: 0px;
}

/* Uncap .header so the banner is full-bleed; --vm-gutter re-insets content to a
   centred 75rem (1200px) column (PLA-4108). */
[data-brand='vidamarkets'] .header {
  max-width: none;
  --vm-gutter: max(1.5rem, calc((100% - 75rem) / 2 + 1.5rem));
}

/* Brand + search bar — stays DARK in both themes (no theme qualifier), so the
   dark --background/--foreground/--border cascade to the search pill and
   logo/nav/search text. .header__category-bar stays light, separately. */
/* Top category nav (PLA-4113) — matches the "All Markets" pills row below via
   the shared --am-pill-* tokens, so the two bars stay in lockstep. Literal
   fallbacks because this sheet is head-loaded while tokens.css arrives later
   with theme.css, so a bare var() would flash the base square tab first. */
[data-brand='vidamarkets'] .header__category-tab {
  color: var(--am-pill-color);
  border-radius: var(--am-pill-radius, calc(infinity * 1px));
  height: var(--am-pill-height, 1.875rem); /* 30px */
  padding: var(--am-pill-padding, 0.375rem 0.875rem); /* 6px 14px */
  box-sizing: border-box;
  transition:
    background-color 0.2s,
    color 0.2s;
}

/* Restores the base hover color, which our idle-color override above
   otherwise cancels out. */
[data-brand='vidamarkets'] .header__category-tab:hover {
  color: hsl(var(--foreground));
}

/* Gives the pill left padding instead of the base's zero, so the first pill
   isn't flush against the scroll strip's edge. */
[data-brand='vidamarkets'] .header__category-tab:first-child {
  padding-left: var(--am-pill-padding-inline, 0.875rem); /* 14px */
}

[data-brand='vidamarkets'] .header__category-bar {
  padding: 0 1rem 0; /* 12px 16px 24px */
}

[data-brand='vidamarkets'] .header__category-tab--active {
  background-color: var(--am-pill-active-bg);
  color: var(--am-pill-active-color);
}

[data-brand='vidamarkets'] .header__main-bar {
  padding-inline: var(--vm-gutter);
  background-color: var(
    --color-HeaderBarBg
  ); /* dark base = gradient end (fallback) */
  --background: 156 20% 10%; /* search pill → dark */
  --foreground: 216 14% 93%; /* logo / search / nav text → light */
  --border: 214 14% 20%; /* search border → subtle dark */
  --muted-foreground: 0 0% 80%; /* hamburger / mobile-search icon → #CCC */
  --vm-glow-size: 27.03% 203.83%;

  /* Figma glow — green rising from the lower-left over the dark base */
  background-image: radial-gradient(
    var(--vm-glow-size) at 5.56% 151.79%,
    var(--color-HeaderGlow) 0%,
    var(--color-HeaderBarBg) 100%
  );
}

/* Theme toggle — self-contained thumb switch (Figma): a pill track (solid
   white in light, translucent white in dark) with both sun and moon icons
   always visible (the active one white, the inactive one dimmed), and a big
   green circular thumb that slides behind whichever one is active. Replaces
   the shared icon+antd-Switch layout when WIDGETS_CONFIG.themeToggle.variant
   is 'thumbSwitch' (see theme-toggle/ThemeToggle.tsx) — vidamarkets' seed
   config sets it. The structural CSS (track/thumb sizing, icon positions,
   transitions) lives in theme-toggle/theme-toggle.css with neutral
   fallbacks, so any brand opting in gets a working control out of the box;
   this file only overrides the `--theme-toggle-*` color custom properties.

   Colors are local custom properties, NOT var()'d off theme.css's
   --pm-brand-accent/--color-ShowMoreText/--color-ShowMoreBg tokens: theme.css
   is injected at runtime by widgets-loader.ts (THEME_HREF), while this file
   is head-loaded synchronously (layout.tsx's GLOBAL_HREF) — referencing
   theme.css tokens here would risk an unstyled first paint before the widget
   loader runs. Kept as custom properties instead of scattered literals so
   there's one place to change them; the hover ring in theme-toggle.css
   derives from --theme-toggle-thumb via color-mix() rather than duplicating
   the green as a separate literal. */
[data-brand='vidamarkets'] {
  --theme-toggle-thumb: #3b8b6e;
  --theme-toggle-icon: #999999; /* dark-mode default */
  --theme-toggle-icon-active: #ffffff;
  --theme-toggle-track-light: #ffffff;
  --theme-toggle-track-dark: #ffffff1f;
  --theme-toggle-track-dark-hover: #ffffff33;
}

.light [data-brand='vidamarkets'] {
  --theme-toggle-icon: #00000073; /* ~3.35:1 on white — bumped from the spec's #0000005C (~2.25:1) */
}

/* The same control inside the nav menu (PLA-4111): a solid dark track instead of
   the header's translucent white, since it sits on the menu's own dark panel,
   and the idle-icon grey held across both themes. Overrides the same
   --theme-toggle-* API the shared control reads — no structural CSS duplicated —
   and at (0,3,0) it outranks the .light override above. */
[data-brand='vidamarkets'] .side-menu--drawer .header__theme-toggle {
  --theme-toggle-track-light: #353535;
  --theme-toggle-track-dark: #353535;
  --theme-toggle-track-dark-hover: #404040;
  --theme-toggle-icon: #999999;
}

/* Nav menu, shell layer (PLA-4111). The colour skin lives in theme/components.css
   with the --color-Menu* tokens it reads; these two belong here — --vm-gutter is
   declared in this sheet, and the panel is dark in both themes, so the borrowed
   Log In button stays white rather than following the shell's per-theme
   --foreground. */
[data-brand='vidamarkets'] .side-menu {
  --side-menu-dropdown-inset: var(--vm-gutter);
  --vm-login-text: #ffffff;
}

.dark [data-brand='vidamarkets'] .header__main-bar {
  --vm-glow-size: 132.61% 203.92%; /* dark widens the glow */
}

[data-brand='vidamarkets'] .header__category-bar {
  padding-inline: var(--vm-gutter);
}
[data-brand='vidamarkets'] .header__categories {
  max-width: none;
  margin: 0;
}

[data-brand='vidamarkets']
  :is(.header__right-section, .side-menu__stats)
  .wc-statistic {
  flex-direction: row;
  gap: 0.5rem;
}

/* Explicit fill (not var(--primary)) — Ant's .ant-btn-color-primary outranks the
   base hsl(var(--primary)); brand specificity + the --vm-cta-* tokens settle it.
   The .side-menu selectors reuse the same CTA treatment for the mobile nav menu's
   Deposit / Sign Up buttons, which render outside the header (antd portals the
   drawer to <body>) — same brand tokens, no second palette. */
[data-brand='vidamarkets']
  :is(.header__main-bar, .side-menu)
  :is(.header__deposit-button, .header__auth-button--login) {
  border: 0;
  box-shadow: none;
  border-radius: 10rem;
  background: var(--vm-cta-bg);
  color: hsl(var(--primary-foreground));
  transition: background-color 0.18s ease;
}

[data-brand='vidamarkets']
  .header__main-bar
  .header__auth-buttons
  .header__auth-button.header__auth-button--login:hover,
[data-brand='vidamarkets']
  .header__main-bar
  .header__right-section
  .header__deposit-button:hover,
[data-brand='vidamarkets'] .side-menu .header__deposit-button:hover,
[data-brand='vidamarkets']
  .side-menu
  .header__auth-buttons
  .header__auth-button.header__auth-button--login:hover {
  border: 0;
  background: var(--vm-cta-bg-hover);
  color: hsl(var(--primary-foreground));
}

[data-brand='vidamarkets']
  :is(.header__main-bar, .side-menu)
  .header__auth-button--register {
  height: 2.25rem;
  padding: 0 1.25rem;
  border-radius: 10rem;
  background: var(--vm-login-bg);
  /* Fallback, not a declared token: a custom property substitutes var() where it
     is DECLARED, so declaring --vm-login-text: hsl(var(--foreground)) up on
     [data-brand] would resolve against <body> and inherit down already-computed,
     ignoring the --foreground the header bar pins for itself. As a fallback it
     resolves here on the button instead. The menu overrides the token outright. */
  color: var(--vm-login-text, hsl(var(--foreground)));
  transition: background-color 0.18s ease;
}

[data-brand='vidamarkets']
  :is(.header__main-bar, .side-menu)
  .header__auth-buttons
  .header__auth-button.header__auth-button--register:hover {
  border: 0;
  background: var(--vm-login-bg-hover);
  color: var(--vm-login-text, hsl(var(--foreground)));
  opacity: 1;
}

/* The wider logo + row-layout balance overflow the bar sooner, so the mobile
   layout engages at 950px (the shared header-main-bar.css max-width:640px block
   stays in effect for other brands). Both auth states collapse to logo + search
   + hamburger; guests reach Log In / Sign Up via the menu. */
@media (max-width: 950px) {
  /* Scoped to the bar, not the class: the nav menu reuses
     .header__deposit-button for its own CTA and renders at exactly these widths. */
  [data-brand='vidamarkets'] .header__nav-items,
  [data-brand='vidamarkets'] .header__main-bar .header__deposit-button,
  [data-brand='vidamarkets'] .header__logged-in-only,
  [data-brand='vidamarkets'] .header__right-section {
    display: none;
  }

  [data-brand='vidamarkets'] .header__main-bar {
    flex-wrap: wrap;
    gap: 0;
  }

  [data-brand='vidamarkets'] .header__mobile-icons {
    display: flex;
  }
  [data-brand='vidamarkets'] .header__mobile-icons .header__icon-button {
    color: hsl(var(--muted-foreground));
  }

  /* 10px from the search icon per design; the row's own gap is 16px. */
  [data-brand='vidamarkets'] .header__mobile-icons .header__language {
    margin-inline-start: -0.375rem; /* 16px → 10px */
  }

  [data-brand='vidamarkets'] .header__search-section {
    display: none;
    flex-basis: 100%;
    max-width: none;
    margin: 0;
    order: 3;
  }
  [data-brand='vidamarkets'] .header__search-section--open {
    display: block;
    padding-top: 0.5rem;
  }
}

@media (max-width: 640px) {
  [data-brand='vidamarkets'] .header__logo-img {
    height: 1.0625rem; /* 17px */
  }
}

/* Footer — one green→black gradient band. Only --footer-dark-bg does real
   work here (the contrast region's own fill); colors are pinned (not theme
   tokens) since the band is always dark in both themes. */
[data-brand='vidamarkets'] .footer-rich {
  --footer-dark-bg: transparent;
  --footer-text: #ffffff;
  --footer-divider: #ffffff33;
  --footer-dark-text: #ffffff;
  --footer-dark-divider: #ffffff33;
  /* Glow radii live in a variable so the mobile override swaps just the size,
     not the whole gradient (same trick as the header's --vm-glow-size). 60%
     wide keeps it a centred blob instead of a full-width wash. */
  --vm-footer-glow-size: 60% 100%;
  background-color: #0f0f0f;
  background-image: radial-gradient(
    var(--vm-footer-glow-size) at 50% 0%,
    #2b6550 0%,
    #0f0f0f 100%
  );
}

/* Grey links against white column titles. Set per-element, not on the tokens —
   those also paint the titles and legal links. */
[data-brand='vidamarkets'] .footer-rich__menu-link,
[data-brand='vidamarkets'] .footer-rich__copyright {
  color: #b3b3b3;
}

/* Horizontal layout only. The shared sheet stacks the row at 850px and the menu
   at 640px, and these [data-brand] rules (0,2,0) would out-specify those mobile
   rules from outside a media query — zeroing the stack gap (logo flush against
   the columns) and turning the 80px column gap into 80px of dead vertical space.
   Above the breakpoint the shared spacing is what we want, so gate on it. */
@media (min-width: 851px) {
  /* Logo left, columns right: push them apart instead of the shared 40px gap. */
  [data-brand='vidamarkets'] .footer-rich__row {
    display: flex;
    justify-content: space-between;
    gap: 0;
  }

  /* The shared rule makes this flex:1 0 0, so it eats every pixel left of it and
     the first column ends up flush against the logo — space-between above has
     nothing to distribute. Hug the columns instead, and let the gap here space
     them from each other. Same for the columns' own flex:1. */
  [data-brand='vidamarkets'] .footer-rich__menu {
    flex: 0 1 auto;
    gap: 5rem; /* 80px between the two columns */
  }
  [data-brand='vidamarkets'] .footer-rich__menu-column {
    flex: 0 1 auto;
  }
}

/* Links separated by spacing, not rules. The shared gap comes from padding +
   margin around the border, so restate it as one margin. :last-child covers
   the mobile block, which re-adds the border when columns stack. */
[data-brand='vidamarkets'] .footer-rich__menu-item,
[data-brand='vidamarkets'] .footer-rich__menu-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.75rem; /* 12px */
}

/* Wider than the shared 6px so the heading reads apart from its links; lighter
   than the shared 600. */
[data-brand='vidamarkets'] .footer-rich__menu-title {
  margin-bottom: 0.75rem; /* 12px */
  font-weight: 500;
}

/* The shared footer only animates opacity on hover, so Antd's global `a:hover`
   tints these blue. Pin the color and cancel the base's opacity: 0.6 (same
   fix as Investing) — otherwise white at 60% over the dark band composites
   darker than the resting grey instead of reading as white. */
[data-brand='vidamarkets'] .footer-rich__menu-link:hover,
[data-brand='vidamarkets'] .footer-rich__legal-link:hover {
  color: var(--footer-text);
  opacity: 1;
}

@media (max-width: 640px) {
  /* Columns stack here, so the band gets tall and narrow: widen the glow to the
     full width so it spans the footer instead of running down it as a thin
     column. */
  [data-brand='vidamarkets'] .footer-rich {
    --vm-footer-glow-size: 100% 90%;
  }

  /* Stacked column groups read as separate blocks (Figma), so restore a gap —
     the shared mobile rule zeroes it, which runs "Resources" straight on from
     the previous list with only the last link's own 20px margin between them. */
  [data-brand='vidamarkets'] .footer-rich__menu {
    gap: 2rem; /* 32px */
  }

  /* More room above the stacked columns; tighter below, since the last link's
     own 20px margin already spaces them off the divider. */
  [data-brand='vidamarkets'] .footer-rich__region--surface {
    padding-top: 3.75rem; /* 60px */
    padding-bottom: 0.75rem; /* 12px */
  }

  /* Divider sits straight under the columns; the bottom keeps the shared value. */
  [data-brand='vidamarkets'] .footer-rich__region--contrast {
    padding-top: 0;
  }
}

[data-brand='vidamarkets'] {
  --vm-bottom-nav-bg: #191919;
}
.dark [data-brand='vidamarkets'] {
  --vm-bottom-nav-bg: #141e1a;
}

[data-brand='vidamarkets'] .bottom-toolbar {
  background-color: var(--vm-bottom-nav-bg);
  border-top: none;

  --muted-foreground: 0 0% 60%;
  --foreground: 158 33% 48%;
}

[data-brand='vidamarkets'] .bottom-toolbar__item {
  gap: 6px;
}

@media (max-width: 950px) {
  [data-brand='vidamarkets'] .bottom-toolbar {
    display: flex;
  }

  [data-brand='vidamarkets'] .header__mobile-icons .header__menu-trigger {
    display: none;
  }

  [data-brand='vidamarkets'] .header-layout__content {
    padding-bottom: var(--bottom-toolbar-height);
  }
}

/* Tighter than the shared 24px, so the slide and trending columns sit closer. */
[data-brand='vidamarkets'] .lobby__top-row {
  gap: 16px;
}

/* Same basis as trending so the two shrink together instead of the slide
   absorbing every pixel lost. */
[data-brand='vidamarkets'] .lobby__top-row > *:first-child {
  flex: 1 1 400px;
}

/* page.module.css caps every div inside trending at 400px, which pins the
   column open regardless of what the flex item does. */
[data-brand='vidamarkets'] .lobby__trending div {
  max-width: none;
}

/* Proportional digits remeasure the counter on every slide, nudging the arrows. */
[data-brand='vidamarkets'] .pm-carousel-counter {
  font-variant-numeric: tabular-nums;
}

/* Antd has no ConfigProvider theme here, so its focus ring paints off stock
   tokens rather than the brand's. */
[data-brand='vidamarkets'] .header__auth-button:focus-visible,
[data-brand='vidamarkets'] .header__deposit-button:focus-visible {
  outline: 2px solid var(--vm-cta-bg);
  outline-offset: 2px;
  box-shadow: none;
}

/* antd puts the dialog 100px from the top; centre it like the other auth-host brands. */
[data-brand='vidamarkets'] .pm-auth-modal-host .ant-modal-wrap {
  display: flex;
}

[data-brand='vidamarkets'] .pm-auth-modal-host .ant-modal {
  top: 0;
  /* auto margins centre it, and collapse to 0 when it's taller than the viewport */
  margin: auto;
  padding-bottom: 0;
}