/**
 * The location pill.
 *
 * A light utility strip, deliberately NOT the theme's dark primary. The first
 * version used #253237, which is also the background of the hero on several of
 * these sections — on /flight-deals the two welded into one unbroken dark block
 * with no seam, and "Choose suburb" read as a link inside the hero copy. A
 * chrome strip has to be legible as its own element on every page it appears
 * on, whatever the block above it happens to be, so it gets its own value and
 * a rule top and bottom.
 */

.kbul-bar {
  background: #f2f5f3;
  color: #3d4b52;
  border-top: 1px solid #e2e8e4;
  border-bottom: 1px solid #e2e8e4;
  font-size: 13px;
  line-height: 1.4;
}

/**
 * The inner container carries the same gutter the page content sits on.
 *
 * The theme's .container is a 15px inset, but every section then adds a .row
 * and its own section padding on top, so pill text at the bare container edge
 * lined up with nothing. 10px matches the theme's .row negative margin so the
 * text tracks the first column beneath it.
 */
.kbul-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
}

.kbul-pin {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  /* A map pin, not a bullet. Inline so it needs no asset request. */
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2380b435'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.kbul-text {
  color: #4a5a62;
}

.kbul-text strong {
  color: #253237;
  font-weight: 600;
}

/* Real targets, not 18px of underlined text. */
.kbul-link {
  padding: 4px 10px;
  background: none;
  border: 1px solid #c6d2c9;
  border-radius: 3px;
  color: #4e7213;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}

.kbul-link:hover {
  background: #e8efe2;
  border-color: #a9bdae;
  color: #3d5a0f;
}

.kbul-link:focus-visible {
  outline: 2px solid #80b435;
  outline-offset: 2px;
}

.kbul-link--muted {
  border-color: transparent;
  color: #6b7a82;
  font-weight: 400;
}

.kbul-link--muted:hover {
  background: #e6eae7;
  border-color: transparent;
  color: #3d4b52;
}

/**
 * The chooser, anchored to the button that opens it.
 *
 * .kbul-anchor is position:relative so "left: 0" means "under Change" rather
 * than under the whole full-width flex row — which put the panel 330px away
 * from its own trigger, and on /directory dropped it straight on top of that
 * page's own search field.
 */
.kbul-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kbul-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  background: #fff;
  color: #253237;
  border: 1px solid #e2e8e4;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}

.kbul-panel[hidden] {
  display: none;
}

/* The caret that ties the panel to the button. */
.kbul-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e2e8e4;
  border-top: 1px solid #e2e8e4;
  transform: rotate(45deg);
}

/**
 * text-align is set explicitly because theme.css carries
 * `label, .label { text-align: right }`, which stranded this label at the far
 * right of the panel above a full-width input and read as a broken layout.
 */
.kbul-label {
  display: block;
  margin: 0 0 6px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #5a6b73;
}

/* Matches the theme's .form-control so the panel is not visibly a bolt-on. */
.kbul-input {
  width: 100%;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  font-size: 14px;
  color: #253237;
}

.kbul-input:focus {
  outline: none;
  background: #fff;
  border-color: #80b435;
}

.kbul-results {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}

.kbul-results li {
  margin: 0;
}

.kbul-results button {
  display: block;
  width: 100%;
  padding: 8px;
  background: none;
  border: 0;
  border-radius: 3px;
  text-align: left;
  font-size: 14px;
  color: #253237;
  cursor: pointer;
}

.kbul-results button:hover,
.kbul-results button:focus-visible {
  background: #f1f5ee;
  outline: none;
}

.kbul-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: #7a8a92;
}

.kbul-hint[hidden] {
  display: none;
}

/**
 * "Near you" — the chip every vertical's cards use.
 *
 * Derived from the theme's own #80b435 rather than a fourth green, and
 * deliberately quieter than it first was: at 600 weight it drew the eye before
 * the suburb name it annotates, which is the wrong way round for a footnote.
 */
.kbul-near {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(128, 180, 53, 0.16);
  color: #4a6b18;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}

/* Long copy on a wide screen, short copy on a phone. */
.kbul-shortform {
  display: none;
}

@media (max-width: 575px) {
  .kbul-pill {
    font-size: 12px;
  }

  .kbul-longform {
    display: none;
  }

  .kbul-shortform {
    display: inline;
  }

  .kbul-anchor {
    position: static;
  }

  .kbul-panel {
    width: 100%;
  }

  .kbul-panel::before {
    display: none;
  }
}