:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --border: #e5e2da;
  --text: #1c1b19;
  --text-dim: #6b6a63;
  --brand: #0f7a5c;
  --brand-dark: #0b5c45;
  --accent: #e8a33d;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f;
    --surface: #1e1d17;
    --border: #33322a;
    --text: #f1efe8;
    --text-dim: #a9a696;
    --brand: #2fbb8f;
    --brand-dark: #21a37c;
    --accent: #f0b955;
  }
}
:root[data-theme="dark"] {
  --bg: #15140f;
  --surface: #1e1d17;
  --border: #33322a;
  --text: #f1efe8;
  --text-dim: #a9a696;
  --brand: #2fbb8f;
  --brand-dark: #21a37c;
  --accent: #f0b955;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
a { color: var(--brand-dark); }

.site-header { border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.logo { font-weight: 800; font-size: 1.25rem; text-decoration: none; color: var(--text); }
.logo span { color: var(--brand); }
.site-header nav { display: flex; gap: 20px; }
.site-header nav a { text-decoration: none; color: var(--text-dim); font-weight: 600; font-size: 0.95rem; }

.hero { padding-block: 56px 40px; text-align: center; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 10px; }
.hero p { color: var(--text-dim); max-width: 560px; margin: 0 auto 28px; }

.search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.modes { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mode {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.mode.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.fields { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: end; }
.date-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.date-field input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}
@media (max-width: 560px) { .date-field { width: 100%; } }
.autocomplete { position: relative; }
.autocomplete-control { position: relative; display: block; }
.autocomplete-control input { width: 100%; padding-right: 28px; }
.autocomplete-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.75rem;
  pointer-events: none;
}
.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  max-height: 220px;
  overflow-y: auto;
}
/* Below the point where .fields stacks vertically, an open dropdown
   floating on top of the page would sit directly over the next field
   (From's dropdown over To, To's dropdown over the Search button) and
   silently steal taps meant for them. Keep it in normal document flow
   instead so it pushes the rest of the form down rather than covering it. */
@media (max-width: 560px) {
  .suggestions {
    position: static;
    margin-top: 6px;
    box-shadow: none;
  }
}
.suggestions li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.suggestions li:hover, .suggestions li.active { background: var(--bg); }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.fields label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.fields input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}
.btn-search {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-weight: 700;
  cursor: pointer;
}
.btn-search:hover { background: var(--brand-dark); }

#results-section { padding-block: 32px 8px; }
.results-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 16px; }
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.result-card .route { font-weight: 700; margin: 0 0 4px; }
.result-card .meta { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 10px; }
.result-card .price { color: var(--accent); font-weight: 700; }
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  margin-bottom: 8px;
  margin-right: 4px;
}
/* Modes stay mixed together in one list (not grouped into separate
   sections) -- color + icon on the badge and a left-border accent on the
   card are enough to tell them apart at a glance while scanning. */
.badge-bus   { color: #9a5b13; border-color: #e8c391; background: rgba(232, 163, 61, 0.14); }
.badge-boat  { color: #0b5c8a; border-color: #8fc3e0; background: rgba(15, 122, 176, 0.12); }
.badge-train { color: #0b5c45; border-color: #8fd6bc; background: rgba(15, 122, 92, 0.14); }
.badge-plane { color: #6a3d9a; border-color: #cbb3e8; background: rgba(122, 61, 176, 0.12); }
.result-card.mode-bus, .connection-leg.mode-bus     { border-left: 3px solid #e8a33d; }
.result-card.mode-boat, .connection-leg.mode-boat    { border-left: 3px solid #1a86c2; }
.result-card.mode-train, .connection-leg.mode-train   { border-left: 3px solid #0f7a5c; }
.result-card.mode-plane, .connection-leg.mode-plane   { border-left: 3px solid #8a4fc2; }
#empty-state { color: var(--text-dim); }

.connection-card { grid-column: 1 / -1; }
.connection-card .route { font-size: 1.05rem; }
.connection-leg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}
.connection-leg .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--text); font-size: 0.9rem; }
.connection-leg .meta .badge { margin-bottom: 0; }
.connection-leg .meta .price { color: var(--accent); font-weight: 700; }
.connection-leg .btn-out { margin-right: 0; white-space: nowrap; }

.info-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: 36px; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.info-card h3 { margin: 0 0 8px; }
.info-card p { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 12px; }
.btn-out {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand-dark);
  margin-right: 12px;
}

#popular-routes { padding-block: 8px 40px; }
#popular-routes h2 { font-size: 1.1rem; margin-bottom: 12px; }
.route-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.route-links a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  background: var(--surface);
}
.route-links a:hover { border-color: var(--brand); color: var(--brand-dark); }

.route-intro { color: var(--text-dim); max-width: 70ch; margin: 0 0 20px; }
.route-h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 32px 0 10px; }

.site-footer { border-top: 1px solid var(--border); margin-top: 24px; }
.site-footer .wrap { padding-block: 24px; color: var(--text-dim); font-size: 0.8rem; }