/* ==========================================================================
   VectorVest Free Stock Analysis - 2026 hero redesign
   Ported from the partner comp: vv-fsa-redesign-2026.html
   --------------------------------------------------------------------------
   Served by the app from ~/Include/, linked from StockAnalysis.Master after
   stockanalysis-styles.css so it can override the legacy hero without that
   file being edited.

   (The card asked for this on //webstorage02/e-reports/newFSAR4/css/. Keeping
   it in the repo means it is version-controlled and deploys with the code
   instead of needing a separate file-share copy. To move it to the share,
   copy the file up and change the <link runat="server" href="~/Include/...">
   in StockAnalysis.Master to the absolute newFSAR4 URL.)

   Everything is scoped to #vv-fsa, or to body:has(#vv-fsa) where a legacy rule
   outside the hero has to be unwound. StockAnalysis.aspx is the only page using
   StockAnalysis.Master, so that gate affects nothing else.

   Section 1 unwinds the old hero. Sections 2-4 are the comp, near-verbatim.
   ========================================================================== */


/* ==========================================================================
   1. Unwind the legacy hero
   --------------------------------------------------------------------------
   The old hero was: a full-bleed navy .blue-bar, a fixed 320px-tall
   blue-bg.png on its .wrapper, a chevron .arrow, and a negative-margin float
   pair (.float-container / .form / .list) faking two columns. The 2026 card
   supplies all of that itself, so every piece is switched off here.
   Several legacy rules use !important, so the overrides below have to as well.
   ========================================================================== */

body:has(#vv-fsa) { background: #eef1f5; }

/* The logo/flags band is #e5e5e5 in the legacy sheet, a slightly darker grey than
   the page behind it, which read as a seam across the top. Match it to the page
   so the header and body are one continuous surface. The logo and flags inside it
   are untouched. */
body:has(#vv-fsa) .gray-bar { background-color: #eef1f5; }

/* Logo above, flags centred beneath it. The markup order is flags-then-logo with
   .flags floated right, so this reorders with flexbox rather than moving any
   markup -- the logo and flag repeater are left exactly as they were.
   The legacy sheet already forces .flags to float:none/centred with !important
   below 535px, which agrees with this, so there is nothing to fight there. */
body:has(#vv-fsa) .gray-bar > .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body:has(#vv-fsa) .gray-bar > .wrapper > .logo {
  order: 1;
  margin: 10px 0 6px;
}

/* Flex with a gap rather than the legacy per-flag margin-left: that margin also
   applied to the FIRST flag, so the row carried a leading 9px that pushed the
   flags off-centre inside their own box (7 flags = 7 gaps instead of 6).
   Flex also drops the whitespace between the repeater's <input>s, so the
   spacing is exactly even. */
body:has(#vv-fsa) .gray-bar > .wrapper > .flags {
  order: 2;
  float: none;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 0 0 4px;
}

body:has(#vv-fsa) .gray-bar > .wrapper > .flags input[type="image"] {
  margin: 0;
}

/* float-clearing div, redundant once the row is a flex column */
body:has(#vv-fsa) .gray-bar > .wrapper > .clear { display: none; }

/* The device graphic (.products) floated right only because the testimonial
   (.quote) floated left beside it. With the testimonial removed it would sit
   pinned to the right on its own, so centre it. */
body:has(#vv-fsa) .products {
  float: none;
  width: auto;
  margin: 25px auto;
}

body:has(#vv-fsa) .blue-bar {
  background: none;
  background-color: transparent;
}

/* .wrapper caps at 880px; the comp's card is 900 wide */
body:has(#vv-fsa) .blue-bar > .wrapper {
  background: none;
  min-height: 0;
  max-width: none;
}

body:has(#vv-fsa) .blue-bar > .wrapper > .arrow { display: none; }

body:has(#vv-fsa) .float-container {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* .form floated right at a fixed 320px; .list cleared it with margin-right:330px */
#vv-fsa .vva-widget {
  display: contents;
  float: none;
  width: auto;
  margin: 0;
}

#vv-fsa .vva-vp { margin-right: 0; }


/* ==========================================================================
   2. Hero card
   ========================================================================== */

#vv-fsa *,
#vv-fsa *::before,
#vv-fsa *::after { box-sizing: border-box; }

/* The comp's 64px bottom padding assumed the footer came straight after. Here the
   stock-info band and the reviews widget follow, so it is trimmed -- see the
   stock-info rule in section 5. */
#vv-fsa {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  color: #0d1f3c;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  -webkit-font-smoothing: antialiased;
}

/* the space below the separator rule, before the reviews widget */
body:has(#vv-fsa) .trustpilot { margin-top: 32px; }

#vv-fsa .vva-hero {
  text-align: center;
  padding: 52px 44px;
  background-color: #0a1628;
  background-image:
    linear-gradient(140deg, rgba(10, 22, 40, 0.72) 0%, rgba(13, 33, 71, 0.72) 50%, rgba(17, 42, 90, 0.72) 100%),
    url("https://www.vectorvest.com/e-reports/newFSAR4/css/blue-bg.png");
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  border-radius: 20px;
  color: #fff;
  margin: 32px 0; /* the bottom half is the space above the separator rule */
  position: relative;
  overflow: hidden;
}

#vv-fsa .vva-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(254, 190, 43, 0.13) 0%, transparent 70%);
  pointer-events: none;
}

#vv-fsa .vva-hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 192, 100, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Flex column so the subhead (which markup-wise sits inside stockLookupWidget,
   alongside the fields) can be lifted above the value-prop panel. */
#vv-fsa .vva-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#vv-fsa .vva-eyebrow {
  order: 1;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #febe2b;
  margin-bottom: 20px;
  border: 1px solid rgba(254, 190, 43, 0.35);
  padding: 7px 20px;
  border-radius: 100px;
}

/* the headline moved in from the gray bar; unwind its legacy float/size */
#vv-fsa .headline {
  order: 2;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* 700, not the comp's stated 900: the comp only loads Inter 400/500/700, so its
   "font-weight: 900" silently falls back to 700 -- 700 is what the approved
   design actually renders. We load the same three weights now, but the value is
   set explicitly here so it cannot drift if a 900 face is ever added. */
#vv-fsa .headline h1 {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  font-size: 52px !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 16px;
  padding: 0;
  text-transform: none;
}

/* The comp golds the first word. lblFreeStockAnalysis is one localized string,
   so this activates only once the resource value reads <em>Free</em> Stock
   Analysis. Until then the headline renders all-white, which is the right
   fallback -- see the note in the PR. */
#vv-fsa .headline h1 em {
  font-style: normal;
  color: #febe2b;
}

#vv-fsa .vva-subhead {
  order: 3;
  display: block;
  width: 100%;
  font-size: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 36px;
  line-height: 1.55;
}


/* ==========================================================================
   3. Value-prop panel
   --------------------------------------------------------------------------
   Drawn as two seamless halves that read as the comp's single panel:
   .vva-vp (title + lead + bullets, from StockAnalysisContainer) and .vva-form
   (the fields, from StockLookupWidget). They share a background and border and
   have their facing edges opened, so the seam is invisible.
   ========================================================================== */

#vv-fsa .vva-vp,
#vv-fsa .vva-form {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

#vv-fsa .vva-vp {
  order: 4;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 34px 38px 0;
  color: #fff;
  font-size: 19px !important; /* legacy .list sets 2.0rem !important */
}

#vv-fsa .vva-form {
  order: 5;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 0 38px 34px;
}

#vv-fsa .vva-vp-title {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  font-size: 28px !important; /* legacy .list-title sets 3.8rem !important */
  font-weight: 700; /* see the headline note -- the comp renders 700, not 900 */
  color: #febe2b;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

#vv-fsa .vva-vp-lead {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin-bottom: 24px;
}

#vv-fsa .vva-bullets {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  font-size: inherit;
}

#vv-fsa .vva-bullets li {
  position: relative;
  padding: 0 0 16px 44px;
  margin: 0;
  font-size: 19px;
  color: #fff;
  line-height: 1.45;
  background: none; /* legacy .bullet-list li hung the green-check sprite here */
  list-style: none;
}

#vv-fsa .vva-bullets li:last-child { padding-bottom: 0; }

#vv-fsa .vva-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #00c064;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}


/* ==========================================================================
   4. Form controls
   ========================================================================== */

#vv-fsa .vva-input {
  display: block;
  width: 100% !important; /* legacy .form input[type=text] sets 96% */
  padding: 16px 18px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 18px;
  font-family: inherit;
  font-weight: 400;
  color: #0d1f3c;
  background: #fff;
  margin: 0 0 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#vv-fsa .vva-input:focus {
  outline: none;
  border-color: #00c064;
  box-shadow: 0 0 0 3px rgba(0, 192, 100, 0.15);
}

#vv-fsa .vva-input::placeholder {
  font-style: italic;
  color: #8ea6c2;
}

/* The green pill lives on the <label> wrapper, not on the input, so the arrow can
   be a pseudo-element sitting immediately beside the label text -- an
   <input type="submit"> cannot carry ::after. The input inside is transparent and
   auto-width; the label keeps the whole pill clickable. */
#vv-fsa .vva-submit-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(180deg, #0060DD 0%, #004AAB 100%);
  border-radius: 10px;
  padding: 18px 24px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

#vv-fsa .vva-submit-wrap::after {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#vv-fsa .vva-submit-wrap:hover {
  background: linear-gradient(180deg, #004AAB 0%, #003A86 100%); /* legacy .btnSubmit:hover went lime */
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 96, 221, 0.32);
}

/* btnSubmit's own onclick disables the input on click, so mirror that on the pill */
#vv-fsa .vva-submit-wrap:has(.vva-submit:disabled) {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

#vv-fsa .vva-submit {
  width: auto;
  max-width: 100%;
  background: none;
  border: none;
  padding: 0 !important; /* legacy .btnSubmit padding is !important */
  margin: 0;
  border-radius: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}

#vv-fsa .vva-submit:disabled { cursor: default; }

/* --- email opt-in: regulatory groups only, not covered by the comp --------- */

#vv-fsa .vva-optin { display: none; }

#vv-fsa .vva-optin:has(input[type="radio"]) {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 14px;
}

#vv-fsa .vva-optin-head { display: block; font-weight: 700; color: #fff; margin-bottom: 4px; }
#vv-fsa .vva-optin-text { display: block; margin-bottom: 8px; }
#vv-fsa .vva-optin-list label { margin: 0 16px 0 4px; }
#vv-fsa .vva-optin-list input { vertical-align: middle; }

/* --- validation: not covered by the comp, styled to match ----------------- */

#vv-fsa .vva-error {
  display: inline-block;
  color: #febe2b;
  font-weight: 700;
  font-size: 16px;
  margin: -8px 0 8px 6px;
}

#vv-fsa .vva-valsum {
  display: block;
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  color: #febe2b;
  background: rgba(254, 190, 43, 0.10);
  border: 1px solid rgba(254, 190, 43, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 14px;
}

#vv-fsa .vva-valsum ul { margin: 0; padding: 0 0 0 4px; }


/* ==========================================================================
   5. Chrome below the hero
   ========================================================================== */

/* The stock-info band sits between the hero and the reviews widget, and its
   .wrapper's bottom border is the separator rule under the card -- worth keeping.
   On this page every control inside StockInfoContainer is Visible="false", so the
   band renders as two empty divs that nonetheless take ~100px: .wrapper adds 30px
   padding and 45px margin, and .stockinfo-description / .stockinfo-chart carry
   40px and 30px of their own padding while still floated, so they hold height with
   no content.

   So: hide only the empty content divs, and let the wrapper collapse to just its
   border. That leaves space / line / space, with the space set by the hero's
   bottom margin above and .trustpilot's top margin below. Gated on the band
   actually being empty, so the flows that populate it are unaffected. */
body:has(#vv-fsa) .stock-info:not(:has(span, img)) > .wrapper {
  padding: 0;
  margin: 0 auto;
  border-bottom: 1px solid #e2e7ec;
}

body:has(#vv-fsa) .stock-info:not(:has(span, img)) .stockinfo-description,
body:has(#vv-fsa) .stock-info:not(:has(span, img)) .stockinfo-chart {
  display: none;
}

/* --------------------------------------------------------------------------
   Footer: same markup, same links, same disclaimer -- the comp only adds a
   hairline rule and tightens the spacing.
   -------------------------------------------------------------------------- */

body:has(#vv-fsa) .footer {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  padding: 30px 0 8px;
}

body:has(#vv-fsa) .footer .horizontal-line {
  border: none;
  border-top: 1px solid #e2e7ec;
  height: 0;
  margin: 0 0 24px;
  background: none;
}

body:has(#vv-fsa) .footer a { color: #131d28; font-weight: 700; text-decoration: none; }
/* Hover keeps the link colour; the underline alone signals the hover.
   !important is required: the footer HyperLinks have Font-Underline="false",
   which ASP.NET renders as an inline style="text-decoration:none", and an
   inline style beats a stylesheet rule without it. */
body:has(#vv-fsa) .footer a:hover { color: #131d28; text-decoration: underline !important; }


/* ==========================================================================
   6. Responsive
   ========================================================================== */

@media screen and (max-width: 1024px) {
  #vv-fsa .vva-hero { padding: 44px 32px; }
  #vv-fsa .headline h1 { font-size: 44px !important; }
  #vv-fsa .vva-subhead { font-size: 20px; margin-bottom: 30px; }
  #vv-fsa .vva-vp { padding: 30px 32px 0; }
  #vv-fsa .vva-form { padding: 0 32px 30px; }
  #vv-fsa .vva-vp-title { font-size: 26px !important; }
  #vv-fsa .vva-vp-lead { font-size: 17px; margin-bottom: 20px; }
  #vv-fsa .vva-bullets li { font-size: 18px; }
}

@media screen and (max-width: 850px) {
  #vv-fsa { padding: 0 16px 40px; }
  #vv-fsa .vva-hero { padding: 26px 20px 28px; border-radius: 14px; margin: 14px 0; }
  #vv-fsa .vva-eyebrow { font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; padding: 6px 16px; }
  #vv-fsa .headline h1 { font-size: 32px !important; margin-bottom: 10px; }
  #vv-fsa .vva-subhead { font-size: 16px; margin-bottom: 20px; line-height: 1.45; }
  #vv-fsa .vva-vp { padding: 20px 18px 0; }
  #vv-fsa .vva-form { padding: 0 18px 20px; }
  #vv-fsa .vva-vp-title { font-size: 22px !important; margin-bottom: 4px; }
  #vv-fsa .vva-vp-lead { font-size: 15px; margin-bottom: 14px; }
  #vv-fsa .vva-bullets { margin-bottom: 18px; }
  #vv-fsa .vva-bullets li { font-size: 16px; padding-bottom: 10px; padding-left: 40px; }
  #vv-fsa .vva-bullets li::before { width: 24px; height: 24px; background-size: 14px; }
  #vv-fsa .vva-input { font-size: 16px; padding: 13px 15px; margin-bottom: 10px; }
  /* the pill's padding is on the wrapper -- setting it on the input too would
     stack the two and grow the button's height */
  #vv-fsa .vva-submit-wrap { padding: 15px 22px; gap: 8px; }
  #vv-fsa .vva-submit { font-size: 17px; }
  #vv-fsa .vva-submit-wrap::after { width: 18px; height: 18px; }
}

/* legacy sheet forces .headline/h1 to 3.0rem and .form/.list to 100% below
   these widths; the hero is already fluid, so only the h1 needs restating */
@media screen and (max-width: 535px) {
  #vv-fsa .headline h1 { font-size: 30px !important; }
}


/* ==========================================================================
   ==========================================================================
   PAGE 2 -- SelectAnalysis.aspx  (Analysis.master + SelectAnalysisDetails.ascx)
   Ported from the partner comp: vv-selectanalysis-redesign.html
   --------------------------------------------------------------------------
   That master loads stockanalysis2-styles.css (NOT stockanalysis-styles.css),
   so the legacy rules unwound here are a different set from page 1's.

   ApplicationError.aspx shares this master and does not render the redesign, so
   the shared master-level bits (wrapper, hero, eyebrow, headline) are gated on
   #vv-sa:has(.vva-results) -- a marker only SelectAnalysisDetails emits. Rules
   for elements the control itself renders need no gate; they cannot match on the
   error page because those elements are not there.
   ==========================================================================
   ========================================================================== */

body:has(.vva-results) { background: #eef1f5; } /* legacy body is #fff */

#vv-sa *,
#vv-sa *::before,
#vv-sa *::after { box-sizing: border-box; }

/* ungated: on ApplicationError.aspx the headline has moved out of the navy
   .header band, so give it a legible standalone treatment rather than leaving
   white-on-white. The eyebrow is hidden there entirely. */
#vv-sa .vva-eyebrow { display: none; }

#vv-sa .headline {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  color: #022c54;
  margin: 20px 0 !important;
}

/* --- the card, only when SelectAnalysisDetails is on the page ------------- */

/* 920 rather than the comp's 900: French needs the widest results table of the
   nine locales (LE NOM DE LA COMPANIE / OBTENIR L'ANALYSE) and 900 left it 12px
   short, so its headers wrapped. 20px more card plus slightly tighter table cells
   gets every language onto one line with headroom to spare. */
#vv-sa:has(.vva-results) {
  display: block;
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  color: #131d28;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  -webkit-font-smoothing: antialiased;
}

#vv-sa:has(.vva-results) .vva-hero {
  text-align: center;
  padding: 48px 44px;
  background-color: #0a1628;
  background-image:
    linear-gradient(140deg, rgba(10, 22, 40, 0.72) 0%, rgba(13, 33, 71, 0.72) 50%, rgba(17, 42, 90, 0.72) 100%),
    url("https://www.vectorvest.com/e-reports/newFSAR4/css/blue-bg.png");
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  border-radius: 20px;
  color: #fff;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}

#vv-sa:has(.vva-results) .vva-hero-inner { position: relative; z-index: 1; }

#vv-sa:has(.vva-results) .vva-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #febe2b;
  margin-bottom: 20px;
  border: 1px solid rgba(254, 190, 43, 0.35);
  padding: 7px 20px;
  border-radius: 100px;
}

/* legacy .headline: float right, Montserrat, uppercase, 3.2rem, white */
#vv-sa:has(.vva-results) .headline {
  margin: 0 !important;
  padding: 0;
  color: #fff;
}

/* 700 to match the comp's actual rendering -- see the page 1 headline note */
#vv-sa:has(.vva-results) .headline h1 {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  font-size: 52px !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 16px;
  padding: 0;
  text-transform: none;
}

/* activates once lblFreeStockAnalysis.Text reads <em>Free</em> Stock Analysis */
#vv-sa:has(.vva-results) .headline h1 em {
  font-style: normal;
  color: #febe2b;
}

/* --- copy ---------------------------------------------------------------- */

/* legacy .select-header: Montserrat, 4.2rem, #022c54, centred */
#vv-sa .vva-subhead {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin: 0 0 20px !important;
}

#vv-sa .vva-match-msg {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 auto 30px;
  text-align: center;
}

/* golds the symbol / count, once lblRequestedSymbol.Text wraps them in <strong>;
   a harmless no-op until then */
#vv-sa .vva-match-msg strong { color: #febe2b; font-weight: 700; }

/* --- results panel ------------------------------------------------------- */

/* legacy #select-table: width 80%, margin 15px auto, Lato

   Widened from the comp's 640 to 784 so headers sit on one line in every locale.
   Measured requirements at 12px cell padding: English ~600, Italian 685, German
   and Dutch below that, Spanish ~721, French ~756 (the widest). 784 is the card's
   full inner width at desktop, leaving ~28px of headroom over French.

   Deliberately NOT white-space:nowrap on the headers. With enough room the table
   keeps them on one line anyway, and leaving them wrappable means a language
   longer still degrades to a two-line header instead of shoving the last column
   out onto the dark card, which is what the nowrap version did. overflow-x is a
   final guard. */
#vv-sa .vva-results {
  width: 100%;
  max-width: 784px;
  overflow-x: auto;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px 18px;
  text-align: left;
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
}

/* DataGrid renders a plain <table> with no <thead>, so the header row is matched
   through HeaderStyle-CssClass rather than the comp's `thead th`. */
#vv-sa .vva-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  font-family: inherit;
}

#vv-sa .vva-table th,
#vv-sa .vva-table td { border: none; font-family: inherit; }

#vv-sa .vva-table .vva-th,
#vv-sa .vva-table tr.vva-th > th,
#vv-sa .vva-table th.vva-th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7e94;
  text-align: left;
  padding: 14px 12px; /* 12px horizontal buys ~20px of table width for French */
  border-bottom: 2px solid #eef2f7;
  /* no white-space:nowrap -- long localized headers must be free to wrap, or the
     table's min-content width pushes the last column out of the panel */
}

/* the action column reads as a centred unit -- header over button */
#vv-sa .vva-table .vva-th:last-child,
#vv-sa .vva-table tr.vva-th > th:last-child { text-align: center; }

#vv-sa .vva-table .vva-cell {
  padding: 16px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 16px;
  color: #131d28;
  vertical-align: middle;
  background: none; /* legacy AlternatingItemStyle painted #EFEFEF */
}

#vv-sa .vva-table tr:last-child .vva-cell { border-bottom: none; }

#vv-sa .vva-flag {
  display: block;
  width: 26px;
  height: auto;
  border: 0; /* legacy asp:Image had BorderWidth="1" */
  border-radius: 3px;
}

#vv-sa .vva-sym     { font-weight: 700; color: #0a1628; }
#vv-sa .vva-company { color: #131d28; }
#vv-sa .vva-exch    { color: #6b7e94; }

#vv-sa .vva-cell-action { text-align: center; white-space: nowrap; }

#vv-sa .vva-analyze {
  display: inline-block;
  font-family: inherit;
  background: linear-gradient(180deg, #0060DD 0%, #004AAB 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 100px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* the comp's arrow; NavigateCaption stays the plain localized caption */
#vv-sa .vva-analyze::after { content: ' \2192'; }

#vv-sa .vva-analyze:hover {
  background: linear-gradient(180deg, #004AAB 0%, #003A86 100%);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 96, 221, 0.32);
}

/* mobile-only cell labels */
#vv-sa .vva-lbl { display: none; }

/* --- search again -------------------------------------------------------- */

#vv-sa .vva-search-again { text-align: center; margin: 26px auto 0; }

#vv-sa .vva-search-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  padding: 12px 24px;
  transition: border-color 0.2s, background 0.2s;
}

#vv-sa .vva-search-link::before { content: '\2190'; }

#vv-sa .vva-search-link:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}

/* --- footer -------------------------------------------------------------- */

body:has(.vva-results) .footer {
  font-family: 'Inter', 'Modern Era', Arial, sans-serif;
  padding: 30px 0 8px;
}

body:has(.vva-results) .footer .horizontal-line {
  border: none;
  border-top: 1px solid #e2e7ec;
  margin: 0 0 24px;
}

body:has(.vva-results) .footer a { color: #131d28; font-weight: 700; text-decoration: none; }
/* hover keeps the link colour; !important beats the controls' inline
   text-decoration:none -- see the matching note on the page 1 footer */
body:has(.vva-results) .footer a:hover { color: #131d28; text-decoration: underline !important; }


/* ==========================================================================
   Shared footer layout + defensive type reset (both pages)
   --------------------------------------------------------------------------
   The reset is not cosmetic. Localized resource values are rendered raw into
   Label/HyperLink text, and some rows contain malformed markup -- the French
   hplNewSearch.Text opens <em><b> and never closes them (its closing tags were
   written as HTML comments), so every element after it in the document, the
   footer and the results table included, inherited bold italic. Pinning
   font-weight/font-style on the chrome the redesign owns stops a bad row in the
   localization table from restyling unrelated parts of the page. The data still
   needs fixing -- see the PR notes.
   ========================================================================== */

body:has(#vv-fsa) .footer,
body:has(.vva-results) .footer,
body:has(#vv-fsa) .footer .wrapper,
body:has(.vva-results) .footer .wrapper {
  font-weight: 400;
  font-style: normal;
}

body:has(#vv-fsa) .footer .vva-foot-links,
body:has(.vva-results) .footer .vva-foot-links {
  margin-bottom: 14px;
  line-height: 1.6;
}

body:has(#vv-fsa) .footer .vva-disclaimer,
body:has(.vva-results) .footer .vva-disclaimer {
  font-size: 12px;
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto 16px;
  font-weight: 400;
  font-style: normal;
}

/* same protection for the results table -- a stray unclosed tag was italicising
   the symbols and company names */
#vv-sa .vva-table .vva-cell,
#vv-sa .vva-company,
#vv-sa .vva-exch { font-weight: 400; font-style: normal; }

#vv-sa .vva-sym { font-style: normal; }
#vv-sa .vva-analyze { font-style: normal; }
#vv-sa .vva-table .vva-th { font-style: normal; }

/* --- responsive ---------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  #vv-sa:has(.vva-results) .vva-hero { padding: 44px 32px; }
  #vv-sa:has(.vva-results) .headline h1 { font-size: 44px !important; }
  #vv-sa .vva-subhead { font-size: 20px !important; }
}

@media screen and (max-width: 850px) {
  #vv-sa:has(.vva-results) { padding: 0 16px; }
  #vv-sa:has(.vva-results) .vva-hero { padding: 28px 18px 30px; border-radius: 14px; margin: 14px 0; }
  #vv-sa:has(.vva-results) .vva-eyebrow { font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; padding: 6px 16px; }
  #vv-sa:has(.vva-results) .headline h1 { font-size: 34px !important; margin-bottom: 10px; }
  #vv-sa .vva-subhead { font-size: 17px !important; margin-bottom: 14px !important; }
  #vv-sa .vva-match-msg { font-size: 15px; margin-bottom: 22px; }

  /* table collapses to cards */
  #vv-sa .vva-results { background: transparent; padding: 0; }

  #vv-sa .vva-table .vva-th,
  #vv-sa .vva-table tr.vva-th { display: none; }

  #vv-sa .vva-table,
  #vv-sa .vva-table tbody { display: block; width: 100%; }

  #vv-sa .vva-table tr.vva-row {
    display: block;
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  #vv-sa .vva-table .vva-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 7px 0;
    border-bottom: none;
  }

  #vv-sa .vva-lbl {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7e94;
  }

  #vv-sa .vva-cell-action { display: block; padding-top: 12px; }
  #vv-sa .vva-analyze { display: block; width: 100%; text-align: center; padding: 13px 22px; }
}

/* legacy sheet forces .headline to 2.4rem and .select-header to 3.2rem with
   !important below 410px */
@media screen and (max-width: 410px) {
  #vv-sa:has(.vva-results) .headline h1 { font-size: 30px !important; }
  #vv-sa .vva-subhead { font-size: 16px !important; }
}