/* AI search: styles of the header search form and its car chip, namespaced .ai-* and .searchBar--ai.
   The answer pop-up has its own stylesheet, public/css/ai-popup.css. */

/* 'Masina mea' chip under the search bar (absolute inside .searchBar: does not change the header layout) */
.ai-mycar {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  max-width: 100%;
  margin-top: 2px;
  text-align: left;
}
.ai-mycar:empty {
  display: none;
}
/* on the AI form the chip is a row of its own above the search input, with square corners; on wide screens the cart
   column moves down by the same amount, so it stays level with the search row */
.searchBar--ai .ai-mycar {
  position: static;
  order: 1;
  flex: 0 0 100%;
  min-width: 0;
  margin: 0 0 6px;
}
.ai-mycar .ai-chip {
  box-sizing: border-box;
  border-radius: 0;
}
.ai-mycar .ai-chip-x {
  border-radius: 0;
}
@media (min-width: 701px) {
  .toolbarMeniuJos:has(.ai-mycar) .rightMeniuToolbar {
    padding-top: 34px;
  }
}

/* 'AI Powered' / 'Powered by LiderIT' labels: their own row under the search input, right aligned. In the page flow
   (.searchBar wraps), so they never cover what follows the search bar (the cart line on phones, the page on desktop). */
.searchBar {
  flex-wrap: wrap;
}
.ai-powered {
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin: 3px 0 -4px;
}
/* 'Powered by LiderIT' is a link, rendered by PHP in views/desktop/menu.php when ai_search_ui = 1 */
.ai-powered a {
  text-decoration: none;
}
/* the header styles its menu links (.leftMeniuToolbar a: uppercase, bold, wide padding): keep the label a plain pill */
.ai-powered a.ai-powered-by {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 4px 10px;
  border-radius: 0;
  background: var(--alb, #fff);
  color: var(--griScris, #707070);
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
/* same hover as the other links of the toolbar (.leftMeniuToolbar a:hover in style.css) */
.ai-powered a.ai-powered-by:hover,
.ai-powered a.ai-powered-by:focus {
  background: #d93644;
  color: #fff;
}
.ai-powered span,
.ai-powered a {
  padding: 1px 8px;
  border: 1px solid var(--griDeschis, #dae0e5);
  border-radius: 10px;
  background: var(--alb, #fff);
  color: var(--griScris, #707070);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
@media print {
  .ai-powered {
    display: none;
  }
}

/* vehicle chip (the car above the search bar) */
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border-radius: 14px;
  background: var(--griDeschis, #dae0e5);
  color: var(--negru, #1f1e24);
  font-size: 12px;
  font-weight: 600;
}
.ai-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-chip-x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--negru, #1f1e24);
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}
.ai-chip-x:hover,
.ai-chip-x:focus {
  background: var(--rosu, #b22124);
  color: var(--alb, #fff);
}


/* ---------------------------------------------------------------- AI search form (facelift)
   Active only when views/desktop/menu.php adds .searchBar--ai (ai_search_ui 1 or 2, not on category pages); the heading
   and the suggestion chips exist only on the homepage (.searchBar--ai-home). The classic search box is not touched.
   Font family, font sizes of input and button, and the 3px corner radius are the site's own. */
.searchBar--ai {
  position: relative;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
}
.searchBar--ai form {
  order: 3;
  flex: 0 0 100%;
}
.searchBar--ai #cautaInput {
  display: flex;
  align-items: stretch;
  min-height: 34px;
  background: var(--alb, #fff);
  border: 1px solid var(--griDeschis, #dae0e5);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(31, 30, 36, .08);
}
.searchBar--ai #cautaInput:focus-within {
  border-color: var(--rosuScris, #d93644);
}
.searchBar--ai .ai-in-spark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 6px 0;
  padding: 0 12px 0 14px;
  border-right: 1px solid var(--griDeschis, #dae0e5);
  color: var(--rosuScris, #d93644);
}
.searchBar--ai .ai-in-spark svg {
  display: block;
  width: 20px;
  height: 20px;
}
.searchBar--ai-home .ai-in-spark svg {
  width: 22px;
  height: 22px;
}
.searchBar--ai #cautaInput input[type="text"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}
.searchBar--ai #cautaInput input[type="text"]::placeholder {
  color: var(--griScris, #707070);
  opacity: 1;
}
.searchBar--ai .ai-pill {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 12px 0 6px;
  padding: 2px 9px;
  border: 1px solid #c3c9cf;
  border-radius: 3px;
  background: var(--alb, #fff);
  color: var(--griScris, #707070);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
.searchBar--ai #cautaInput #searchbut {
  position: static;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: -1px -1px -1px 0;
  padding: 0 24px 0 18px;
  border-radius: 0;
  background-color: var(--rosuScris, #d93644);
  box-sizing: border-box;
  font-weight: 600;
  text-transform: none;
}
.searchBar--ai #cautaInput #searchbut img {
  display: block;
  width: 22px;
  height: 22px;
}
/* homepage: larger button icon (the row itself has the same height as on the other pages) */
.searchBar--ai-home #cautaInput #searchbut img {
  width: 28px;
  height: 28px;
}
.searchBar--ai #cautaInput #searchbut:focus-visible,
.searchBar--ai .ai-try-chip:focus-visible {
  outline: 2px solid var(--negru, #1f1e24);
  outline-offset: 2px;
}

/* suggestions row (homepage) */
.searchBar--ai .ai-try {
  order: 4;
  flex: 1 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 50%;
  margin: 10px 0 0;
  text-align: left;
}
.searchBar--ai .ai-try-label {
  margin-right: 4px;
  color: var(--griScris, #707070);
  font-size: 13px;
}
.searchBar--ai .ai-try-chip {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #c3c9cf;
  border-radius: 0;
  background: var(--alb, #fff);
  color: var(--negru, #1f1e24);
  font-family: inherit;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}
.searchBar--ai .ai-try-chip:hover,
.searchBar--ai .ai-try-chip:focus {
  border-color: var(--rosuScris, #d93644);
  color: var(--rosuScris, #d93644);
}
.searchBar--ai .ai-powered {
  order: 5;
}
.searchBar--ai-home .ai-powered {
  flex: 0 0 auto;
  margin: 10px 0 0 10px;
}
/* the search column may shrink, so the chips row never widens the page */
.toolbarMeniuJos--ai-home .leftMeniuToolbar {
  min-width: 0;
}

@media (max-width: 700px) {
  .searchBar--ai .ai-try {
    flex: 0 0 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .searchBar--ai .ai-try::-webkit-scrollbar {
    display: none;
  }
  .searchBar--ai-home .ai-powered {
    flex: 0 0 100%;
    margin: 6px 0 -4px;
  }
  .searchBar--ai #cautaInput #searchbut {
    padding: 0 14px 0 10px;
  }
  .searchBar--ai .ai-in-spark {
    padding: 0 9px 0 10px;
  }
  .searchBar--ai .ai-pill {
    margin: 0 8px 0 4px;
  }
}
@media (max-width: 400px) {
  .searchBar--ai #cautaInput #searchbut span {
    display: none;
  }
  .searchBar--ai #cautaInput #searchbut {
    padding: 0 10px;
  }
}
@media print {
  .searchBar--ai .ai-try {
    display: none;
  }
}

/* ---------------------------------------------------------------- piese-auto-oradea.ro (views/desktop/header_new.php)
   'Masina mea' sits inside the search input, on the left (ai-search.js moves the text after it), so the fixed header keeps
   its height. The x is a <button>: style.css paints every button bordo, the .ai-chip-x rules above win by specificity. */
#hnSearchForm .ai-mycar--in {
  top: 50%;
  left: 6px;
  max-width: 45%;
  margin: 0;
  transform: translateY(-50%);
}
#hnSearchForm .ai-mycar--in .ai-chip {
  border-radius: 4px;
}
#hnSearchForm .ai-mycar--in .ai-chip-x {
  border-radius: 4px;
}

/* ---------------------------------------------------------------- piese: header search with AI (#hnSearchForm.hn-ai)
   Same form as the classic search, AI look: spark in the box, red -> violet gradient border, gradient button with a spark,
   and on focus of the EMPTY box a panel with examples (.ai-try-chip: a click searches, ai-search.js). Brand red #CC0000.
   The panel is absolute (the fixed header keeps its height). Buttons get explicit backgrounds: style.css paints every
   <button> bordo / blue on hover. */
#hnSearchForm.hn-ai {
  --hn-ai-a: #cc0000;
  --hn-ai-b: #e11d48;
  --hn-ai-c: #7c3aed;
}
#hnSearchForm.hn-ai #hnSearchInput {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, var(--hn-ai-a), var(--hn-ai-b) 55%, var(--hn-ai-c)) border-box;
  box-shadow: 0 4px 18px rgba(124, 58, 237, .08);
  transition: box-shadow .2s ease;
}
#hnSearchForm.hn-ai #hnSearchInput:focus {
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .12), 0 6px 22px rgba(124, 58, 237, .16);
}
#hnSearchForm.hn-ai #hnSearchInput::placeholder {
  color: #8a8f98;
}
.hn-ai-spark {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--hn-ai-b);
  pointer-events: none;
  animation: hnAiPulse 2.8s ease-in-out infinite;
}
.hn-ai-spark svg,
.hn-ai-btn-spark svg,
.hn-ai-panel-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes hnAiPulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: .65; transform: translateY(-50%) scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .hn-ai-spark { animation: none; }
}
#hnSearchForm .hn-ai-btn,
#hnSearchForm .hn-ai-btn:hover {
  background: linear-gradient(100deg, var(--hn-ai-a), var(--hn-ai-b) 60%, var(--hn-ai-c));
  color: #fff;
}
#hnSearchForm .hn-ai-btn:hover {
  filter: brightness(1.08);
}
.hn-ai-btn-spark {
  width: 20px;
  height: 20px;
}

/* panel with examples, under the box */
.hn-ai-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 16px 18px;
  border: 1px solid #ece7f7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(31, 30, 36, .16);
  text-align: left;
}
#hnSearchInput:focus:placeholder-shown ~ .hn-ai-panel {
  display: block;
}
.hn-ai-panel-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hn-ai-panel-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--hn-ai-a), var(--hn-ai-c));
  color: #fff;
}
.hn-ai-panel-title {
  margin: 0;
  color: #1f1e24;
  font-size: 15px;
  font-weight: 700;
}
.hn-ai-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hn-ai-b), var(--hn-ai-c));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.hn-ai-panel-text {
  margin: 3px 0 0;
  color: #5f6470;
  font-size: 13px;
  line-height: 1.45;
}
.hn-ai-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.hn-ai-try-label {
  color: #8a8f98;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#hnSearchForm .hn-ai-chip {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #e4e0ee;
  border-radius: 999px;
  background: #faf8ff;
  color: #1f1e24;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}
#hnSearchForm .hn-ai-chip:hover,
#hnSearchForm .hn-ai-chip:focus {
  border-color: var(--hn-ai-b);
  background: #fff1f4;
  color: var(--hn-ai-a);
}

/* 'Masina mea' inside the box comes after the spark */
#hnSearchForm.hn-ai .ai-mycar--in {
  left: 44px;
}
@media (max-width: 640px) {
  .hn-ai-panel { padding: 12px; }
  .hn-ai-try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hn-ai-try::-webkit-scrollbar { display: none; }
  #hnSearchForm.hn-ai .ai-mycar--in { left: 38px; max-width: 40%; }
}

/* "Activeaza gratuit" (ai_search_ui = 3): 'Powered by LiderIT' inside the box, left of the button (large screens), and at the
   bottom of the examples panel (every screen) */
.hn-ai-by {
  display: none;
  position: absolute;
  top: 50%;
  right: 138px;
  z-index: 1;
  transform: translateY(-50%);
  padding: 3px 9px;
  border: 1px solid #e4e0ee;
  border-radius: 999px;
  background: #faf8ff;
  color: #6b7280;
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  text-decoration: none;
}
.hn-ai-by b {
  color: #4c1d95;
}
.hn-ai-by:hover {
  border-color: var(--hn-ai-c, #7c3aed);
  color: #1f1e24;
}
@media (min-width: 1024px) {
  .hn-ai-by { display: inline-block; }
}
.hn-ai-panel-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0edf6;
  text-align: right;
  font-size: 11px;
}
.hn-ai-panel-foot a {
  color: #8a8f98;
  text-decoration: none;
}
.hn-ai-panel-foot a b {
  color: #4c1d95;
}

/* piese: style.css sets input[type="text"] { padding: 6px 10px 5px } (specificity 0,1,1), which BEATS the Tailwind
   padding utilities (pl-11 etc., 0,1,0) - the text started at 10px and ran under the spark. The paddings of the AI box
   are set here with id selectors, which win. Right side leaves room for the Cauta button (and the LiderIT label). */
#hnSearchForm.hn-ai #hnSearchInput {
  padding: 6px 6.5rem 5px 2.75rem;
}
@media (min-width: 640px) {
  #hnSearchForm.hn-ai #hnSearchInput {
    padding-left: 3rem;
    padding-right: 8.5rem;
  }
}
@media (min-width: 1024px) {
  #hnSearchForm.hn-ai.hn-ai-lider #hnSearchInput {
    padding-right: 15rem;   /* butonul + eticheta Powered by LiderIT */
  }
}
/* phone: the in-box spark goes away (the button keeps its own), the text gets the full width */
@media (max-width: 639px) {
  .hn-ai-spark {
    display: none;
  }
  #hnSearchForm.hn-ai #hnSearchInput {
    padding-left: 1rem;
  }
  #hnSearchForm.hn-ai .ai-mycar--in {
    left: 8px;
  }
}