/* ================= ROUTE PLANNER ================= */
.planner-wrap { max-width: 1100px; margin: 0 auto; padding: var(--spacing-md) 0; }

.planner-head { margin-bottom: var(--spacing-md); }
.planner-title { font-family: var(--font-secondary); font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.02em; }
.planner-title .fas { color: var(--accent-blue); }
.planner-subtitle { color: var(--text-muted); margin-top: 0.35rem; max-width: 720px; }

.planner-form { background: var(--primary-white); border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg); padding: var(--spacing-md); margin-bottom: var(--spacing-md); }

.route-fields { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: end; }
.route-field { position: relative; min-width: 0; }
.route-field label { display: block; font-weight: 500; font-size: 0.85rem;
  color: var(--text-secondary); margin-bottom: 0.35rem; }
.route-field label .fas { color: var(--accent-blue); margin-right: 0.25rem; }
.route-field.origin { grid-column: 1; }
.route-field.destination { grid-column: 3; }
.swap-btn { grid-column: 2; width: 40px; height: 40px; padding: 0; margin-bottom: 1px; }

.input-with-action { position: relative; display: flex; }
.input-with-action .form-control { padding-right: 9rem; }
.gps-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  padding: 0.45rem 0.7rem; font-size: 0.78rem; }
.gps-btn.loading { opacity: 0.6; cursor: progress; }
.gps-btn .fa-spinner { animation: spin 1s linear infinite; }

.planner-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem; margin-top: 0.9rem; }
.route-option label { display: block; font-weight: 500; font-size: 0.85rem;
  color: var(--text-secondary); margin-bottom: 0.35rem; }

.planner-actions { display: flex; gap: 0.6rem; align-items: center;
  margin-top: var(--spacing-md); flex-wrap: wrap; }
.plan-btn { min-width: 180px; }
.plan-btn:disabled { opacity: 0.7; cursor: progress; }
.plan-btn .fa-spinner { animation: spin 1s linear infinite; }
.approx-note { font-size: 0.8rem; }

.autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  display: none; margin-top: 4px; max-height: 300px; overflow-y: auto;
  background: var(--primary-white); border: 1px solid var(--medium-gray);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.autocomplete-dropdown.show { display: block; }
.autocomplete-item { padding: 0.6rem 0.8rem; cursor: pointer;
  border-bottom: 1px solid var(--light-gray); }
.autocomplete-item:last-child { border-bottom: 0; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--accent-blue-light); }
.autocomplete-item .item-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.autocomplete-item .item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.station-badge { display: inline-block; background: var(--accent-green-light); color: var(--accent-green);
  padding: 0.2rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap; }
.history-badge { display: inline-block; background: var(--light-gray); color: var(--text-muted);
  padding: 0.2rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }

.route-map { height: 400px; border-radius: var(--radius-lg); border: 1px solid var(--medium-gray);
  margin-bottom: var(--spacing-md); overflow: hidden; background: var(--light-gray); z-index: 1; }

.route-summary { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
.route-summary p { margin: 0; }

.route-results-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: var(--spacing-sm) 0 var(--spacing-sm); }
.route-results-title { font-family: var(--font-secondary); font-weight: 600; font-size: 1.15rem; }

.route-row-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }

.empty-state { text-align: center; padding: var(--spacing-xl) var(--spacing-md); color: var(--text-muted); }
.empty-state > .fas { font-size: 2.6rem; color: var(--medium-gray); margin-bottom: 0.75rem; }
.empty-state h2 { font-family: var(--font-secondary); font-size: 1.25rem;
  color: var(--text-primary); margin-bottom: 0.4rem; }
.example-routes { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  margin-top: var(--spacing-sm); }
.example-route { font-size: 0.85rem; }

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip { background: var(--primary-white); color: var(--text-primary); }
[data-theme="dark"] .leaflet-container { background: var(--light-gray); }

@media (max-width: 720px) {
  .route-fields { grid-template-columns: 1fr; }
  .route-field.origin, .route-field.destination, .swap-btn { grid-column: 1; }
  .swap-btn { justify-self: center; transform: rotate(90deg); }
  .route-map { height: 300px; }
  .plan-btn { width: 100%; }
  .planner-actions .btn-modern { flex: 1; }
}