/* Plaza search dropdown - "Search Dropdown - Typing" (Figma, desktop 764px panel).
   Colours/sizes are the design's tokens; font = the theme's IRANYekanWeb (Persian digits). */

.search-products-ajax { --plz-ac-left: 0px; --plz-ac-w: 764px; --plz-ac-h: 42px; }

/* The theme sets `body div, body p, body span { font-size: 16px }`. Inside the dropdown every element
   inherits instead; :where() keeps this at class weight, so the per-element sizes below still win. */
.plz-ac :where(span, div, p, b) { font-size: inherit; line-height: inherit; }

/* ---------------------------------------------------------------- content (all widths) */
.search-products-ajax .plz-ac { display: flex; flex-direction: column; gap: 12px; direction: rtl; text-align: right;
  font-family: inherit; color: #161616; }
.plz-ac-body { display: flex; gap: 8px; align-items: stretch; }
.plz-ac-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plz-ac-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0;
  font-size: 12px; font-weight: 500; line-height: 20px; color: #161616; }
.plz-ac-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400;
  line-height: 20px; color: #075250; text-decoration: none; }
.plz-ac-more:hover { color: #075250; text-decoration: underline; }
.plz-ac-box { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border: 1px solid #E0E0E0; border-radius: 8px; }
.plz-ac-sep { display: block; height: 0; border-top: .5px solid #E0E0E0; margin: 0 4px; }

/* suggestion rows (36px) */
.plz-ac-s { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 20px; color: #161616; text-decoration: none; }
.plz-ac-s:hover { color: #161616; }
.plz-ac-ico { flex: none; display: inline-flex; color: #8D8D8D; }
.plz-ac-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* highlighted query words: bold in the design's green, no yellow background (dropdown + result cards) */
/* a light green background: the result-card titles are already bold, so colour alone did not show */
.plz-ac mark, .woocommerce-loop-product__title mark {
  padding: 0 2px; border-radius: 4px; background: #D9EEEB; color: #075250; font-weight: 700;
  font-size: inherit; line-height: inherit; }
.plz-ac-incat { flex: none; font-size: 12px; color: #8D8D8D; }
.plz-ac-incat b { font-weight: 500; color: #075250; }
.plz-ac-fill { flex: none; display: inline-flex; padding: 2px; border-radius: 4px; color: #525252; cursor: pointer; }
.plz-ac-fill:hover { background: #E0E0E0; }

/* product rows (64px) */
.plz-ac-p { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 4px 8px; border-radius: 12px;
  text-decoration: none; }
/* !important: the theme's img { height: auto } would stretch non-square photos to ~70px */
.plz-ac-p img, .plz-ac-noimg { flex: none; width: 56px !important; height: 56px !important; max-width: none;
  border-radius: 8px; object-fit: contain; background: #fff; }
.plz-ac-p.is-oos img { opacity: .4; }
.plz-ac-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* no price row any more (nightly index): the name may use two lines */
.plz-ac-name { font-size: 12px; font-weight: 400; line-height: 20px; color: #525252;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.plz-ac-price { display: flex; align-items: center; gap: 6px; }
.plz-ac-off { padding: 0 4px; border-radius: 4px; background: #DA1E28; color: #fff;
  font-size: 14px; font-weight: 500; line-height: 20px; }
.plz-ac-amount { font-size: 16px; font-weight: 500; line-height: 26px; color: #161616; }
.plz-ac-cur { font-size: 10px; line-height: 16px; color: #8D8D8D; }
.plz-ac-oos { font-size: 12px; line-height: 20px; color: #8D8D8D; }

/* keyboard / hover highlight, footer, misc */
.plz-ac-nav:hover, .plz-ac-nav.plz-ac-active { background: #F4F4F4; }
.plz-ac-all { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px;
  border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 20px; color: #075250; text-decoration: none; }
.plz-ac-all:hover { color: #075250; }
.plz-ac-dym { display: block; padding: 4px 8px; border-radius: 8px; font-size: 12px; color: #b35c00; text-decoration: none; }
.plz-ac-empty { margin: 16px 0; text-align: center; font-size: 12px; color: #8D8D8D; }
.plz-ac-limit { margin: 0; padding: 0 8px; font-size: 12px; line-height: 20px; color: #8D8D8D; }

/* loading skeleton (only when an answer takes > 250 ms): same rows as the real panel */
.plz-ac-sk-s { display: flex; align-items: center; min-height: 36px; padding: 8px; }
.plz-ac-sk-p { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 4px 8px; }
.plz-ac-sk-txt { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.plz-ac-sk-line, .plz-ac-sk-img { display: block; border-radius: 6px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E4E4E4 50%, #F0F0F0 75%); background-size: 200% 100%;
  animation: plz-ac-shimmer 1.2s ease-in-out infinite; }
.plz-ac-sk-line { height: 10px; }
.plz-ac-sk-img { flex: none; width: 56px; height: 56px; border-radius: 8px; }
@keyframes plz-ac-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .plz-ac-sk-line, .plz-ac-sk-img { animation: none; } }

/* ---------------------------------------------------------------- empty box / no match / error
   ("Search Dropdown - No Match"): alert, "recent searches", "most searched" as chips */
.search-products-ajax .plz-ac-home { gap: 24px; margin-top: 0; padding-bottom: 0; }   /* the panel's own padding spaces it */
.plz-ac-alert { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 12px; background: #F4F4F4; font-size: 12px; font-weight: 500; line-height: 20px; }
.plz-ac-alert-msg { display: flex; align-items: center; gap: 6px; color: #161616; }
.plz-ac-alert-msg svg { flex: none; }
.plz-ac-alert-act { flex: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 500;
  color: #075250; text-decoration: none; cursor: pointer; }
.plz-ac-alert-act:hover { color: #075250; text-decoration: underline; background: none; }
.plz-ac-sec { display: flex; flex-direction: column; gap: 12px; }
.plz-ac-sec-head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px;
  font-size: 14px; font-weight: 500; line-height: 22px; color: #161616; }
.plz-ac-trash { display: inline-flex; padding: 0; border: 0; background: none; color: #8D8D8D; cursor: pointer; }
.plz-ac-trash:hover { color: #DA1E28; }
.plz-ac-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; }
.plz-ac-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 6px 8px;
  border: 1px solid #E0E0E0; border-radius: 8px; background: #fff;
  font-size: 12px; font-weight: 400; line-height: 16px; color: #525252; text-decoration: none; }
.plz-ac-chip:hover { color: #525252; }
.plz-ac-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plz-ac-chip-x { flex: none; display: inline-flex; color: #8D8D8D; cursor: pointer; border-radius: 50%; }
.plz-ac-chip-x:hover { color: #DA1E28; }
.plz-ac-chip-ico { flex: none; display: inline-flex; color: #6F6F6F; }
.plz-ac-hr { display: block; height: 0; border-top: .5px solid #E0E0E0; }

/* chips on the right, vertical rule, banner on the left */
.plz-ac-home-body { display: flex; align-items: stretch; gap: 16px; }
.plz-ac-home-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.plz-ac-vr { display: block; flex: none; width: 0; border-right: .5px solid #E0E0E0; }
.plz-ac-banner { flex: 1 1 0; min-width: 0; display: block; align-self: flex-start; border-radius: 12px; overflow: hidden; }
/* the image keeps its own proportions (any banner size works); only the width is fixed by the column */
.plz-ac-banner img { display: block; width: 100% !important; height: auto !important; border-radius: 12px; }
@media (max-width: 991.98px) {
  .plz-ac-banner, .plz-ac-vr { display: none; }
}

/* ---------------------------------------------------------------- desktop: the box opens into the 764px panel */
@media (min-width: 992px) {
  .search-products-ajax.plz-ac-open { height: var(--plz-ac-h); z-index: 1000; }
  .search-products-ajax.plz-ac-open input.search {
    position: absolute; top: 0; left: calc(var(--plz-ac-left) + 8px); z-index: 1002;
    width: calc(var(--plz-ac-w) - 16px) !important; height: var(--plz-ac-h);
    padding-left: 40px; border: 1px solid #075250 !important; border-radius: 1000px;
    background-color: #F4F4F4; font-size: 12px; font-weight: 500; color: #161616;
    box-shadow: none !important; outline: none;
  }
  /* "Search Dropdown - No Match": 764px wide, padding 8px 8px 16px, 24px between the box row and the content */
  .search-products-ajax.plz-ac-open .results {
    position: absolute !important; top: -8px !important; left: var(--plz-ac-left) !important; right: auto !important;
    width: var(--plz-ac-w) !important; max-height: calc(100vh - 24px); overflow-y: auto;
    padding: calc(var(--plz-ac-h) + 32px) 8px 16px !important; border-radius: 20px !important;
    background: #fff; box-shadow: 0 12px 40px rgba(22, 22, 22, .18); z-index: 1001; align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .search-products-ajax.plz-ac-open .close-search {
    position: absolute; z-index: 1003; width: 16px !important; height: 16px !important;
    top: calc(var(--plz-ac-h) / 2 - 8px); left: calc(var(--plz-ac-left) + 24px); cursor: pointer;
  }
  .search-products-ajax.plz-ac-open .close-search path { stroke: #6F6F6F; }
}

/* ---------------------------------------------------------------- narrow screens: full-screen panel
   ("Search - Recent - Mobile", 375px frame). The open form covers the screen: a header row (back button on
   the right, the box on the left) and the content under it (recent / most searched chips, banner, or the
   results while typing). The back button is added by autocomplete.js; the page under it does not scroll. */
.plz-ac-back { display: none; }
html.plz-ac-lock, html.plz-ac-lock body { overflow: hidden !important; }
@media (max-width: 991.98px) {
  /* the header layers the form sits in (theme: .site-header z-index 1001, .header-items-wrapper 3) would keep
     the panel under the page's floating buttons: lift them while the panel is open */
  html.plz-ac-lock .site-header, html.plz-ac-lock .site-header .header-items-wrapper { z-index: 100000 !important; }
  .search-products-ajax.plz-ac-open {
    position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;
    width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important;
    display: grid !important; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: 8px; align-items: center; align-content: stretch;
    padding: 8px 12px 12px 16px;              /* header: 12px beside the back button, 16px beside the box */
    background: #fff; direction: rtl; overflow: hidden;
  }
  .search-products-ajax.plz-ac-open .plz-ac-back {
    display: inline-flex; grid-column: 1; grid-row: 1; width: 24px; height: 24px; padding: 0; margin: 0;
    border: 0; background: none; cursor: pointer;
  }
  .search-products-ajax.plz-ac-open input.search {
    grid-column: 2; grid-row: 1; position: static !important; width: 100% !important; height: 42px !important;
    margin: 0 !important; padding: 10px 40px 10px 16px !important;   /* search icon on the right */
    border: 1px solid #075250 !important; border-radius: 1000px !important;
    background: #F4F4F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23878787' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19zM22 22l-2-2'/%3E%3C/svg%3E") no-repeat right 16px center !important;
    background-size: 16px 16px !important;
    font-size: 12px !important; font-weight: 500; line-height: 20px; color: #525252; text-align: right;
    box-shadow: none !important; outline: none;
  }
  /* × inside the box (left end), only while there is text: clears it (autocomplete.js) */
  /* the theme caps the header box at 260px: in the panel it fills its row (the × sits inside it) */
  body .search-products-ajax.plz-ac-open input.search { max-width: none !important; }
  .search-products-ajax.plz-ac-open .close-search { display: none !important; }
  .search-products-ajax.plz-ac-open.plz-ac-has-q .close-search {
    display: block !important; grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    position: relative !important; top: auto !important; left: auto !important; z-index: 2;
    width: 16px !important; height: 16px !important; margin: 0 0 0 16px; cursor: pointer;
  }
  .search-products-ajax.plz-ac-open.plz-ac-has-q .close-search path { stroke: #6F6F6F; }
  .search-products-ajax.plz-ac-open.plz-ac-has-q input.search { padding-left: 40px !important; }
  /* "body" in front: wins over the theme's ".site-header .search .results { width: 90vw !important }" (mobile),
     which made the content 90% wide and pushed it to one side */
  body .search-products-ajax.plz-ac-open .results {
    grid-column: 1 / -1; grid-row: 2; align-self: stretch;
    position: static !important; top: auto !important; left: auto !important; right: auto !important;
    width: auto !important; max-height: none !important; transform: none !important;
    margin: 0 -12px -12px -16px;               /* the content uses the full screen width */
    padding: 16px 16px 24px !important; border-radius: 0 !important; box-shadow: none !important;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
    align-items: stretch !important; justify-content: flex-start !important;
  }
  .search-products-ajax .results .plz-ac { max-height: none; overflow: visible; }
  .plz-ac-body { flex-direction: column; gap: 24px; }

  /* while typing ("Content": padding 16px 16px 24px, 24px between the parts); the way to all results is the
     outlined «مشاهده همه نتایج» button at the bottom */
  .search-products-ajax.plz-ac-open .plz-ac { gap: 24px; }
  .search-products-ajax.plz-ac-open .plz-ac-all {
    min-height: 44px; padding: 10px 16px; border: 1px solid #075250; border-radius: 12px; background: #fff;
    font-size: 12px; font-weight: 500; line-height: 20px; color: #075250;
  }
  .search-products-ajax.plz-ac-open .plz-ac-all:hover,
  .search-products-ajax.plz-ac-open .plz-ac-all.plz-ac-active { background: #E6F2F1; }
  /* the button stays at the bottom of the screen; suggestions and products scroll under it. The white
     shadow is the band around it, so nothing shows through; the list gets room for it at its end */
  .search-products-ajax.plz-ac-open .plz-ac-all {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 5; margin: 0;
    box-shadow: 0 0 0 16px #fff, 0 -16px 24px 8px rgba(255, 255, 255, .9);
  }
  body .search-products-ajax.plz-ac-open .results:has(.plz-ac-all) { padding-bottom: 92px !important; }

  /* content: sections 24px apart, no dividing rules, chips flush with the edges */
  .search-products-ajax .plz-ac-home { gap: 24px; margin-top: 0; padding-bottom: 0; }
  .plz-ac-home .plz-ac-hr, .plz-ac-vr { display: none; }
  .plz-ac-home-body { flex-direction: column; gap: 24px; }
  .plz-ac-home-main { padding-top: 0; }
  .plz-ac-sec-head, .plz-ac-chips { padding: 0; }
  .plz-ac-chip { flex-direction: row-reverse; }   /* as in the design: the × / trend icon right of the label */
  .plz-ac-banner { display: block; align-self: stretch; width: 100%; }   /* promo banner under the chips */
}