/* UK search results page (search-results.asp). Loaded after css/subject-dir.css,
   which already styles the hero, the search box and the tutor cards (the same
   markup as the subject pages). This file covers the rest: the In-person / Online
   switch, the search row, the results bar, the filters and the no-results message.
   Restyle only: the page's markup and scripts (js/search.js: getresults,
   hidefilters, togglecontent, the jQuery UI sliders) are unchanged, so rules start
   from an id, and a few need !important to beat inline styles and previewpanels.css.
   Below 900px the filters fold away behind the "Filters" link (js/search-results-uk.js). */

/* ---------- Hero ---------- */
#searchpanelhome2 #searchpanelcontent > p
{
  margin: -12px 0 20px;
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  line-height: 1.45;
}

/* The line under the heading carries its own 5px bottom margin, which left it sitting on
   the search card (2026-11-11). Not the breadcrumb, which is a p too. */
#searchpanelhome2 #searchpanelcontent > p:not(#location)
{
  margin-top: -14px;
  margin-bottom: 18px !important;
}

#searchpanelhome2 #searchpanelcontent > p img
{
  top: 0 !important;
  vertical-align: 0;
}

#searchpanelhome2 #searchpanelcontent > p strong
{
  color: #fff;
  font-weight: 800;
}

/* In-person / Online */
#searchpanelhome2 .thesearch .thesearchtabs
{
  display: inline-flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--sd-tint);
}

#searchpanelhome2 .thesearch .thesearchtabs a
{
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 9px 22px;
  border-radius: 999px;
  color: var(--sd-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

#searchpanelhome2 .thesearch .thesearchtabs a:hover
{
  color: var(--sd-blue);
}

#searchpanelhome2 .thesearch .thesearchtabs a.active
{
  background: var(--sd-blue);
  color: #fff;
}

#searchpanelhome2 .thesearch .thesearchtabs a.active:before
{
  content: none;
}

/* Subject, type, level, postcode and the button */
#searchpanelhome2 .thesearch .searchrow
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

#searchpanelhome2 .thesearch .searchcol
{
  flex: 1 1 180px;
  max-width: none;
  margin: 0;
  padding: 0;
}

#searchpanelhome2 .thesearch .searchcol:first-child
{
  flex: 2 1 240px;
}

#searchpanelhome2 .thesearch .searchcol:last-child
{
  flex: 0 0 auto;
}

/* The postcode box is hidden for online lessons; hide its column too */
#searchpanelhome2 .thesearch .searchcol:has(> #postcode[style*="none"])
{
  display: none;
}

/* ---------- Results bar: Filters, Reset all, count, Sort by ---------- */
#maincontentouter #maincontent #filterinfo
{
  align-items: center;
  gap: 10px 24px;
  margin: 28px 0 16px;
}

#maincontentouter #filterheader
{
  align-items: center;
  padding-top: 0;
}

#maincontentouter #filtertitle
{
  align-items: center;
}

#maincontentouter #filtertitle1
{
  font-size: 20px;
}

#maincontentouter #filtertitle1 a
{
  color: var(--sd-navy);
  font-weight: 800;
  text-decoration: none;
}

#maincontentouter #filtertitle2 a
{
  color: var(--sd-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

#maincontentouter #searchinfo, #maincontentouter #resultscount
{
  color: var(--sd-slate);
  font-size: 15px;
}

#maincontentouter #sortbycon
{
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#maincontentouter #sortbycon > div:first-child
{
  margin-right: 0 !important;
  color: var(--sd-ink) !important;
  font-size: 15px;
  font-weight: 600;
}

#maincontentouter #sortbycon select
{
  box-sizing: border-box;
  width: 210px !important;
  height: 44px;
  margin: 0;
  padding: 0 40px 0 14px;
  border: 1px solid #c6d3e5;
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3350' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  color: var(--sd-ink);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#maincontentouter #sortbycon select:focus
{
  border-color: var(--sd-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(58, 104, 174, .16);
}

/* ---------- Filters ---------- */
#maincontentouter #searchresultscontainer
{
  align-items: flex-start;
  gap: 24px;
}

#maincontentouter #searchfilters
{
  box-sizing: border-box;
  flex: none;
  width: 280px;
  min-width: 280px !important;
  margin: 0;
  padding: 4px 20px 16px;
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  background: #fff;
}

#maincontentouter .filteritem
{
  padding: 14px 0;
  border-top: 1px solid var(--sd-line);
  color: var(--sd-ink);
}

#maincontentouter .filteritem:first-child
{
  border-top: 0;
}

#maincontentouter .filteritem h3
{
  margin: 0;
  color: var(--sd-navy);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
}

#maincontentouter .filteritem h3 a, #maincontentouter .filteritem h3 a:active
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sd-navy);
  text-decoration: none;
}

#maincontentouter .filteritem h3 img
{
  top: 0;
  left: 0;
  float: none;
  margin-left: 8px;
}

/* The old stylesheet leaves 40px under each open group; 8px is enough to clear the
   slider handles (2026-11-11). */
#maincontentouter .filteritem h3 + div
{
  margin-top: 12px;
  margin-bottom: 8px;
}

#maincontentouter .filterval, #maincontentouter .filtervalsmall
{
  color: var(--sd-ink);
  font-size: 15px;
  font-weight: 700;
}

#maincontentouter .filterslider
{
  margin-top: 14px !important;
}

/* The sliders keep their size and position (search.js and slider.js place the
   handles); only their colours change */
#maincontentouter .filterslider.ui-slider-horizontal
{
  border: 0;
  border-radius: 999px;
  background: var(--sd-line);
}

#maincontentouter .filterslider .ui-slider-range
{
  border-radius: 999px;
  background: var(--sd-blue);
}

#maincontentouter .filterslider .ui-slider-handle
{
  border-color: var(--sd-blue);
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 51, 80, .25);
  cursor: pointer;
}

#maincontentouter #onlinepostcode, #maincontentouter #searchtext
{
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0 0 10px;
  padding: 0 14px;
  border: 1px solid #c6d3e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: var(--sd-ink);
  font-family: inherit;
  font-size: 15px;
}

#maincontentouter #onlinepostcode:focus, #maincontentouter #searchtext:focus
{
  border-color: var(--sd-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(58, 104, 174, .16);
}

#maincontentouter #keywordtoggle #searchtext
{
  width: calc(100% - 84px);
  margin: 0;
  vertical-align: middle;
}

#maincontentouter #keywordtoggle #applyfilter
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 76px;
  height: 44px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sd-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  vertical-align: middle;
  text-decoration: none;
}

/* Tick boxes */
#maincontentouter #searchfilters .checkbox
{
  cursor: pointer;
}

#maincontentouter #searchfilters .checkboxbox
{
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1.5px solid #9fb3cf;
  border-radius: 6px;
  background: #fff;
  transition: background-color .15s, border-color .15s;
}

#maincontentouter #searchfilters .checkbox input:checked ~ .checkboxbox
{
  border-color: var(--sd-blue);
  background: var(--sd-blue);
}

#maincontentouter #searchfilters .checkboxbox .icon
{
  fill: #fff;
}

#maincontentouter #searchfilters .checkboxlabel
{
  color: var(--sd-ink);
  font-size: 15px;
}

#maincontentouter #searchfilters .columnsplit
{
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
}

#maincontentouter #searchfilters .columnsplititem
{
  width: auto;
  margin: 0;
  padding: 0;
}

#maincontentouter #searchfilters br
{
  display: none;
}

/* ---------- Results ---------- */
#maincontentouter #searchresultscontainer #resultblockcontainer
{
  flex: 1 1 auto;
  width: auto;
  min-width: 0 !important;
}

/* No results: the old message and its sign-up line, as a card */
#resultblockcontainer #maincontent
{
  max-width: none;
  padding: 0 !important;
}

#maincontentouter #resultblockcontainer .alert
{
  margin: 0 !important;
  padding: 22px 24px;
  border: 1px solid var(--sd-line);
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: var(--sd-navy);
  font-size: 18px;
  font-weight: 800;
}

#maincontentouter #resultblockcontainer .alert + .important
{
  margin: -1px 0 0 !important;
  padding: 0 24px 22px;
  border: 1px solid var(--sd-line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #fff;
  color: var(--sd-ink);
  font-size: 15px;
  line-height: 1.6;
}

#maincontentouter #resultblockcontainer .important img
{
  display: none;
}

#maincontentouter #resultblockcontainer .important a
{
  color: var(--sd-blue);
  font-weight: 700;
}

/* Tutoring Job searches have no filters: js/search.js hides #filterheader and adds
 .filterinforight to #filterinfo. The results count still shows, on the left. */
#maincontentouter #maincontent #filterinfo.filterinforight
{
  justify-content: space-between !important;
}

#maincontentouter #filterinfo.filterinforight #filterheader
{
  display: flex !important;
}

#maincontentouter #filterinfo.filterinforight #filtertitle
{
  display: none !important;
}

/* ---------- Show more: 20 results at a time (js/search-results-uk.js) ---------- */
/* Until the script runs; kept apart, as older browsers drop the whole rule */
.sr-early #resultblockcontainer .usercard2:nth-child(n+21 of .usercard2)
{
  display: none !important;
}

#resultblockcontainer .usercard2.sr-hidden
{
  display: none !important;
}

#maincontentouter #resultblockcontainer .sr-more
{
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  width: 100%;
  margin: 12px 0 8px;
}

#maincontentouter #resultblockcontainer .sr-more[hidden]
{
  display: none;
}

#maincontentouter #resultblockcontainer .sr-more button
{
  min-height: 48px;
  padding: 0 32px;
  border: 2px solid var(--sd-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--sd-blue);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

#maincontentouter #resultblockcontainer .sr-more button:hover
{
  background: var(--sd-blue);
  color: #fff;
}

#maincontentouter #resultblockcontainer .sr-more button:focus-visible
{
  outline: 3px solid rgba(58, 104, 174, .35);
  outline-offset: 3px;
}

/* ---------- From 900px: the filters stay in view beside the results (2026-11-11) ---------- */
/* Sticky under the menu bar (72px). If the panel is taller than the window, it scrolls
   on its own. search.js still shows and hides it; this only changes where it sits. */
@media (min-width: 900px)
{
  #maincontentouter #searchfilters
  {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c6d3e5 transparent;
  }
}

/* 900 to 1199px: "Sort by" kept its old minimum width and stuck out 9px past the page,
   which made the whole page scroll sideways (2026-11-11). */
@media (min-width: 900px) and (max-width: 1199px)
{
  #maincontentouter #sortbycon
  {
    min-width: 0 !important;
  }
}

/* ---------- Up to 899px: filters above the results, folded away ---------- */
@media (max-width: 899px)
{
  #maincontentouter #searchresultscontainer
  {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  #maincontentouter #searchfilters
  {
    width: 100% !important;
    min-width: 0 !important;
  }

  #maincontentouter #searchresultscontainer #resultblockcontainer
  {
    width: 100% !important;
  }

  #maincontentouter #maincontent #filterinfo
  {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 4px;
  }

  #maincontentouter #filterheader
  {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    width: auto !important;
    min-width: 0 !important;
  }

  #maincontentouter #filtertitle
  {
    gap: 16px;
    width: auto !important;
    margin: 0;
  }

  #maincontentouter #searchinfo
  {
    width: auto;
  }

  #maincontentouter #sortbycon
  {
    min-width: 0 !important;
    margin-top: 0;
  }

  #maincontentouter #sortbycon select
  {
    width: 170px !important;
  }

  /* Folded unless opened (js/search-results-uk.js adds sr-js, then sr-open) */
  #searchresultscontainer.sr-js #searchfilters
  {
    display: none !important;
  }

  #searchresultscontainer.sr-js.sr-open #searchfilters
  {
    display: flex !important;
  }

  /* "Filters" and its arrow look like one button */
  #maincontentouter #filtertitle1
  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #c6d3e5;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
  }

  #maincontentouter #filtertitle1 span a
  {
    display: inline-flex;
  }

  #maincontentouter #filtertitle1 img
  {
    margin-left: 0;
  }
}

@media (max-width: 767px)
{
  /* Chips on a tutor card: a little smaller, so two fit on a line (2026-11-11) */
  #maincontent #resultblockcontainer .usercard2 .usercard2meta
  {
    gap: 7px;
  }

  #maincontent #resultblockcontainer .usercard2 .usercard2metaitem
  {
    padding: 5px 10px;
    font-size: 12.5px;
  }

  #maincontent #resultblockcontainer .usercard2 .usercard2metaitem svg
  {
    margin-right: 5px;
  }

  #searchpanelhome2 .thesearch .searchcol, #searchpanelhome2 .thesearch .searchcol:first-child, #searchpanelhome2 .thesearch .searchcol:last-child
  {
    flex: 1 1 100%;
  }

  #searchpanelhome2 .thesearch .thesearchtabs
  {
    display: flex;
  }

  #searchpanelhome2 .thesearch .thesearchtabs a
  {
    flex: 1 1 0;
  }
}