/* style.css */

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

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

#map { position: absolute; inset: 0; z-index: 0; }

/* ── Bottom panel ── */
#panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--tg-theme-bg-color, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
  transform: translateY(100%);
  transition: transform .3s ease;
  max-height: 70vh;
  overflow-y: auto;
}
#panel.open { transform: translateY(0); }

#panel-handle {
  width: 40px; height: 4px;
  background: #ccc; border-radius: 2px;
  margin: 8px auto 4px;
  padding: 10px 20px;
  background-clip: content-box;
  cursor: grab;
}
#panel-content { padding: 0 16px 24px; color: var(--tg-theme-text-color, #222); }
#panel-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--tg-theme-text-color, #222); }
#panel-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--tg-theme-hint-color, #888);
}

/* ── Tabs ── */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tab {
  flex: 1; padding: 6px; border-radius: 8px; border: 1px solid #ddd;
  background: none; cursor: pointer; font-size: 13px;
  color: var(--tg-theme-text-color, #333);
}
.tab.active {
  background: var(--tg-theme-button-color, #2481cc);
  color: #fff; border-color: transparent;
}

/* ── Route card ── */
.route-card {
  padding: 10px 0; border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.route-badge {
  min-width: 42px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  flex-shrink: 0;
}
.route-info { flex: 1; min-width: 0; }
.route-name { font-size: 12px; color: var(--tg-theme-hint-color, #666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-time { font-size: 11px; color: #aaa; }

/* ── Checkbox list ── */
.check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer;
}
.check-item input { width: 18px; height: 18px; accent-color: var(--tg-theme-button-color, #2481cc); }

/* ── Buttons ── */
.btn {
  display: block; width: 100%; padding: 12px;
  background: var(--tg-theme-button-color, #2481cc);
  color: var(--tg-theme-button-text-color, #fff);
  border: none; border-radius: 10px; font-size: 15px;
  font-weight: 600; cursor: pointer; margin-top: 12px;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn-secondary {
  background: none;
  color: var(--tg-theme-button-color, #2481cc);
  border: 1px solid var(--tg-theme-button-color, #2481cc);
}

/* ── FAB stack ── */
#fab-stack {
  position: fixed; bottom: 20px; right: 16px; z-index: 99;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
#fab-stack button {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tg-theme-button-color, #2481cc);
  color: #fff; border: none; font-size: 20px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, opacity .15s;
}
#fab-stack button:active { transform: scale(.92); }
#fab-stack button:disabled { opacity: .6; cursor: default; }

/* ── Route plan steps ── */
.step { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.step-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.step-text { font-size: 13px; }
.step-sub { font-size: 11px; color: #888; margin-top: 2px; }

/* ── Bus popup ── */
.popup-route-btn {
  display: inline-block; margin-top: 6px; padding: 4px 10px;
  background: var(--tg-theme-button-color, #2481cc);
  color: #fff; border-radius: 6px; font-size: 12px; cursor: pointer;
  border: none;
}

/* ── Spinner ── */
.spinner {
  border: 3px solid #f3f3f3; border-top: 3px solid var(--tg-theme-button-color, #2481cc);
  border-radius: 50%; width: 24px; height: 24px;
  animation: spin .8s linear infinite; margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Leaflet popup — тема Telegram ── */
.leaflet-popup-content-wrapper {
  background: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color, #222);
  box-shadow: 0 3px 14px rgba(0,0,0,.2);
}
.leaflet-popup-tip {
  background: var(--tg-theme-bg-color, #fff);
}
.leaflet-popup-content b {
  color: var(--tg-theme-text-color, #222);
}
.leaflet-popup-close-button {
  color: var(--tg-theme-hint-color, #888) !important;
}

/* ── Заголовки групп маршрутов ── */
.type-header {
  font-size: 11px; font-weight: 600;
  color: var(--tg-theme-hint-color, #888);
  text-transform: uppercase; margin: 10px 0 4px;
}

/* ── Текст в карточках маршрутов ── */
.route-card { color: var(--tg-theme-text-color, #222); }
.route-card-text {
  font-size: 13px;
  color: var(--tg-theme-text-color, #222);
}

/* ── Dark mode via TG theme ── */
@media (prefers-color-scheme: dark) {
  #panel { background: #1c1c1e; }
  .route-card, .check-item, .step { border-color: #2c2c2e; }
  .type-header { color: #888; }
  .leaflet-popup-content-wrapper { background: #1c1c1e; color: #f0f0f0; }
  .leaflet-popup-tip { background: #1c1c1e; }
  .leaflet-popup-content b { color: #f0f0f0; }
}