/* ─────────────────────────────────────────────────────────────────────────
   Site-wide search

   Flat and sharp, matching the policy pages rather than the storefront's
   rounded cards: this is a utility, and it sits over whatever the visitor was
   reading, so it should read as a tool rather than as more marketing.
   ───────────────────────────────────────────────────────────────────────── */

.velto-search[hidden] { display: none; }

.velto-search {
  position: fixed;
  inset: 0;
  /* Above the consent bar (2147483000). The bar is fixed to the bottom of the
     viewport and the panel is full-height on a phone, so without this the bar
     sat on top of the last few results and they could not be reached. The bar
     is only covered while the visitor has search open, and is still there when
     they close it. */
  z-index: 2147483100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(60px, 12vh, 140px) 16px 24px;
}

.velto-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 15, 0.55);
  backdrop-filter: blur(3px);
}

.velto-search-panel {
  position: relative;
  width: min(100%, 620px);
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(13, 51, 38, 0.16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* ── the bar ────────────────────────────────────────────────────────────── */
.velto-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(13, 51, 38, 0.12);
}

.velto-search-glass { width: 20px; height: 20px; color: #0d6a45; flex: none; }

.velto-search-input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  color: #12211c;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
}

.velto-search-input::placeholder { color: #7b8a83; font-weight: 400; }
/* the browser's own clear button sits on the wrong side under RTL */
.velto-search-input::-webkit-search-cancel-button { display: none; }

.velto-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5b6861;
  cursor: pointer;
}

.velto-search-close svg { width: 18px; height: 18px; }
.velto-search-close:hover { color: #12211c; }

/* ── results ────────────────────────────────────────────────────────────── */
.velto-search-results { overflow-y: auto; padding: 6px 0 10px; }

.velto-search-group {
  margin: 12px 16px 4px;
  color: #0d6a45;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.velto-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  border-inline-start: 3px solid transparent;
}

.velto-search-result:hover,
.velto-search-result.is-active {
  background: rgba(13, 106, 69, 0.07);
  border-inline-start-color: #0d6a45;
}

.velto-search-result img,
.velto-search-ico {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  background: #f4f7f5;
  border: 1px solid rgba(13, 51, 38, 0.08);
}

.velto-search-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.velto-search-title {
  color: #12211c;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.velto-search-desc {
  color: #5b6861;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  /* two lines at most: a result list is for scanning */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.velto-search-meta {
  flex: none;
  color: #5b6861;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.velto-search-hint {
  margin: 0;
  padding: 24px 16px;
  color: #5b6861;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 0.9375rem;
  text-align: center;
}

/* ── the launcher in the header ─────────────────────────────────────────── */
.velto-search-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.velto-search-open-btn svg { width: 21px; height: 21px; }
.velto-search-open-btn:hover { background: rgba(13, 106, 69, 0.1); }

/* The page behind must not scroll while the dialog is up. */
body.velto-search-open { overflow: hidden; }

@media (max-width: 600px) {
  .velto-search { padding-top: 0; }
  .velto-search-panel { width: 100%; max-height: 100vh; height: 100vh; border: 0; }
  .velto-search-result img, .velto-search-ico { width: 38px; height: 38px; }
}

/* Results without a picture show a glyph rather than an empty frame. */
.velto-search-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8a83;
}

.velto-search-ico svg { width: 20px; height: 20px; }

/* Only one launcher shows at a time: the one inside .nav-buttons on desktop,
   the one beside the hamburger below the breakpoint where .nav-buttons is
   hidden. 991px is Webflow's own tablet breakpoint, which is where this
   template stops showing the desktop header. */
.velto-search-open-btn--mobile { display: none; }

@media (max-width: 991px) {
  .velto-search-open-btn--mobile { display: inline-flex; }
}

/* The policy and knowledge-base headers have one header at every width, so
   their launcher is always shown rather than swapped at the breakpoint. */
.velto-search-open-btn--always { display: inline-flex; }