/* Implementation of §6.0.1 / §6.0.2 — classic /new-search pill bar, look-ahead
   dropdown, intent banner, resource doc-cards, and match-reason popover. */

.csearch-main { --csearch-accent: var(--primary-color); --csearch-border: var(--gray-border); }

/* §3.5 — intent banner. Matches the site's .usai-ai-banner surface (gray
   card, 1px border, round brand icon badge) so it reads as part of the
   results screen and adapts to dark mode via theme variables. */
.csearch-intent-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 14px 16px;
  background: var(--background-color-gray-lighter, #f5f5f5);
  border: 1px solid var(--gray-border, #cfcdcd);
  border-radius: var(--border-radius-md, 15px);
}
.csearch-intent-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color, #f47e2c);
  color: var(--on-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.csearch-intent-icon svg { width: 16px; height: 16px; }
.csearch-intent-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.csearch-intent-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #231f20);
  line-height: 1.4;
}
.csearch-intent-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-color-gray-dark, #333);
  line-height: 1.5;
}

.csearch-results { max-width: 1180px; margin: 0 auto; }
.csearch-section { margin: 36px 0; }
.csearch-section > h2 { font-size: 22px; margin-bottom: 6px; }
.csearch-section .desc-cta { color: var(--text-color-gray-medium); margin: 0 0 16px; }
.csearch-section .usai-srch-meta-area { margin-bottom: 12px; }

/* §6.0.1 — relevance % + "?" chrome overlaid on the SHARED product card so the
   card design itself stays identical to /usai-search. The card is given
   position:relative via .csearch-has-relevance so the overlay anchors to it. */
.csearch-has-relevance { position: relative; }
.csearch-relevance-overlay {
  /* Top-LEFT so the favorite (heart) + compare buttons can own the top-right
     of the card (see css/search-compare.css + js/search-compare.js). */
  position: absolute; top: 10px; left: 10px; z-index: 6;
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.csearch-relevance-overlay .csearch-relevance { pointer-events: auto; }
.csearch-relevance {
  background: rgba(0, 0, 0, 0.72); color: var(--on-primary-color); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 8px;
}
/* The % pill doubles as the "why this matched" trigger (replaces the old "?" button). */
button.csearch-relevance {
  border: 0; cursor: pointer; font-family: inherit; line-height: 1.4;
}
button.csearch-relevance:hover,
button.csearch-relevance:focus-visible {
  background: var(--csearch-accent); outline: none;
}
/* Why It Matched feature toggle OFF: the % pill stays visible but is inert
   (js/classic-search.js early-returns), so it should not look clickable. */
.usai-why-matched-off button.csearch-relevance { cursor: default; }
.usai-why-matched-off button.csearch-relevance:hover,
.usai-why-matched-off button.csearch-relevance:focus-visible {
  background: rgba(0, 0, 0, 0.72);
}

/* Minimal fallback card (used only when API card hydration is unavailable). */
.csearch-card-fallback .product-content { padding: 12px 14px; }
.csearch-card-fallback .product-description { color: var(--csearch-accent); font-size: 13px; }

/* Resource doc-cards (§3.4). Deterministic columns per breakpoint so the
   "first 2 rows" collapse below maps to an exact card count (2 / 4 / 6 / 8). */
.csearch-doc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .csearch-doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .csearch-doc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .csearch-doc-grid { grid-template-columns: repeat(4, 1fr); } }

/* §3.4 — collapse "Resources & downloads" to the first 2 rows until expanded,
   then reveal the rest via the "+ See More" link. Cutoffs mirror the
   /usai-search gallery (2 / 4 / 6 / 8 cards = 2 rows at each breakpoint). */
.csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+3) { display: none; }
@media (min-width: 480px) {
  .csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+3) { display: flex; }
  .csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+5) { display: none; }
}
@media (min-width: 768px) {
  .csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+5) { display: flex; }
  .csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+7) { display: none; }
}
@media (min-width: 1024px) {
  .csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+7) { display: flex; }
  .csearch-doc-collapse:not(.is-expanded) .csearch-doc-grid > :nth-child(n+9) { display: none; }
}
.csearch-doc-toggle.is-hidden { display: none; }

/* §6.0.3(c) — same 2-row collapse for the classic Gallery grid. #csearch-galleries
   .gallery-grid is 1 / 2 / 3 / 4 cols across the breakpoints (see style.css
   .gallery-main-section .gallery-grid), so the 2 / 4 / 6 / 8 cutoffs show exactly
   2 rows until "+ See More" adds .is-expanded. Revealed tiles restore to block. */
#csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+3) { display: none; }
@media (min-width: 480px) {
  #csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+3) { display: block; }
  #csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+5) { display: none; }
}
@media (min-width: 768px) {
  #csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+5) { display: block; }
  #csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+7) { display: none; }
}
@media (min-width: 1024px) {
  #csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+7) { display: block; }
  #csearch-galleries .csearch-doc-collapse:not(.is-expanded) .gallery-grid > :nth-child(n+9) { display: none; }
}

/* §7 — same 2-row collapse for the "Articles & insights" grid (#csearch-articles
   .our-product-items is 1 / 2 / 3 / 4 cols across the breakpoints, see style.css),
   so the 2 / 4 / 6 / 8 cutoffs show exactly 2 rows until "+ See More" expands. */
#csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+3) { display: none; }
@media (min-width: 480px) {
  #csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+3) { display: flex; }
  #csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+5) { display: none; }
}
@media (min-width: 768px) {
  #csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+5) { display: flex; }
  #csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+7) { display: none; }
}
@media (min-width: 1024px) {
  #csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+7) { display: flex; }
  #csearch-articles .csearch-doc-collapse:not(.is-expanded) .our-product-items > :nth-child(n+9) { display: none; }
}

.csearch-doc-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
  border: 1px solid var(--csearch-border); border-radius: 12px; padding: 14px 16px; position: relative;
  transition: border-color 0.15s, box-shadow 0.15s; background: var(--background-color-white);
}
.csearch-doc-card:hover { border-color: var(--csearch-accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.csearch-doc-kind {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--background-color-gray); color: var(--text-color-gray-darkest); padding: 2px 7px; border-radius: 4px;
}
.csearch-doc-title { font-weight: 600; font-size: 14px; }
.csearch-doc-parent { font-size: 12px; color: var(--csearch-accent); }
.csearch-doc-file { font-size: 12px; color: var(--text-color-gray-lighter); word-break: break-all; }
.csearch-doc-rel { position: absolute; top: 12px; right: 14px; font-size: 11px; color: var(--text-color-gray-lighter); }

/* Reason popover */
.csearch-why-popover {
  position: absolute; z-index: 60; max-width: 380px; background: var(--background-color-white);
  border: 1px solid var(--csearch-border); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); font-size: 13px;
}
.csearch-why-popover h4 { margin: 0 0 8px; font-size: 13px; }
.csearch-why-popover ul { margin: 0; padding-left: 16px; }
.csearch-why-popover li { margin-bottom: 8px; }
.csearch-why-popover .csearch-reason-label { font-weight: 600; }
.csearch-why-popover .csearch-reason-contrib { color: var(--text-color-gray-lighter); }

/* §2(source_field/source_value) — per-reason detail line: which field + the
   surrounding matched text (e.g. the attachment / spec-sheet file name). */
.csearch-why-popover .csearch-reason-source {
  display: block; margin-top: 2px; color: var(--text-color-gray-darkest); font-size: 12px; line-height: 1.4;
  word-break: break-word;
}
.csearch-why-popover .csearch-reason-source q { font-style: italic; color: var(--text-color-gray-dark); }

/* §2.1 — "See the SQL" reveal at the bottom of the popover. */
.csearch-sql-reveal {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--csearch-border);
}
.csearch-sql-toggle {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: #0a66c2; font-size: 12px; font-weight: 600; text-decoration: underline;
}
.csearch-sql-toggle:hover { color: #084c91; }
.csearch-sql-block {
  margin: 8px 0 0; max-height: 260px; overflow: auto; background: #0f172a; color: #e2e8f0;
  border-radius: 8px; padding: 10px 12px; font-size: 11px; line-height: 1.5;
  white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.csearch-empty { max-width: 760px; margin: 40px auto; text-align: center; }
.csearch-empty-title { font-size: 20px; font-weight: 600; }
.csearch-empty-hint { color: var(--text-color-gray-medium); }

/* §6.1.1(c) — support / low-match helper. Same gray-card surface as the intent
   banner so it reads as part of the results screen, not a hard error. Still used
   by /new-search (template-classic-search.php); /searchwp no longer renders it. */
.csearch-support-helper {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--background-color-gray-lighter, #f5f5f5);
  border: 1px solid var(--gray-border, #cfcdcd);
  border-radius: var(--border-radius-md, 15px);
}
.csearch-support-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-color, #f47e2c);
  color: var(--on-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.csearch-support-icon svg { width: 18px; height: 18px; }
.csearch-support-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.csearch-support-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color, #231f20);
  line-height: 1.4;
}
.csearch-support-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-color-gray-dark, #333);
  line-height: 1.5;
}
.csearch-support-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.csearch-support-cta {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--primary-color, #e1641e);
  color: var(--on-primary-color);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.csearch-support-cta:hover { filter: brightness(0.95); }
.csearch-support-cta-secondary {
  background: transparent;
  color: var(--primary-color, #e1641e);
  border: 1px solid var(--primary-color, #e1641e);
}

/* No-results empty state: a simple "browse the full product line" link under
   the spelling/keyword hint (the gray Contact/Find-a-Rep helper was removed
   from /searchwp only). */
.no-result-browse { margin: 12px 0 0; }
.no-result-browse a {
  display: inline-block;
  font-weight: 600;
  color: var(--primary-color, #e1641e);
  text-decoration: none;
}
.no-result-browse a:hover { text-decoration: underline; }

/* Transparency aid: the exact source file name under each resource link so
   editors can see precisely which document drove a match (debug/diagnosis). */
.res-files-filename {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-color-gray-light);
  word-break: break-word;
}

/* =========================================================================
   Search results restyle: Resources gray box, Product Results gray box,
   centered "+more" control, and the shared download accordion (mirrors the
   attachment-downloads page so both stay visually identical).
   ========================================================================= */

/* Item 2: Resources section wrapped in a soft gray box. Applies to the
   classic /searchwp section (.csearch-resources-box on the <section>) and the
   AI /usai-search inner wrapper (.csearch-resources-box on .our-product-main).
   ID-scoped selectors so the gray fill beats the AI theme's white
   #search-resources .our-product-main background. */
#search-resources.csearch-resources-box,
#search-resources .csearch-resources-box {
  background: var(--background-color-gray-lighter);
  border-radius: 12px;
  padding: 28px 28px 32px;
}

/* Item 8: Product Results heading + "Showing ..." meta inside a gray box. */
.csearch-products-headbox {
  background: var(--background-color-gray-lighter);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.csearch-products-headbox h2 {
  margin-top: 0;
}
.csearch-products-headbox .usai-srch-meta-area {
  padding-bottom: 0;
}

/* Item 10: center the "+X more models" control, add a light gray down arrow
   beneath it, then a 1px medium-gray divider under the arrow. */
.usai-fam-more {
  text-align: center;
  margin-top: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-border-alt4);
}
.usai-fam-more .usai-fam-more-btn {
  display: inline-block;
  margin-top: 0;
}
.usai-fam-more-arrow {
  display: block;
  width: 12px;
  height: 12px;
  margin: 10px auto 0;
  border-right: 2px solid var(--border-color-light);
  border-bottom: 2px solid var(--border-color-light);
  transform: rotate(45deg);
}

/* Item 7 + 11: download accordion ported from the React downloads page
   (configurator.css .usai-dl-* classes), scoped to the search Resources box so
   the markup/behavior matches attachment-downloads exactly. */
/* Item 11 (artwork): lay the per-model download groups (and the flat brochure
   file list) into up to 3 columns on desktop so the Resources panel reads as a
   multi-column grid instead of one long single-column scroll. */
#search-resources .usai-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0px 10px;
  align-items: start;
  margin-top: 18px;
}
#search-resources .usai-dl-group {
  padding: 0;
  min-width: 0;
}
#search-resources .usai-dl-group__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
#search-resources .usai-dl-group__name {
  font-size: var(--font-size-sm, 18px);
  font-weight: 400;
  color: var(--primary-color, #e87722);
  line-height: 1.3;
  transition: color 0.2s;
}
#search-resources .usai-dl-group__trigger:hover .usai-dl-group__name {
  color: var(--secondary-color, #231f20);
}

/* Panel: each model group now sits inside one ~1/3-width grid cell, so its
   files stack in a single column within the cell (the 3-column layout is the
   .usai-dl-grid itself). */
#search-resources .usai-dl-group__panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 14px 4px;
}
#search-resources .usai-dl-group__panel[hidden] {
  display: none;
}
#search-resources .usai-dl-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  min-width: 0;
}
#search-resources .usai-dl-checkbox {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}
#search-resources .usai-dl-checkbox input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
#search-resources .usai-dl-checkbox__box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color-light);
  border-radius: 4px;
  display: inline-block;
  transition: all 0.15s;
}
#search-resources .usai-dl-checkbox input:checked + .usai-dl-checkbox__box {
  background-color: var(--primary-color, #e87722);
  border-color: var(--primary-color, #e87722);
  background-image: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5l4 4 10-10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
#search-resources .usai-dl-checkbox input:focus-visible + .usai-dl-checkbox__box {
  box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.25);
}
#search-resources .usai-dl-file__download {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-color, #231f20);
  cursor: pointer;
  transition: color 0.2s;
}
#search-resources .usai-dl-file__download:hover {
  color: var(--primary-color, #e87722);
}
#search-resources .usai-dl-file__name {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-color, #231f20);
  line-height: 1.4;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#search-resources .usai-dl-file__name:hover {
  color: var(--primary-color, #e87722);
}
#search-resources .usai-dl-results-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}
#search-resources .usai-dl-results-note {
  font-size: 14px;
  color: var(--text-color-gray-medium);
  line-height: 1.4;
}
#search-resources .usai-dl-results-note strong {
  font-weight: 600;
  color: var(--text-color, #231f20);
}
#search-resources .usai-dl-download-selected {
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--on-primary-color);
  background-color: var(--primary-color, #e87722);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}
#search-resources .usai-dl-download-selected:hover:not(:disabled) {
  background-color: var(--secondary-color, #231f20);
}
#search-resources .usai-dl-download-selected:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  #search-resources .usai-dl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #search-resources .usai-dl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #search-resources.csearch-resources-box,
  #search-resources .csearch-resources-box {
    padding: 20px 16px 24px;
  }
}

/* Performance Database Search — Option B "refine" banner. Shown when no single
   configuration meets every criterion (partial-AND results) or nothing matched. */
.csearch-perf-banner {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid #e4c98a;
  border-left: 4px solid #d99a2b;
  border-radius: 8px;
  background: #fbf4e6;
  color: #5a4a23;
}
.csearch-perf-banner__headline {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 15px;
}
.csearch-perf-banner__msg {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.45;
}
.csearch-perf-banner__label {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7a6533;
}
.csearch-perf-banner__criteria {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}
.csearch-perf-banner__criteria li {
  margin: 2px 0;
}