/* =========================================================
   TB MeiliSearch Finder
   ThirtyBees 1.5.1 + Bootstrap 5.1.1
   Wersja czysta (bez fallbacków JoliSearch)
========================================================= */

/* =========================
   1. Zmienne
========================= */
:root{
  --tb-finder-bg: #ffffff;
  --tb-finder-fg: #212529;
  --tb-finder-muted: #6c757d;

  --tb-finder-border: rgba(0,0,0,.12);
  --tb-finder-shadow: 0 14px 40px rgba(0,0,0,.14);

  --tb-finder-radius: .6rem;
  --tb-finder-gap: .75rem;

  --tb-finder-item-pad-y: .55rem;
  --tb-finder-item-pad-x: .85rem;

  --tb-finder-thumb: 48px;
  --tb-finder-z: 1060;
}

/* 2-kolumnowy układ wnętrza dropdownu */
.tb-finder__cols{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0;
}

.tb-finder__col{
  min-width: 0;
}

.tb-finder__col + .tb-finder__col{
  border-left: 1px solid rgba(0,0,0,.06);
}

/* Mobile: jedna kolumna */
@media (max-width: 575.98px){
  .tb-finder__cols{
    grid-template-columns: 1fr;
  }
  .tb-finder__col + .tb-finder__col{
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,.06);
  }
}


/* =========================
   2. Wrapper
========================= */
.tb-finder{
  position: relative;
}

.tb-finder *,
.tb-finder *::before,
.tb-finder *::after{
  box-sizing: border-box;
}

/* =========================
   3. Input
========================= */
.tb-finder__input{
  width: 100%;
}

.tb-finder__input.form-control{
  padding-right: 2.4rem;
}

.tb-finder__icon{
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--tb-finder-muted);
  opacity: .85;
}

/* =========================
   4. Dropdown
========================= */
.tb-finder__dropdown{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .4rem);
  z-index: var(--tb-finder-z);

  background: var(--tb-finder-bg);
  color: var(--tb-finder-fg);
  border: 1px solid var(--tb-finder-border);
  border-radius: var(--tb-finder-radius);
  box-shadow: var(--tb-finder-shadow);

  overflow: hidden;
  display: none;
  backdrop-filter: blur(6px);
}

.tb-finder.is-open .tb-finder__dropdown{
  display: block;
}

.tb-finder__scroll{
  max-height: 65vh;
  overflow-y: auto;
}

/* =========================
   5. Sekcje (Produkty / Kategorie / Producenci)
========================= */
.tb-finder__section{
  padding: .45rem .9rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tb-finder-muted);
  background: rgba(0,0,0,.025);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* =========================
   6. Lista wyników
========================= */
.tb-finder__list{
  list-style: none;
  margin: 0;
  padding: .35rem 0;
}

.tb-finder__item{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--tb-finder-item-pad-y) var(--tb-finder-item-pad-x);
  transition: background .15s ease;
}

.tb-finder__item:hover,
.tb-finder__item:focus{
  background: rgba(13,110,253,.06);
  outline: none;
}

.tb-finder__item.is-active{
  background: rgba(13,110,253,.12);
}

/* =========================
   7. Layout produktowy
========================= */
.tb-finder__row{
  display: grid;
  grid-template-columns: var(--tb-finder-thumb) 1fr auto;
  gap: var(--tb-finder-gap);
  align-items: center;
}

.tb-finder__thumb{
  width: var(--tb-finder-thumb);
  height: var(--tb-finder-thumb);
  border-radius: .45rem;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb-finder__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tb-finder__main{
  min-width: 0;
}

.tb-finder__title{
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-finder__meta{
  margin-top: .15rem;
  font-size: .82rem;
  color: var(--tb-finder-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-finder__price{
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  font-size: .95rem;
}

/* =========================
   8. Badge
========================= */
.tb-finder__badge{
  display: inline-block;
  padding: .18rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  background: rgba(25,135,84,.12);
  color: #198754;
  margin-left: .35rem;
}

/* =========================
   9. Stany specjalne
========================= */
.tb-finder__empty,
.tb-finder__loading{
  padding: 1rem .9rem;
  font-size: .9rem;
  color: var(--tb-finder-muted);
}

.tb-finder__footer{
  padding: .65rem .9rem;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: .85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================
   10. Dostępność
========================= */
.tb-finder__item:focus-visible{
  outline: 2px solid rgba(13,110,253,.4);
  outline-offset: -2px;
}

/* =========================
   11. Mobile
========================= */
@media (max-width: 575.98px){
  :root{
    --tb-finder-thumb: 42px;
    --tb-finder-gap: .6rem;
  }

  .tb-finder__title{
    font-size: .92rem;
  }

  .tb-finder__price{
    font-size: .9rem;
  }
}