/* The website's full-page search (search.php), on top of site.css: the search bar, a row of filters,
   then the list beside the map (Leaflet). Phones show the list or the map, with a switch. The form
   pieces (.f_select, .f_input, .f_check) are shared with the login, program and review pages. */

.hide
{
  display: none !important;
}

.nav_links a.on
{
  color: var(--rmr_slate);
}

/* what and where across the top (the homepage's bar, site.css) */
.search_top
{
  padding-top: 22px;
}

.search_top .search_bar
{
  max-width: none;
  box-shadow: 0 8px 24px rgba(22,34,44,0.07), 0 1px 3px rgba(22,34,44,0.04);
}

.search_top .search_field input
{
  height: 46px;
}

/* the list and the map share the width, so this page runs wider than the rest of the site */
.search_page
{
  --page: 1440px;
}

/* ── the filters: a row of pills ── */

.filter_bar
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
}

.pill,
.pill_select
{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  border-radius: 19px;
  border: 1.5px solid var(--rmr_line);
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--rmr_ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pill[hidden],
.pill_select[hidden],
.pill_clear[hidden]
{
  display: none;
}

.pill:hover,
.pill_select:hover
{
  border-color: #D5CDC6;
}

.pill span
{
  padding: 0 15px;
}

.pill input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill:has(input:checked)
{
  border-color: var(--rmr_red);
  background: var(--rmr_red_soft);
  color: var(--rmr_red_dark);
}

.pill:has(input:focus-visible),
.pill_select:focus-within
{
  outline: 2px solid var(--rmr_red);
  outline-offset: 2px;
}

.pill_select select
{
  height: 100%;
  padding: 0 32px 0 15px;
  border: 0;
  border-radius: 19px;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.pill_select::after
{
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 2px solid var(--rmr_red_dark);
  border-bottom: 2px solid var(--rmr_red_dark);
  transform: rotate(45deg);
  pointer-events: none;
}

.pill_clear
{
  height: 38px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--rmr_red_dark);
  cursor: pointer;
}

.pill_clear:hover
{
  text-decoration: underline;
}

.results_total_wide
{
  margin-left: auto;
  padding-right: 6px;
  text-align: right;
}

/* ── the list beside the map ── */

.search_layout
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
  padding-top: 14px;
  padding-bottom: 60px;
}

.f_input
{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--rmr_line);
  background: white;
}

.f_input:focus-within,
.f_select:focus-within
{
  border-color: var(--rmr_red);
}

.f_input svg
{
  flex: none;
  width: 17px;
  height: 17px;
}

.f_input input
{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--rmr_ink);
}

.f_input input::placeholder
{
  color: #9AA4AC;
}

.f_select
{
  position: relative;
  border-radius: 12px;
  border: 1.5px solid var(--rmr_line);
  background: white;
}

.f_select::after
{
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid var(--rmr_red_dark);
  border-bottom: 2px solid var(--rmr_red_dark);
  transform: rotate(45deg);
  pointer-events: none;
}

.f_select select
{
  width: 100%;
  height: 41px;
  padding: 0 34px 0 12px;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 15px;
  color: var(--rmr_ink);
  cursor: pointer;
}

/* the app's tick boxes */
.f_check
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--rmr_ink);
  cursor: pointer;
}

.f_check input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.f_box
{
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid rgba(22,34,44,0.25);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f_check input:checked + .f_box
{
  background: var(--rmr_red);
  border-color: var(--rmr_red);
}

.f_check input:checked + .f_box::after
{
  content: '';
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border-right: 2.5px solid white;
  border-bottom: 2.5px solid white;
  transform: rotate(45deg);
}

.f_check input:focus-visible + .f_box
{
  outline: 2px solid var(--rmr_red);
  outline-offset: 2px;
}

/* ── the bar over the results (phones only: on a wide screen the count is in the filter row, so the
   list and the map start level) ── */

.results_bar
{
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.results_total
{
  flex: 1;
  font-size: 15px;
  color: var(--rmr_muted);
}

.results_total b
{
  font-size: 17px;
  color: var(--rmr_slate);
}

.view_toggle
{
  display: none;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: #ECE8E4;
}

.view_toggle button
{
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rmr_muted);
  cursor: pointer;
}

.view_toggle button.on
{
  background: white;
  color: var(--rmr_slate);
  box-shadow: 0 2px 6px rgba(22,34,44,0.12);
}

/* ── the list: one card, a row per program ── */

.result_list
{
  border-radius: 20px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 4px 14px rgba(22,34,44,0.04);
  overflow: hidden;
  transition: opacity 0.15s;
}

.result_list.loading
{
  opacity: 0.5;
}

.row
{
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-top: 1px solid var(--rmr_line);
  transition: background 0.12s;
}

.row:first-child
{
  border-top: 0;
}

.row:hover
{
  background: #FCFBFA;
}

/* a program's photo or, without one, its initials: the same square, so the names line up */
.row .badge,
.row_photo
{
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 17px;
}

.row_photo
{
  object-fit: cover;
  background: #ECE8E4;
  border: 1px solid var(--rmr_line);
}

.row_main
{
  flex: 1;
  min-width: 0;
}

.row_name
{
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rmr_slate);
}

.row:hover .row_name
{
  color: var(--rmr_red_dark);
}

.row_meta
{
  margin-top: 3px;
  font-size: 14px;
  color: var(--rmr_muted);
}

.row_meta .dist
{
  color: var(--rmr_navy);
  font-weight: 600;
}

.row_scores
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.row_scores span
{
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--rmr_bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rmr_muted);
}

.row_scores b
{
  color: var(--rmr_slate);
}

.row_score
{
  flex: none;
  width: 130px;
  text-align: right;
}

.row_score .big
{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--rmr_slate);
}

.row_score small
{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--rmr_muted);
}

.row_score .new
{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--rmr_bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rmr_muted);
}

.list_message
{
  padding: 48px 24px;
  text-align: center;
  color: var(--rmr_muted);
  font-size: 15px;
  line-height: 1.5;
}

.list_message b
{
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  color: var(--rmr_slate);
}

.more_row
{
  padding: 16px;
  border-top: 1px solid var(--rmr_line);
  text-align: center;
}

/* ── the map ── */

.result_map
{
  position: sticky;
  top: 86px;
  isolation: isolate;   /* Leaflet's panes stay under the search bar's dropdowns */
  height: calc(100vh - 106px);
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rmr_line);
}

#map
{
  width: 100%;
  height: 100%;
  background: #E9EEF0;
}

.leaflet-container
{
  font: inherit;
}

/* the app's rating pins */
.rate_pin
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px 0 6px;
  border-radius: 15px;
  background: white;
  border: 1.5px solid white;
  box-shadow: 0 4px 12px rgba(22,34,44,0.28);
  font-size: 13px;
  font-weight: 800;
  color: var(--rmr_slate);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.rate_pin .tile
{
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--rmr_red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.6l2.75 5.95 6.5.72-4.85 4.4 1.33 6.4L12 16.8l-5.73 3.27 1.33-6.4-4.85-4.4 6.5-.72z'/%3E%3C/svg%3E") center / 74% no-repeat;
}

.rate_pin.new .tile
{
  background-color: #C9C3BD;
}

.rate_pin.new
{
  color: var(--rmr_muted);
}

/* a group: a round count, a little bigger for more programs */
.rate_pin.group
{
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 18px;
  background: var(--rmr_slate);
  border: 3px solid rgba(255,255,255,0.9);
  color: white;
  font-size: 12.5px;
}

.rate_pin.group.mid
{
  width: 42px;
  height: 42px;
  border-radius: 21px;
  background: var(--rmr_navy);
}

.rate_pin.group.big
{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--rmr_red);
  font-size: 13.5px;
}

.rate_pin.on,
.rate_pin.lit
{
  background: var(--rmr_red);
  border-color: var(--rmr_red);
  color: white;
}

.rate_pin.on .tile,
.rate_pin.lit .tile
{
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E03A57' d='M12 2.6l2.75 5.95 6.5.72-4.85 4.4 1.33 6.4L12 16.8l-5.73 3.27 1.33-6.4-4.85-4.4 6.5-.72z'/%3E%3C/svg%3E");
}

.pin_icon
{
  background: none;
  border: 0;
}

.you_dot
{
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #1F6FD1;
  border: 3px solid white;
  box-shadow: 0 0 0 6px rgba(31,111,209,0.2);
  transform: translate(-50%, -50%);
}

.map_card
{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  width: min(420px, calc(100% - 32px));
  border-radius: 18px;
  background: white;
  box-shadow: 0 14px 34px rgba(22,34,44,0.22);
  overflow: hidden;
}

.map_card:empty
{
  display: none;
}

.map_card .row
{
  border-top: 0;
}

.map_card .row + .row
{
  border-top: 1px solid var(--rmr_line);
}

/* ── a wide screen: the page holds still, like an app. The search and filters stay at the top, the map
   fills the rest of the window, and only the list scrolls (in its own column) ── */

@media (min-width: 901px)
{
  body.search_page
  {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .search_page .top_nav,
  .search_page .search_top,
  .search_page .filter_bar
  {
    flex: none;
    width: 100%;
  }

  .search_page .footer
  {
    display: none;
  }

  .search_page .search_layout
  {
    flex: 1;
    min-height: 0;
    width: 100%;
    align-items: stretch;
    padding-bottom: 20px;
  }

  .search_page .results_area
  {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
  }

  .search_page .result_map
  {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
  }
}

/* ── narrow screens: the list or the map, with a switch ── */

@media (max-width: 900px)
{
  .search_top
  {
    padding-top: 12px;
  }

  .filter_bar
  {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 12px;
    padding-bottom: 2px;
  }

  .filter_bar::-webkit-scrollbar
  {
    display: none;
  }

  .pill,
  .pill_select,
  .pill_clear
  {
    flex: none;
  }

  .results_total_wide
  {
    display: none;
  }

  .results_bar
  {
    display: flex;
  }

  .search_layout
  {
    grid-template-columns: 1fr;
    padding-top: 12px;
  }

  .view_toggle
  {
    display: flex;
  }

  .search_layout[data_view='map'] .result_list,
  .search_layout[data_view='list'] .result_map
  {
    display: none;
  }

  .row_score
  {
    width: auto;
  }

  .row_scores
  {
    display: none;
  }

  .result_map
  {
    position: relative;
    top: auto;
    height: calc(100vh - 290px);
  }
}

@media (max-width: 520px)
{
  .row
  {
    flex-wrap: wrap;
    padding: 16px;
  }

  .row_main
  {
    flex-basis: calc(100% - 72px);
  }

  .row_score
  {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 72px;
    text-align: left;
  }

  .row_score .big
  {
    font-size: 18px;
  }

  .row_score small
  {
    margin: 0;
  }
}

/* ── review mode (search?for=review, from "Write a review"): what the search is for, and a Review
   button on each result ── */

.review_intro
{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 26px;
}

.review_intro_icon
{
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--rmr_red_soft);
}

.review_intro_icon svg
{
  width: 24px;
  height: 24px;
}

.review_intro h1
{
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.5px;
  color: var(--rmr_slate);
}

.review_intro p
{
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--rmr_muted);
}

.review_intro_cancel
{
  margin-left: auto;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--rmr_muted);
  text-decoration: none;
}

.review_intro_cancel:hover
{
  color: var(--rmr_slate);
}

.row_review
{
  display: block;
  width: max-content;
  margin: 10px 0 0 auto;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--rmr_red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.row:hover .row_review
{
  background: var(--rmr_red_dark);
}

@media (max-width: 700px)
{
  .review_intro
  {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .review_intro_icon
  {
    display: none;
  }

  .review_intro h1
  {
    font-size: 21px;
  }

  .review_intro_cancel
  {
    margin-left: 0;
  }
}