/*
 * The header search overlay's own CSS — the autocomplete dropdown, and the close button.
 *
 * assets/js/search.js binds jQuery UI autocomplete to the overlay's input and appends the menu to
 * .search-form, so everything down to the last section is scoped under that. WordPress ships jQuery
 * UI without any of its theme CSS, so the .ui-* rules below are the only styling the menu gets.
 * The `.search-close` block at the foot is the one exception to that scoping; see its own note.
 *
 * Adapted from the sibling theme's copy of this file, which was written against different header
 * markup: its .aws-search-btn-icon / .search-icon / .close-icon / .spinner-icon rules described an
 * icon-swapping search button this design does not have, and its .search-toggle.opened rules an
 * overlay that opens on .opened rather than the .active this theme's assets/js/menu.js toggles.
 * All of those were inert here and are gone; the loading state is on this design's .btnsearch
 * instead. Its one colour token, --blue, does not exist in this theme either.
 */

.search-form {
  position: relative;
  width: 100%;
}

/* search.js puts this on the form while an autocomplete request is in flight. */
.search-form.search-loading .btnsearch {
  opacity: 0.4;
  pointer-events: none;
}

.search-form .ui-autocomplete {
  position: absolute;
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  /* WordPress ships jQuery UI without its theme CSS, so .ui-front carries no z-index of its own.
       The nav below is position:relative and later in the DOM, so it paints over the dropdown. */
  z-index: 100;
}

.search-form .ui-autocomplete li {
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
}

.search-form .ui-autocomplete li:last-child {
  border-bottom: 0;
}

.search-form .ui-autocomplete li.ui-state-focus {
  background: var(--bg-alt);
}

.search-form .ui-autocomplete li img {
  float: left;
  height: 50px;
  width: auto;
  margin: 5px 10px;
}

.search-form .ui-autocomplete li .ui-menu-item-wrapper {
  padding: var(--space-10);
  display: flex;
  align-items: center;
}

.search-form .ui-autocomplete li .ui-state-active {
  font-weight: var(--fw-semibold);
  color: var(--white);
  background: var(--primary);
  border: none;
}

.search-form .ui-autocomplete li .pso-content {
  width: calc(100% - 70px);
}

/* The last row is "View all results" — no thumbnail, so it centres instead. */
.search-form .ui-autocomplete li.no-image .pso-content {
  text-align: center;
  width: 100%;
}

.search-form .ui-autocomplete li span {
  line-height: 1.75em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.search-form .ui-autocomplete li span.psoc-name {
  font-size: var(--fs-14);
}

.search-form .ui-autocomplete li span.psoc-name small {
  color: var(--text-color);
}

/* Kept although the endpoint no longer sends a description: the row renders price and SKU in that
   space now. The rule costs nothing and means a re-added description line would not land unstyled. */
.search-form .ui-autocomplete li span.psoc-desc {
  font-size: var(--fs-12);
  color: var(--text-color);
}

/* Price is the one line a shopper scans for, so it takes the theme colour and the weight; the SKU
   sits under it as reference text, matching the muted grey the count and the description use. */
.search-form .ui-autocomplete li span.psoc-price {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--theme);
}

.search-form .ui-autocomplete li span.psoc-sku {
  font-size: var(--fs-12);
  color: var(--text-color);
}

/* get_price_html() brings its own markup — the amount span, and <del>/<ins> on a sale. Neutralised
   here so a sale price does not inherit the shop's larger type inside a dropdown row, and so the
   `display: block` on `li span` above does not put the two halves of a sale price on two lines. */
.search-form .ui-autocomplete li span.psoc-price del {
  opacity: 0.6;
  margin-right: 4px;
}

.search-form .ui-autocomplete li span.psoc-price ins {
  text-decoration: none;
}

.search-form .ui-autocomplete li span.psoc-price span {
  display: inline;
}

/*
 * The sale badge, on the price line.
 *
 * The same badge the product cards carry — home.css:333-355 draws `.product.type-product .sale` as
 * this pill — but that rule is scoped to the card and absolutely positioned over its thumbnail, so
 * it cannot be reused here. The values are copied so the two read as one badge; the padding and the
 * uppercase tracking are tightened for a 50px-tall dropdown row. `#df341d` is a literal because the
 * design has no token for it: home.css:353, product-detail.css:265 and product-detail-woo.css:107
 * all write it out the same way.
 *
 * **This selector has to out-specify `li span.psoc-price span { display: inline }` above**, which
 * would otherwise flatten the pill and let its vertical padding spill out of the line. It does —
 * 4 classes and 2 elements beats 3 classes and 3 elements — and that is the only reason the rule is
 * written against `.psoc-price .psoc-sale` rather than `.psoc-sale` alone.
 */
.search-form .ui-autocomplete li span.psoc-price .psoc-sale {
  display: inline-block;
  /* The design's own compact badge — home.css:1533-1540 shrinks the card's pill to exactly this
     10px/3px-6px below 768px. Reusing those numbers rather than inventing a third size puts the
     badge at 16px tall, matching the height of the price text beside it; at the card's full-size
     12px/5px-10px it stood 22px in a 22.75px line and read as a block rather than a tag. */
  margin-left: var(--space-10);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  background-color: #df341d;
  /*
   * Centred on the price text, which takes both of these.
   *
   * `vertical-align: middle` does not centre an inline-block on the text beside it — it aligns the
   * box's midpoint to the parent's baseline plus half its x-height. Measured against this font at
   * 13px that lands the badge **1.45px low**, and the offset is constant: it comes from the parent's
   * metrics, so it does not shrink when the badge does. The nudge cancels it, to within 0.05px.
   *
   * Deliberately not solved by making .psoc-price a flex container: it inherits
   * `text-overflow: ellipsis` from the `li span` rule above, and flex would silently drop the
   * truncation on a long price range.
   */
  vertical-align: middle;
  position: relative;
  top: -1.5px;
}

/* A category row has no thumbnail but must not be centred the way `.no-image` centres "View all
   results" — it reads as a destination in a list, so it stays left-aligned with the products. */
.search-form .ui-autocomplete li.ps-option--category .pso-content {
  width: 100%;
}

.search-form .ui-autocomplete li.ps-option--more .psoc-name {
  font-weight: var(--fw-semibold);
}

/* The keyboard-highlighted row inverts to white on --primary, so every muted line in it has to
   invert too or it drops to unreadable contrast. */
.search-form .ui-autocomplete li .ui-state-active span.psoc-name small,
.search-form .ui-autocomplete li .ui-state-active span.psoc-desc,
.search-form .ui-autocomplete li .ui-state-active span.psoc-price,
.search-form .ui-autocomplete li .ui-state-active span.psoc-sku {
  color: var(--white);
}

/* ==========================================================================
   Search overlay — close button
   ========================================================================== */

/*
 * The only rules in this file outside `.search-form`. The button is markup the design never drew,
 * so header.css has never seen it — that file is the UI team's and describes the overlay itself
 * (`.search-container`, `.search__content`, `.search-form .btnsearch`), which is why these live here
 * rather than there. header.php renders the button; assets/js/search.js closes on it.
 *
 * No positioning context is created here on purpose: `.search-container` is already
 * `position: fixed` (header.css:502), so this anchors to the full-width bar. The overlay has no
 * responsive overrides in header.css, so one set of rules covers every width.
 */

.search-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: var(--transition);
}

.search-close:hover {
  background-color: var(--bg-alt);
}

.search-close img {
  width: 16px;
  height: 16px;
}

@media (max-width: 1199.98px) {
  .search__content {
    padding-top: 55px;
  }
  .search-close {
    top: 5px;
  }
}