/* styles.css - custom styles for Distance Checker */

/* ── Base & Gradient ───────────────────────────────────────── */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Nunito', sans-serif;
  color: #2e3a59;
}

/* ── Search Bar ─────────────────────────────────────────────── */
.input-group {
  background: #fff;
  border-radius: 50px;
}
.input-group .form-control {
  border: none;
  box-shadow: none;
  background: transparent;
}
.input-group .form-control:focus {
  box-shadow: none;
}
.input-group-text {
  border: none;
  background: #fff;
}

/* ── Radius Input ──────────────────────────────────────────── */
/* Inherits default .form-control styling */

/* ── Custom‑Lookup Fields ──────────────────────────────────── */
#add-form .form-control {
  border: 1px solid #ced4da;
  border-radius: .375rem;
  background: #fff;
  box-shadow: none;
}
#add-form .form-control:focus {
  border-color: #5c6bc0;
  box-shadow: 0 0 0 .2rem rgba(92,107,192,.25);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  transition: transform .2s ease;
  border: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
}

/* ── Checkboxes ────────────────────────────────────────────── */
.form-check-input {
  width: 1.5rem;
  height: 1.5rem;
}
.form-check-label {
  margin-left: .5rem;
  font-size: 1.05rem;
}

/* ── Result Cards ──────────────────────────────────────────── */
.card-result {
  border: none;
  border-radius: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-result:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.card-header {
  background: #5c6bc0;
  color: #fff;
  font-weight: 600;
}

/* ── Stop List ────────────────────────────────────────────── */
.stop-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stop-list li {
  padding: .5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.stop-list .routes,
.stop-list .distance {
  color: #555;
  font-size: .9rem;
  margin-top: .25rem;
}

/* ── Link & Spinner ───────────────────────────────────────── */
.status a {
  color: #5c6bc0;
  font-weight: 600;
  text-decoration: none;
}
.status a:hover {
  text-decoration: underline;
}
.spinner {
  color: #5c6bc0;
  margin-top: .5rem;
}

/* ── Utility ───────────────────────────────────────────────── */
.hidden {
  display: none;
}