/* ════════════════════════════════════════════════════════════════════ */
/*  search.css — home page styles                                        */
/*                                                                       */
/*  Loaded only on the home page (/) via home.html. Contains:            */
/*    - Search card (header, fields, location pin, hint)                 */
/*    - Search filters (filter-row, filter-chip, filters-label)          */
/*    - Filter dropdowns (filter-divider, filter-select, filters-clear)  */
/*    - Search results (results-section, btn-report, btn-view-advisers)  */
/*                                                                       */
/*  Shared chrome (nav bar, cart tray, term popover) lives in            */
/*  common.css. Report-page styles live in report.css.                   */
/* ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════ */
/*  SEARCH CARD                           */
/* ═══════════════════════════════════════ */
.search-section {
  max-width: 1020px;
  margin: 20px auto 0;
  padding: 0 24px;
}
.search-card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(14,40,65,0.08), 0 1px 3px rgba(14,40,65,0.04);
  overflow: hidden;
  border: 1px solid var(--border);
}
.search-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.search-card-header svg {
  width: 20px; height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.search-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
  position: relative;
}
.search-card-title::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: -20px;
  right: -20px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  z-index: 1;
}
.search-panel { padding: 24px 28px 28px; }
.search-form-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.search-field { flex: 1; min-width: 160px; }
.search-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 5px;
}
.search-field label .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 10.5px;
}
.search-field input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.search-field input::placeholder { color: var(--muted); font-weight: 300; }
.search-field input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(74,124,143,0.12);
}
/* Location field with pin button */
.location-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.location-input-wrap input {
  padding-right: 36px;  /* room for pin button */
}
.location-pin-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s;
}
.location-pin-btn:hover { color: var(--primary); }
.location-pin-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.location-pin-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes locSpin { to { transform: rotate(360deg); } }
@keyframes scanSweep { to { transform: rotate(360deg); } }
@keyframes scanPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.search-scanning {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 24px; color: var(--muted); font-size: 13px;
}
.search-scanning span { color: var(--text-light); }
.search-scan-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  stroke: var(--secondary); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.search-scan-icon .scan-sweep {
  transform-origin: 11px 11px;
  animation: scanSweep 1.5s linear infinite;
  opacity: 0.6;
}
.search-scan-count {
  font-family: var(--font-heading); font-weight: 600;
  color: var(--primary); animation: scanPulse 1.5s ease-in-out infinite;
}
.search-btn {
  padding: 10px 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  background: var(--accent);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  height: 42px;
}
.search-btn:hover { background: #D4622A; }
.search-btn svg {
  width: 16px; height: 16px;
  margin-right: 5px;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.search-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ═══════════════════════════════════════ */
/*  SEARCH FILTERS                       */
/* ═══════════════════════════════════════ */
.search-filters {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.filters-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 3px;
  white-space: nowrap;
}
.filter-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--secondary); color: var(--text); }
.filter-chip.active {
  border-color: var(--primary);
  background: #E8F0F4;
  color: var(--primary);
  font-weight: 600;
}
.filter-chip .filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  background: var(--primary);
  color: #FFFFFF;
}
.filter-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
/* Base reg-badge rules — duplicated from report.css so filter-chip badges
   render correctly on the home page (search.css loads alone here, no report.css).
   Kept narrow: only the classes used by current home-page filter chips. */
.reg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #FFFFFF;
}
.reg-badge-ia { background: #3B7BA8; }
.reg-badge-bd { background: #3C4043; }
.reg-badge-xs {
  width: 16px;
  height: 16px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════ */
/*  FILTER DROPDOWNS                      */
/* ═══════════════════════════════════════ */
.filter-divider {
  width: 1px; height: 22px;
  background: var(--border);
  margin: 0 3px;
}
.filter-select-wrap { position: relative; display: inline-flex; }
.filter-select {
  appearance: none;
  padding: 5px 28px 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
}
.filter-select:hover { border-color: var(--secondary); }
.filter-select.active {
  border-color: var(--primary);
  background: #E8F0F4;
  color: var(--primary);
  font-weight: 600;
}
.filter-select-arrow {
  position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.filter-select-arrow svg {
  width: 12px; height: 12px;
  stroke: var(--muted); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.filters-clear {
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 3px 6px;
  margin-left: auto;
}
.filters-clear:hover { color: var(--accent); }


/* ═══════════════════════════════════════ */
/*  SEARCH RESULTS                        */
/* ═══════════════════════════════════════ */
.results-section {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px;
  display: none;
}
.results-section.visible { display: block; }
.results-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  margin-top: -6px;
  overflow: hidden;
}
.results-header {
  padding: 16px 24px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.results-count { font-size: 12.5px; color: var(--text-light); }
.results-count strong { color: var(--text); font-weight: 600; }
.results-clear {
  font-size: 11.5px; color: var(--muted);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
}
.results-clear:hover { color: var(--accent); }
.results-list { max-height: 420px; overflow-y: auto; }
#results-helper {
  padding: 10px 16px;
  background: #FFF9F0;
  border-bottom: 1px solid #EDE0CC;
  font-size: 13px;
  color: #5C4A1E;
  line-height: 1.5;
  display: none;
}
.result-row {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: var(--bg-subtle); }
.result-info { flex: 1; min-width: 0; }
.result-firm-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  font-size: 12px;
  color: var(--text-light);
}
.reg-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 3px;
  line-height: 1.6;
}
.reg-pill-ria { background: #E8F0F4; color: var(--primary); }
.reg-pill-bd { background: #FFF0E6; color: #B85C2A; }
.reg-pill-inline {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 2px;
}

.result-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-report {
  padding: 7px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  color: #FFFFFF;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-report:hover { background: #D4622A; }
/* In-cart state: button flips to filled-secondary so users can see at a glance
   which firms/individuals are already in their cart while browsing results. */
.btn-report.in-cart {
  background: var(--primary);
  color: #FFFFFF;
}
.btn-report.in-cart:hover { background: var(--primary); opacity: 0.92; }
.btn-report svg {
  width: 12px; height: 12px;
  vertical-align: -2px; margin-right: 3px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-view-advisers {
  padding: 7px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  color: #FFFFFF;
  background: var(--secondary);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-view-advisers:hover { background: #3A6B7E; }
.btn-view-advisers svg {
  width: 12px; height: 12px;
  vertical-align: -2px; margin-right: 3px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════════════════ */
/*  THE FEE-ONLY SHORTCUT                       */
/*                                              */
/*  Sits between the search card and the sample */
/*  buttons. Centred, no rules or panels: the   */
/*  claim is the loudest thing here and does    */
/*  not need decoration behind it.              */
/* ═══════════════════════════════════════════ */
.feeonly-section {
  max-width: 1020px;
  margin: 44px auto 0;
  padding: 0 24px;
}
.feeonly-inner {
  /* Full width the section allows (1020px border-box minus 2x24px padding).
     Both the claim and the figures line are held to a single line each, and
     the figures line is the longer of the two at roughly 930px. */
  max-width: 972px;
  margin: 0 auto;
  text-align: center;
}

/* Namespaced rather than a generic .sr-only, which is not defined in any
   stylesheet this page is known to load. */
.feeonly-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── The decorative search bar ─────────────────────────────────────
   A fake input with a looping typewriter. It is NOT interactive:
   pointer-events:none and aria-hidden, so it cannot be clicked into and
   is not announced as a form field. Sits on one line with the kicker,
   stacking below it on narrow screens. */
.feeonly-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.feeonly-fakebar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Height is FIXED, not derived from content. The typed span is empty on
     first paint and contributes no text metrics, so the bar was sized by the
     mic glyph until the first character landed and the font's line box took
     over — a small vertical jump on every loop. Pinning the height means
     nothing inside can move the box. min-width does the same for the
     horizontal axis while the string is short. */
  height: 44px;
  padding: 0 16px;
  min-width: 290px;
  line-height: 1;
  box-sizing: border-box;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(14,40,65,0.06);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  pointer-events: none;
  user-select: none;
}
.feeonly-typed { white-space: pre; }
/* Caret sits in the text flow so it tracks the end of the typed string. */
.feeonly-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  background: var(--accent);
  vertical-align: -0.2em;
  animation: feeonlyBlink 1.05s steps(1, end) infinite;
}
@keyframes feeonlyBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.feeonly-mic {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feeonly-kicker {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  margin: 0;
  text-align: left;
  max-width: 260px;
}
/* One sentence per line. Left to wrap naturally, "Also" ended up stranded
   on a line of its own. */
.feeonly-kicker span { display: block; }

/* The claim carries the block. Sized above body copy but below the hero
   headline so it never competes with the page's primary message. */
.feeonly-claim {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 16px;
  /* One line. Breaking "score an A" onto a second line looked accidental,
     and there is width available. Released below 940px, where holding it
     would overflow instead. */
  white-space: nowrap;
}

/* Inline grade badge. Same shape and the same two global colour tokens as
   the report stamp (.grade-circle, 96px) and the distribution dot
   (.dist-mini-dot, 24px) — sized here to sit on a line of text. Reusing the
   tokens rather than hard-coding hex means a palette change moves every
   surface together. */
.feeonly-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  /* rem, NOT em: the badge must be the same size wherever it appears. As an
     em value it inherited its context and came out visibly smaller in the
     15px figures line than in the 1.18rem claim. 1.55em of 0.97rem = 24px. */
  font-size: 0.97rem;
  line-height: 1;
  /* `middle` aligns the badge's centre to the parent's baseline plus half its
     x-height, which puts a circle optically on the line. A hand-tuned em
     offset was sitting it low. */
  vertical-align: middle;
  flex-shrink: 0;
}

/* Keep "scored an [A]" together — a non-breaking space alone did not stop the
   badge orphaning onto its own line, because an inline-flex atom offers a
   break opportunity beside it regardless. */
.feeonly-nb { white-space: nowrap; }
.feeonly-grade.g-a {
  background: var(--grade-a-circle);
  color: var(--grade-a-letter);
}

.feeonly-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0 0 10px;
}
.feeonly-body strong { color: var(--accent); font-weight: 700; }

/* The two figures. Given their own lines and room, because the reader is
   invited to check them against each other: 1,557 of 12,299 has to read as
   obviously "most did not" without anyone doing arithmetic. Deliberately
   only TWO numbers — an earlier draft also showed the pristine/complex
   split and readers tried to subtract one partition from the other, which
   does not reconcile, because grade and structure cut the same 12,299
   along different lines. */
.feeonly-figures {
  margin: 18px auto 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-light);
  /* One line. Estimated at ~930px against 972px available, so the margin is
     thin — 14.5px rather than 15px buys back roughly 25px of it. Released
     below 1040px, where the section is no longer at full width and holding
     the line would overflow rather than merely look tight. */
  white-space: nowrap;
}
.feeonly-fig strong,
.feeonly-figures strong {
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--accent);
}

@media (max-width: 1040px) {
  .feeonly-figures { white-space: normal; max-width: 660px; }
}

@media (max-width: 940px) {
  .feeonly-claim { white-space: normal; }
}

@media (max-width: 640px) {
  .feeonly-section { margin-top: 32px; padding: 0 18px; }
  .feeonly-demo { gap: 12px; }
  .feeonly-fakebar { min-width: 0; width: 100%; font-size: 14px; }
  .feeonly-kicker { max-width: none; text-align: center; }
  .feeonly-mic { width: 17px; height: 17px; }
  .feeonly-claim { font-size: 1.05rem; }
  .feeonly-fig { font-size: 14px; }
  .feeonly-fig strong { font-size: 1.05rem; }
}

/* Anyone who has asked for reduced motion gets the phrase, statically. The
   JS also checks this and skips the loop entirely. */
@media (prefers-reduced-motion: reduce) {
  .feeonly-caret { animation: none; opacity: 1; }
}