/* The tour filters' additions (adc-api#3429), drawn by tourSearch.js: each multi-select filter's
   chosen names and clear button, the Tour Class checkbox list, and the How we rate tours box.
   Linked from the search box (templates/deals_search_box.php) and the tour search page
   (Tour_search.php), the two places the filters appear. */

/* A filter's field names its choices ("Tour Operators (Collette + 2 more)"); a name too long for
   the field ends in an ellipsis, and the field's tooltip and its Edit box list every one. */
#filters_container_sticky .dropdown-toggle .d-flex {
  min-width: 0;
  overflow: hidden;
}

#filters_container_sticky .dropdown-toggle .filterCount {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The clear button sits on the field, left of its Edit or caret, outside the field's own button. */
#filters_container_sticky .dropdown.has-filter-clear {
  position: relative;
}

/* The names stop short of the clear button, which sits just left of Edit (12 to 36px from the
   field's right edge) or, on Tour Class's field, of its caret. */
#filters_container_sticky .dropdown.has-filter-clear:has(.filter-clear:not([hidden])) .dropdown-toggle .d-flex {
  margin-right: 34px;
}

#filters_container_sticky .filter-clear {
  position: absolute;
  top: 50%;
  right: 42px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: #e3e8ec;
  color: #1f2d3a;
  font: bold 15px/22px Arial, sans-serif;
  text-align: center;
  cursor: pointer;
}

#filters_container_sticky .filter-clear:hover,
#filters_container_sticky .filter-clear:focus-visible {
  background: #c3ccd4;
}

#filters_container_sticky .filter-clear:focus-visible {
  outline: 3px solid #f4b400;
  outline-offset: 1px;
}

#filters_container_sticky #tour-quality-filter-dropdown .filter-clear {
  right: 28px;
}

.tc-filter {
  min-width: 0;
  margin: 0;
  padding: 2px 0 0;
  border: 0;
}

/* The dropdown's own button already says Tour Class, so the legend is for screen readers only. */
.tc-filter-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tc-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: start;
  padding: 7px 2px;
  border-top: 1px solid #e3e8ec;
}

.tc-option:first-of-type {
  border-top: 0;
}

.tc-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #004a83;
  cursor: pointer;
}

/* The search box's stylesheets set labels white or dark, bold and floated (search-box.css sets
   #main_search_box.sbx label bold), so color and weight win here. */
.tc-option label {
  display: block;
  float: none;
  min-width: 0;
  margin: 0;
  color: #1f2d3a !important;
  font-size: 14px;
  font-weight: normal !important;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.tc-option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tc-option-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 14px;
}

.tc-option-range,
.tc-option-count {
  color: #4d5d6b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tc-option-count {
  white-space: nowrap;
}

.tc-option-meaning {
  display: block;
  margin-top: 2px;
  color: #4d5d6b;
  font-size: 12px;
  line-height: 1.35;
}

.tc-option.is-off {
  opacity: 0.55;
}

.tc-option.is-off input,
.tc-option.is-off label {
  cursor: not-allowed;
}

.tc-filter-how {
  margin: 6px 0 0;
  font-size: 13px;
}

/* Touch screens: taller rows, so each is easy to tap. */
@media (pointer: coarse) {
  .tc-option {
    min-height: 44px;
    padding: 9px 2px;
  }
}

/* How we rate tours */
.tc-how-box {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0 22px 18px;
  overflow-y: auto;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #1f2d3a;
  box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
  font: 15px/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: left;
}

.tc-how-box::backdrop {
  background: rgb(10 30 50 / 45%);
}

.tc-how-head {
  display: flex;
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -22px 4px;
  padding: 14px 10px 10px 22px;
  border-bottom: 1px solid #e3e8ec;
  background: #fff;
}

.tc-how-head h2 {
  margin: 0;
  color: #004a83;
  font-size: 20px;
  line-height: 1.25;
}

.tc-how-close {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #004a83;
  font: 28px/1 Arial, sans-serif;
  cursor: pointer;
}

.tc-how-box p {
  margin: 10px 0;
}

.tc-how-basis {
  margin: 4px 0 10px;
  padding-left: 20px;
  list-style: disc;
}

.tc-how-basis li {
  display: list-item;
  margin: 2px 0;
}

.tc-how-levels {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.tc-how-levels li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.tc-how-range {
  color: #4d5d6b;
  font-size: 13px;
}

@media (width <= 480px) {
  .tc-how-box {
    padding: 0 16px 16px;
  }

  .tc-how-head {
    margin: 0 -16px 4px;
    padding-left: 16px;
  }

  .tc-how-levels li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.tc-how-box :focus-visible,
.tc-option input:focus-visible {
  outline: 3px solid #f4b400;
  outline-offset: 2px;
}