/* =============================================================================
   Survos MeiliBundle – Polished defaults (facet spacing + checkbox alignment)
   Framework-agnostic. Safe to use without Bootstrap/Tabler.
   ========================================================================== */

:root{
  --meili-bg:#fff; --meili-fg:#1f2328; --meili-muted:#6b7280;
  --meili-border:#e5e7eb; --meili-chip-bg:#f3f4f6; --meili-chip-fg:#374151;
  --meili-accent:#3b82f6; --meili-accent-weak:rgba(59,130,246,.12);
  --meili-badge-bg:rgba(0,0,0,.08); --meili-badge-fg:rgba(0,0,0,.7);
  --meili-radius:10px; --meili-pad:.75rem; --meili-gap:.75rem;
}

/* Header */
.meili-header .meili-bar{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--meili-border);background:var(--meili-bg)}
.meili-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--meili-chip-bg);color:var(--meili-chip-fg);padding:.25rem .5rem;border-radius:999px;font-size:.875rem}

/* Grid */
.insta-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem}
@media (max-width:900px){.insta-grid{grid-template-columns:1fr}}
.insta-grid>main{min-width:0}

/* Facet cards */
.facet-block{background:var(--meili-bg);border:1px solid var(--meili-border);border-radius:var(--meili-radius);padding:calc(var(--meili-pad) - .15rem) var(--meili-pad);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.facet-header{display:flex;align-items:center;gap:.5rem}
.facet-title{font-weight:700;margin:0;color:var(--meili-fg);letter-spacing:.01em}
.facet-actions{margin-left:auto;display:inline-flex;gap:.25rem}
.facet-collapse{background:transparent;border:0;padding:.25rem;border-radius:8px;cursor:pointer}
.facet-collapse:hover{background:var(--meili-accent-weak)}
.facet-collapse svg{width:16px;height:16px;transition:transform .15s ease}
.facet-collapse[aria-expanded="false"] svg{transform:rotate(-90deg)}
.facet-body{margin-top:.55rem}

/* ---------- FACET SEARCH INPUT (one-piece look) ---------- */
.ais-RefinementList .ais-SearchBox{margin-bottom:.4rem}
.ais-SearchBox-form{
  display:grid;grid-template-columns:1fr 40px;align-items:center;
  border:1px solid var(--meili-border);border-radius:10px;overflow:hidden;background:#fff
}
.ais-SearchBox-input{border:0;outline:0;padding:.55rem .65rem;font:inherit;color:inherit;background:transparent}
.ais-SearchBox-submit{width:40px;height:40px;border:0;border-left:1px solid var(--meili-border);background:#fff;cursor:pointer;display:grid;place-items:center}
/* keep facet search minimal: hide the small reset there */
.facet-block .ais-RefinementList .ais-SearchBox-reset{display:none}

/* ---------- MAIN SEARCH (typed value should look like text, not placeholder) ---------- */
.insta-grid > main .ais-SearchBox-input{
  color: var(--meili-fg);
  font-weight: 600;
}
.ais-SearchBox-input::placeholder{ color: var(--meili-muted); }
/* show reset "×" on main search */
.insta-grid > main .ais-SearchBox-reset{
  display:inline-grid;place-items:center;border:0;background:transparent;padding:.25rem;cursor:pointer
}

/* ---------- REFINEMENT LIST ROWS (tight + aligned) ---------- */
.ais-RefinementList-list{list-style:none;margin:0;padding:0}
.ais-RefinementList-item{padding:.15rem 0}
.ais-RefinementList-label{
  display:flex;align-items:center;gap:.55rem;
  line-height:1.25; /* fixes “tall” checkbox rows */
  cursor:pointer;
}

/* Custom checkbox: zero default margins and consistent box */
.ais-RefinementList-checkbox{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  margin:0; /* remove UA margins that cause odd spacing */
  width:1.05rem;height:1.05rem;border-radius:6px;
  border:1px solid var(--meili-border);background:#fff;display:inline-grid;place-content:center;
}
.ais-RefinementList-checkbox:focus{outline:0;box-shadow:0 0 0 3px var(--meili-accent-weak)}
.ais-RefinementList-checkbox:checked{border-color:var(--meili-accent);background:var(--meili-accent)}
.ais-RefinementList-checkbox:checked::after{content:'';width:.5rem;height:.5rem;background:#fff;border-radius:2px}

/* Text + count pill */
.ais-RefinementList-labelText{min-width:0;flex:1;color:var(--meili-fg)}
.ais-RefinementList-count{
  margin-left:.35rem;display:inline-block;padding:.125rem .375rem;border-radius:.5rem;
  font-size:.75rem;font-weight:600;background:var(--meili-badge-bg);color:var(--meili-badge-fg)
}

.ais-RefinementList-showMore{
  display:inline-block;margin-top:.35rem;border:1px solid var(--meili-border);
  border-radius:8px;padding:.3rem .6rem;background:#fff;cursor:pointer;font-size:.875rem
}
.ais-RefinementList-showMore:hover{border-color:var(--meili-accent);box-shadow:0 0 0 3px var(--meili-accent-weak)}
.ais-RefinementList--noRefinement .ais-RefinementList-searchBox,
.ais-RefinementList--noRefinement .ais-RefinementList-showMore{display:none}

/* ---------- RANGE SLIDER (clean lanes + handles) ---------- */
.ais-RangeSlider{padding:.15rem .5rem .55rem .15rem}
.rheostat{position:relative;height:22px}
.rheostat-background{position:absolute;left:0;right:0;top:9px;height:4px;background:var(--meili-border);border-radius:999px}
.rheostat-progress{position:absolute;top:9px;height:4px;background:var(--meili-accent);border-radius:999px}
.rheostat-handle{
  position:absolute;top:2px;transform:translate(-50%,0);width:18px;height:18px;border-radius:50%;
  border:2px solid var(--meili-accent);background:#fff;cursor:grab
}
.rheostat-handle:focus{outline:0;box-shadow:0 0 0 4px var(--meili-accent-weak)}
.rheostat-handle:active{cursor:grabbing}
.rheostat-tooltip{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-size:.75rem;color:var(--meili-muted);background:#fff;border:1px solid var(--meili-border);
  padding:2px 6px;border-radius:6px
}

/* ---------- STATS ---------- */
.ais-Stats{color:var(--meili-muted)}

/* ---------- HIGHLIGHT ---------- */
mark.ais-Highlight,em.ais-Highlight{
  background:linear-gradient(transparent 60%, rgba(255,234,0,.55) 0);
  border-radius:.15rem;font-weight:600;color:inherit;word-break:break-word;overflow-wrap:anywhere;letter-spacing:-.02em
}
@media (prefers-color-scheme:dark){
  mark.ais-Highlight,em.ais-Highlight{
    background:linear-gradient(transparent 60%, rgba(255,214,10,.45) 0);
    text-shadow:0 0 .01px currentColor,0 0 .01px currentColor
  }
}
mark{padding:0 !important}

/* ---------- HIT GRID HELPERS ---------- */
.grid-5{width:calc(20% - 1rem) !important}
.grid-4{width:calc(25% - 1rem) !important}
.grid-3{width:calc(33.333% - 1rem) !important}
@media (max-width:1199.98px){.grid-3{width:calc(50% - 1rem) !important}}
@media (max-width:575.98px){.grid-3{width:calc(100% - 1rem) !important}}
.grid-2{width:calc(50% - 1rem) !important}
.grid-1{width:calc(100% - 1rem) !important}
.line-limit-1,.line-limit-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-limit-1{-webkit-line-clamp:1}.line-limit-2{-webkit-line-clamp:2}
.meta-grid{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;min-width:0}
.meta-key{white-space:nowrap}.meta-val{min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* Override InstantSearch default layout */
.ais-InfiniteHits-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.ais-InfiniteHits-item {
  list-style: none;
  display: block !important; /* keep block but allow width to control columns */
  padding: 0;
  margin: 0;
}