/* ============================================================
   BengalTutors — SHARED SEARCH BAR styles
   Upload to:  public_html/css/search-bar.css

   Used by the homepage and the results page. The 5 filters sit
   on one responsive grid. Prefixed .ts- so nothing clashes.
   ============================================================ */

.ts-bar{
  display:grid;
  grid-template-columns:1.5fr 1.3fr 1fr .85fr 1fr auto;
  gap:12px;
  align-items:end;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  box-shadow:0 4px 20px rgba(17,24,39,.06);
}

.ts-f{min-width:0}                    /* lets flex/grid children shrink instead of overflowing */
.ts-f label{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#6b7280;margin-bottom:6px;
}

.ts-f .bt-ac-input,
.ts-f select{
  width:100%;
  padding:11px 13px;
  border:1.5px solid #d1d5db;
  border-radius:10px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.95rem;
  color:#111827;
  background:#fff;
  height:44px;
}
.ts-f .bt-ac-input:focus,
.ts-f select:focus{outline:none;border-color:#0d6b3e}

/* subject box grows a little taller when chips are inside it */
.ts-f-subject{align-self:stretch;display:flex;flex-direction:column}
.ts-f-subject .bt-ac-chips:not([hidden]){margin-bottom:6px}

/* One shared button shape — see the same block in featured_batches.php
   and index.php. Height, type size and radius must match, or the page's
   calls to action look mismatched (badly so on a phone). */
.ts-go{
  height:48px;
  padding:0 26px;
  border:0;border-radius:10px;
  background:#c8272d;color:#fff;
  font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  cursor:pointer;white-space:nowrap;
}
.ts-go:hover{background:#a51f24}

/* ---- preset chips under the bar ---- */
.ts-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 2px 0}
.ts-presets-lb{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280}
.ts-preset{
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;
  padding:6px 14px;font-size:.84rem;color:#374151;text-decoration:none;white-space:nowrap;
}
.ts-preset:hover{border-color:#0d6b3e;color:#0d6b3e;text-decoration:none}
.ts-preset.on{background:#0d6b3e;border-color:#0d6b3e;color:#fff}

/* ---- responsive ----
   The 5-across grid needs width. Step it down gracefully. */
@media (max-width:1080px){
  .ts-bar{grid-template-columns:1fr 1fr 1fr;}
  .ts-f-subject{grid-column:1 / -1}     /* subject gets a full row */
  .ts-go{grid-column:1 / -1;width:100%}
}
@media (max-width:560px){
  .ts-bar{grid-template-columns:1fr;gap:12px}
  .ts-f-subject,.ts-go{grid-column:auto}
}