/* ============================================================================
   „Намери категория части" — карето с търсачката из категориите (partials/catfind):
   началната (над картите с категориите) и /chasti. Изнесено от home.css на
   06.11.2026, за да се ползва и там. Зарежда се само където го има.
   ========================================================================== */

/* ── „Намери категория части" — над решетката с категориите (картинката на Мариян, 03.11.2026) ── */
.h-catfind {
  position: relative; z-index: 5; isolation: isolate; margin-bottom: 34px; padding: 24px 28px 22px;   /* z-index — падащият списък над картите отдолу */
  border-radius: 20px; border: 1px solid #e3ecd8;
  background: linear-gradient(100deg, #fbfdf8 0%, #f3f9eb 55%, #e6f3d4 100%);
  box-shadow: 0 18px 40px -28px rgba(15,27,38,.3);
}
/* вдясно частите „потъват" във фона: мек лимонен ореол зад тях, две размити диагонални ивици
   (без твърди ръбове) и сянка-под, на която стъпват (Мариян, 03.11.2026) */
.h-catfind::before {
  content: ''; position: absolute; z-index: -2; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    /* две тънки дъги зад частите — центърът им е под карето, вдясно */
    radial-gradient(circle at 88% 135%, transparent 255px, rgba(143,209,58,.5) 256px, rgba(143,209,58,.5) 258px, transparent 259px),
    radial-gradient(circle at 88% 135%, transparent 295px, rgba(143,209,58,.28) 296px, rgba(143,209,58,.28) 297px, transparent 298px),
    radial-gradient(34% 75% at 84% 52%, rgba(166,227,82,.55) 0%, rgba(166,227,82,.22) 45%, rgba(166,227,82,0) 75%),
    linear-gradient(118deg, transparent 60%, rgba(143,209,58,.16) 70%, rgba(143,209,58,0) 80%),
    linear-gradient(118deg, transparent 74%, rgba(143,209,58,.22) 84%, rgba(143,209,58,.06) 100%);
}
.h-catfind::after {
  content: ''; position: absolute; z-index: -2; right: 36px; bottom: 6px; width: 290px; height: 46px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(53,92,0,.28) 0%, rgba(53,92,0,0) 70%);
}
.h-catfind__img { position: absolute; z-index: -1; right: 22px; bottom: 14px; width: 300px; height: auto; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(53,92,0,.18)); }
.h-catfind__head, .h-catfind__form { max-width: calc(100% - 350px); }
.h-catfind__pop { max-width: calc(100% - 320px); }
.h-catfind__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.h-catfind__badge {
  flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #6fb31a 0%, #355c00 100%); box-shadow: 0 10px 20px -10px rgba(63,110,0,.8);
}
.h-catfind__badge svg { width: 28px; height: 28px; }
.h-catfind__title { font-size: 28px; font-weight: 900; letter-spacing: -.5px; line-height: 1.1; color: #0f1b26; }
.h-catfind__title span { color: var(--accent); }
.h-catfind__sub { margin: 4px 0 0; font-size: 14.5px; color: #4b5249; }
.h-catfind__sub-m { display: none; }   /* краткият текст — само на телефон (долу) */
.h-catfind__form {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 18px; margin-bottom: 16px;
  background: #fff; border: 1.5px solid #cfe6b2; border-radius: 14px; box-shadow: 0 10px 24px -18px rgba(79,135,1,.7);
  transition: border-color .15s, box-shadow .15s;
}
.h-catfind__form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,135,1,.12); }
.h-catfind__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: text; }
.h-catfind__field svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.h-catfind__field input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: none; font: inherit; font-size: 15.5px; color: var(--dark); }
.h-catfind__field input::placeholder { color: #8a9296; }
.h-catfind__go {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #5a9a08 0%, #3f6e00 100%); color: #fff; font: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(63,110,0,.7);
}
.h-catfind__go svg { width: 19px; height: 19px; }
.h-catfind__go:hover { filter: brightness(1.08); }
.h-catfind__panel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid #e3e8e5; border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(15,27,38,.35);
}
.h-catfind__panel[hidden] { display: none; }
.h-catfind__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--dark); text-decoration: none; }
.h-catfind__row:hover, .h-catfind__row.is-active { background: #f1f8e7; }
.h-catfind__row img, .h-catfind__ph { width: 38px; height: 38px; flex: none; object-fit: contain; border-radius: 8px; background: #f4f6f3; }
.h-catfind__row span { display: flex; flex-direction: column; min-width: 0; }
.h-catfind__row b { font-size: 14.5px; font-weight: 700; }
.h-catfind__row small { font-size: 12px; color: #6b726a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-catfind__empty { padding: 14px 12px; font-size: 13.5px; color: #4b5249; }
.h-catfind__pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.h-catfind__pop > span { margin-right: 4px; font-size: 13.5px; color: #4b5249; }
.h-catfind__pop a {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px;
  background: #fff; border: 1px solid #dfe8d6; color: var(--dark); font-size: 13.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 14px -12px rgba(15,27,38,.4); transition: border-color .15s, color .15s;
}
.h-catfind__pop a .nav__ic { width: 20px; height: 20px; color: var(--accent); }
.h-catfind__pop a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 1279px) {
  .h-catfind__img { width: 250px; }
  .h-catfind__head, .h-catfind__form { max-width: calc(100% - 290px); }
  .h-catfind__pop { max-width: calc(100% - 270px); }
}
@media (max-width: 1023px) {
  .h-catfind__img { display: none; }
  .h-catfind__head, .h-catfind__form, .h-catfind__pop { max-width: none; }
  .h-catfind::before, .h-catfind::after { display: none; }
}
/* Телефон — опростено (Мариян, 07.11.2026: „много да го опростим; линковете отдолу да изчезнат;
   клиентът лесно да разбере, че може да търси по име на категорията"). Остават само три неща:
   заглавие, един ред „какво правиш" и ПОЛЕТО — то е главното, бутонът е стрелка в края му,
   както в търсачките, с които хората са свикнали. Старото: ~/tools/backup-sauto-catfind-mob-2026-11-07 */
@media (max-width: 767px) {
  .h-catfind { padding: 18px 14px 16px; margin-bottom: 24px; }
  /* лупата вече е в полето — значката отгоре я повтаряше */
  .h-catfind__badge { display: none; }
  .h-catfind__head { display: block; margin-bottom: 12px; }
  .h-catfind__title { font-size: 21px; }
  .h-catfind__sub { margin-top: 5px; font-size: 13.5px; line-height: 1.4; }
  .h-catfind__sub-d { display: none; }
  .h-catfind__sub-m { display: inline; }
  /* полето — едно, бяло, с ясна зелена рамка: личи, че се пише в него */
  .h-catfind__form { flex-wrap: nowrap; gap: 6px; margin-bottom: 0; padding: 4px 4px 4px 14px; border-width: 2px; border-color: #b5dc86; }
  .h-catfind__field { gap: 10px; }
  /* 16px — под това iPhone увеличава страницата, щом пипнеш полето. С #id, защото общото
     правило в mobile.css (input:not(…):not(…):not(…) → 12px) е по-силно от два класа. */
  .h-catfind__field input { height: 46px; }
  #catFindQ { font-size: 16px; }
  .h-catfind__go { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 10px; }
  .h-catfind__go svg { width: 22px; height: 22px; }
  .h-catfind__go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* бързите връзки — на телефон ги няма */
  .h-catfind__pop { display: none; }
}