/* Inline expanding search for vb.1gb.ru / lowmart.ru. */

.site-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Compact lupa button (collapsed state) */
.site-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--ink, #0f172a);
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.site-search-button:hover { background: var(--soft, #f1f5f9); }
.site-search-button:focus-visible { outline: 2px solid var(--blue, #0066ff); outline-offset: 2px; }
.site-search-button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Inline expanded form (active state) */
.site-search-inline {
  display: none;
  align-items: center;
  gap: 8px;
  width: 0;
  height: 2.75rem;
  padding: 0 12px 0 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .08);
  transition: width .25s ease;
}
.site-search-inline.is-open {
  display: inline-flex;
  width: min(440px, 65vw);
}
.site-search-inline svg.ss-icon-search {
  width: 18px; height: 18px; stroke: var(--muted, #64748b); fill: none; stroke-width: 2; flex: none;
}
.site-search-inline input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--ink, #0f172a);
}
.site-search-inline input::placeholder { color: var(--muted, #94a3b8); }
.site-search-close {
  flex: none;
  border: 0;
  background: transparent;
  width: 24px; height: 24px;
  border-radius: 6px;
  color: var(--muted, #64748b);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.site-search-close:hover { background: var(--soft, #f1f5f9); color: var(--ink, #0f172a); }

/* Dropdown with results */
.site-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(480px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 42, .25);
  padding: 8px;
  display: none;
  z-index: 60;
}
.site-search-dropdown.is-open { display: block; }

.ss-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.ss-item:hover, .ss-item.is-active { background: var(--soft, #f1f5f9); }
.ss-title { font-size: 15px; font-weight: 600; color: var(--ink, #0f172a); line-height: 1.4; }
.ss-sub { font-size: 13px; color: var(--muted, #64748b); line-height: 1.45; }
.ss-cat {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue, #0066ff);
  font-weight: 500;
}
.ss-item mark { background: rgba(0, 102, 255, .15); color: inherit; padding: 0 2px; border-radius: 3px; }

.ss-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 14px;
}

/* When search is active: hide nav links flagged with data-search-hide,
   plus the Оставить заявку CTA, to give the input room. */
.glass-header.is-search-active [data-search-hide],
.glass-header.is-search-active .site-search-cta-hide {
  display: none !important;
}
.glass-header.is-search-active .site-search-button { display: none; }

/* Mobile (<lg): the inline form expands to fill row */
@media (max-width: 1024px) {
  .site-search-inline.is-open { width: min(280px, 60vw); }
  .site-search-dropdown { width: 92vw; }
}
@media (max-width: 640px) {
  .site-search-inline.is-open { width: 70vw; }
  .glass-header.is-search-active .container-page > a:first-child { display: none; }
}

/* Language switcher (RU <-> CN) — sits next to the search button */

/* === language switcher (round flag) === */
.lang-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.lang-button:hover { transform: scale(1.08); filter: drop-shadow(0 4px 10px rgba(15,23,42,.18)); }
.lang-button:focus-visible { outline: 2px solid var(--blue,#0066ff); outline-offset: 3px; border-radius: 9999px; }
.lang-button svg { width: 100%; height: 100%; display: block; }