*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background: #6495ed url('map-bg.jpg') center center / cover no-repeat fixed;
  color: #333;
  min-height: 100vh;
}

#app {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* ── Header ── */
#header {
  background: #4a7bd4;
  color: #fff;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}
#header h1 { font-size: 18px; font-weight: bold; }

/* ── Info banner ── */
#info {
  background: #485566;
  color: #dde;
  padding: 14px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  line-height: 1.5;
  font-size: 13px;
}
#info a { color: #adf; }

/* ── Search box ── */
#search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
#search-input {
  flex: 1;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}
#search-input:focus { border-color: #518dca; box-shadow: 0 0 0 2px rgba(81,141,202,.25); }

#search-btn {
  padding: 9px 20px;
  background: #518dca;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
#search-btn:hover { background: #3a75b5; }
#search-btn:disabled { background: #8ab4de; cursor: default; }

/* ── Status / error ── */
#status {
  text-align: center;
  color: #fff;
  padding: 8px;
  min-height: 24px;
  font-size: 13px;
}

/* ── Results ── */
#results { display: none; }

.result-card {
  background: #fff;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-left: 4px solid #518dca;
}
.result-card.out-of-area { border-left-color: #e07030; }

.result-address {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 6px;
  color: #222;
}

.result-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 3px 8px;
  font-size: 13px;
}
.result-grid .label { color: #666; }
.result-grid .value { color: #222; }

.out-of-area-msg {
  font-size: 13px;
  color: #c04010;
  margin-top: 6px;
  line-height: 1.4;
}

/* ── No results ── */
#no-results {
  display: none;
  background: #fff;
  border-radius: 4px;
  padding: 20px 16px;
  text-align: center;
  color: #555;
  line-height: 1.6;
}
#no-results a { color: #518dca; }