.hj-site-location {
  min-width: 0;
  padding: 0;
  border: 0;
}

.hj-site-location > legend { width: 100%; }

.hj-site-location__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hj-site-location__mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 16px;
  border: 2px solid #e1e5ec;
  border-radius: 15px;
  color: #667085;
  background: #f8fafc;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.hj-site-location__mode[aria-pressed="true"] {
  border-color: #246bfd;
  color: #174fc6;
  background: #f4f7ff;
}

.hj-site-location__mode:focus-visible {
  outline: 3px solid rgba(36, 107, 253, .2);
  outline-offset: 2px;
}

.hj-site-location__mode-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef1f5;
  font-size: 1.25rem;
}

.hj-site-location__mode-copy { display: grid; gap: 2px; }

.hj-site-location__mode-copy strong {
  color: #344054;
  font-size: .92rem;
  font-weight: 850;
}

.hj-site-location__mode[aria-pressed="true"] .hj-site-location__mode-copy strong { color: #174fc6; }

.hj-site-location__mode-copy small {
  color: #98a2b3;
  font-size: .76rem;
  font-weight: 650;
}

.hj-site-location__panel { margin-top: 14px; }
.hj-site-location__panel[hidden] { display: none; }

.hj-site-location__help,
.hj-site-location__status {
  margin: 0;
  color: #8a94a6;
  font-size: .78rem;
  line-height: 1.55;
}

.hj-site-location__help { margin-bottom: 10px; }

.hj-site-location__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 4px;
}

.hj-site-location__use,
.hj-site-location__clear {
  min-height: 50px;
  border-radius: 13px;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.hj-site-location__use {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: min(100%, 280px);
  padding: 12px 18px;
  border: 2px solid #172033;
  color: #172033;
  background: #ffffff;
}

.hj-site-location__use svg { width: 19px; height: 19px; color: #246bfd; }
.hj-site-location__use:hover:not(:disabled) { border-color: #246bfd; transform: translateY(-1px); }
.hj-site-location__use:disabled { cursor: wait; opacity: .65; }

.hj-site-location__clear {
  padding: 11px 14px;
  border: 2px solid #e1e5ec;
  color: #667085;
  background: #f8fafc;
}

.hj-site-location__use:focus-visible,
.hj-site-location__clear:focus-visible,
.hj-site-location__result a:focus-visible {
  outline: 3px solid rgba(36, 107, 253, .2);
  outline-offset: 2px;
}

.hj-site-location__result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 13px;
  border: 2px solid #b8ead6;
  border-radius: 13px;
  background: #effcf7;
}

.hj-site-location__result[hidden] { display: none; }

.hj-site-location__result-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #ffffff;
  background: #12a36d;
  font-size: .82rem;
  font-weight: 900;
}

.hj-site-location__result div { display: grid; gap: 2px; min-width: 0; }
.hj-site-location__result strong { color: #126044; font-size: .82rem; }

.hj-site-location__result div span {
  color: #4b806e;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  overflow-wrap: anywhere;
}

.hj-site-location__result a {
  color: #174fc6;
  font-size: .73rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hj-site-location__status { margin-top: 10px; text-align: center; }
.hj-site-location__status[data-state="loading"] { color: #174fc6; }
.hj-site-location__status[data-state="success"] { color: #147a56; }
.hj-site-location__status[data-state="error"] { color: #b54708; }

@media (max-width: 560px) {
  .hj-site-location__modes { grid-template-columns: 1fr; }
  .hj-site-location__mode { min-height: 70px; }
  .hj-site-location__actions { align-items: stretch; flex-direction: column; }
  .hj-site-location__use,
  .hj-site-location__clear { width: 100%; }
  .hj-site-location__result { grid-template-columns: auto minmax(0, 1fr); }
  .hj-site-location__result a { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .hj-site-location__mode,
  .hj-site-location__use,
  .hj-site-location__clear { transition: none; }
}