/* Heart state, "Save this search" dialog and toast. */

/* Heart on property cards: outline until the property is liked. */
.ha-heart .ha-heart__on { display: none; }
.ha-heart.is-liked .ha-heart__on { display: block; }
.ha-heart.is-liked .ha-heart__off { display: none; }

/* Dialogs: Save search, Edit saved search, Delete saved search */
.ha-ssm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ha-ssm__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.ha-ssm__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}
.ha-ssm__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-bottom: 1px solid #ececec;
}
.ha-ssm__title { margin: 0; font-size: 14px; font-weight: 700; color: #000; }
.ha-ssm__x {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: #000;
  cursor: pointer;
}
.ha-ssm__x:hover { background: #f4f4f4; }
.ha-ssm__body { padding: 16px 16px 8px; }
.ha-ssm__field { margin-bottom: 20px; }
.ha-ssm__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #000; }
.ha-ssm__name {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  outline: none;
}
.ha-ssm__name::placeholder { color: #c2c2c2; }
.ha-ssm__name--grey {
  height: 48px;
  border-radius: 8px;
  background: #f4f4f4;
  font-size: 14px;
  font-weight: 400;
}
.ha-ssm__name--grey:focus { box-shadow: inset 0 0 0 1px #000; background: #fff; }
.ha-ssm__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
}
.ha-ssm__filters:hover { border-color: #000; }
.ha-ssm__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ha-ssm__chip {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #f4f4f4;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  cursor: pointer;
}
.ha-ssm__chip:hover { background: #ebebeb; }
.ha-ssm__chip[aria-checked="true"] { background: #000; color: #fff; }
.ha-ssm__text { margin: 0 0 12px; font-size: 14px; color: #333; }
.ha-ssm__error { margin: 0 0 12px; font-size: 13px; color: #b42318; }
.ha-ssm__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid #ececec;
}
.ha-ssm__cancel,
.ha-ssm__save {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.ha-ssm__cancel { background: #f4f4f4; color: #000; }
.ha-ssm__cancel:hover { background: #ebebeb; }
.ha-ssm__save { background: #000; color: #fff; }
.ha-ssm__save:hover { background: #222; }
.ha-ssm__save--wide { width: 100%; }
.ha-ssm__save--danger { background: #b42318; }
.ha-ssm__save--danger:hover { background: #8f1c12; }
.ha-ssm__save:disabled { opacity: .5; cursor: default; }
.ha-ssm__foot:has(.ha-ssm__save--wide) { border-top: 0; }

/* Toast */
.ha-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1300;
  transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.ha-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ha-toast a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* "Update search": a bar replaces the header while a saved search is edited */
html.ha-editing #site-header { display: none; }
html.ha-editing [data-save-search-open]:not([data-like-toggle]) { display: none; }
.ha-editbar {
  position: sticky;
  top: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 12px 20px;
  background: #f4f4f4;
}
.ha-editbar__label { margin: 0; font-size: 14px; color: #000; }
.ha-editbar__label strong { margin-right: 4px; }
.ha-editbar__actions { display: flex; align-items: center; gap: 12px; }
.ha-editbar__cancel,
.ha-editbar__update {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.ha-editbar__cancel { background: #fff; color: #000; border: 1px solid #ececec; }
.ha-editbar__cancel:hover { background: #fafafa; }
.ha-editbar__update { background: #000; color: #fff; }
.ha-editbar__update:hover { background: #222; }
.ha-editbar__update:disabled { opacity: .5; cursor: default; }