/**
 * AP core — лёгкая база вместо Materialize.
 * Префикс ap- для утилит; сетка и цвета — без префикса (как договорено).
 *
 * Дубли Materialize в разметке оставляем рядом с ap-алиасами, пока старый JS цепляется к ним.
 *
 * Явные ap-алиасы в этом файле: .ap-btn* .ap-btn-floating .ap-waves .ap-waves-light .ap-black
 * .ap-z-depth-0 .ap-z-depth-s .ap-backdrop-blur-grey
 * .ap-modal .ap-sidenav .ap-collapsible .ap-collapsible-header .ap-collapsible-body
 * (триггеры в ap-ui.js: .ap-modal-trigger .ap-sidenav-trigger .ap-modal-close)
 */

/* -------------------------------------------------------------------------- */
/* Цвета (CSS variables, без префикса ap)                                      */
/* -------------------------------------------------------------------------- */
:root {
  --primary: #1e88e5;
  --primary-dark: #1565c0;
  --accent: #00bfa5;
  --surface: #121212;
  --surface-elevated: #1e1e1e;
  --text: rgba(255, 255, 255, 0.87);
  --text-muted: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.12);
  --overlay: rgba(0, 0, 0, 0.5);
  --danger: #e53935;
  --success: #43a047;

  --ap-gutter: 12px;
  --ap-radius: 8px;
  --ap-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ap-z-modal: 10050;
  --ap-z-sidenav: 10040;
  --ap-z-overlay: 10030;
}

.mapboxgl-popup-content {
  color: #000;
}

.mta-route-image-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mta-location-input-train-icon,
.mta-location-input-train-icon2,
.mta-location-input-train-icon3,
.mta-route-itinerary-line,
.mta-train-label-td,
.mta-train-label-16-q {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mta-location-input-train-icon span,
.mta-location-input-train-icon2 span,
.mta-location-input-train-icon3 span,
.mta-route-itinerary-line span,
.mta-train-label-td span,
.mta-train-label-16-q span {
  margin: auto;
  line-height: 1;
}

.mta-route-image-badge img,
.mta-location-input-train-icon img,
.mta-location-input-train-icon2 img,
.mta-location-input-train-icon3 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ap-cta-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px !important;
  border-radius: 16px !important;
  font-weight: 850;
  text-transform: none;
  transition: 0.3s all !important;
  will-change: transform;
}

.ap-cta-btn:hover,
.ap-cta-btn:focus {
  transform: translateY(-3px);
  text-decoration: none;
}

.ap-cta-btn:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.12s;
}

.ap-cta-btn:focus-visible {
  outline: 2px solid #64b5f6;
  outline-offset: 3px;
}

.ap-cta-btn--primary {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 12px 34px rgb(255 255 255 / 10%);
}

.ap-cta-btn--primary:hover,
.ap-cta-btn--primary:focus {
  background: #2196f3 !important;
  color: #fff !important;
  box-shadow: 0 16px 42px rgb(33 150 243 / 32%);
}

.ap-cta-btn--secondary {
  background: rgb(255 255 255 / 8%) !important;
  color: #fff !important;
  border: 1px solid rgb(255 255 255 / 14%) !important;
}

.ap-cta-btn--secondary:hover,
.ap-cta-btn--secondary:focus {
  background: rgb(255 255 255 / 14%) !important;
  border-color: rgb(255 255 255 / 30%) !important;
  box-shadow: 0 14px 36px rgb(0 0 0 / 26%);
}

/* -------------------------------------------------------------------------- */
/* Сетка: row / col / s* / m* / l* (12 колонок, как в Materialize)               */
/* Breakpoints: m ≥ 601px, l ≥ 993px                                           */
/* -------------------------------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--ap-gutter) * -1);
  margin-right: calc(var(--ap-gutter) * -1);
  box-sizing: border-box;
}

.row.no-pad,
.row.ap-no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-pad > .col,
.row.ap-no-gutter > .col {
  padding-left: 0;
  padding-right: 0;
}

.col {
  flex: 1 1 auto;
  padding-left: var(--ap-gutter);
  padding-right: var(--ap-gutter);
  box-sizing: border-box;
  min-width: 0;
}

/* Small (default, < 601px): s1 … s12 */
.col.s1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col.s2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col.s3 { flex: 0 0 25%; max-width: 25%; }
.col.s4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col.s5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col.s6 { flex: 0 0 50%; max-width: 50%; }
.col.s7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col.s8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col.s9 { flex: 0 0 75%; max-width: 75%; }
.col.s10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col.s11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col.s12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 601px) {
  .col.m1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col.m2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col.m3 { flex: 0 0 25%; max-width: 25%; }
  .col.m4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col.m5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col.m6 { flex: 0 0 50%; max-width: 50%; }
  .col.m7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col.m8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col.m9 { flex: 0 0 75%; max-width: 75%; }
  .col.m10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col.m11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col.m12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 993px) {
  .col.l1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col.l2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col.l3 { flex: 0 0 25%; max-width: 25%; }
  .col.l4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col.l5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col.l6 { flex: 0 0 50%; max-width: 50%; }
  .col.l7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col.l8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col.l9 { flex: 0 0 75%; max-width: 75%; }
  .col.l10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col.l11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col.l12 { flex: 0 0 100%; max-width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Утилиты с префиксом ap-                                                     */
/* -------------------------------------------------------------------------- */
.ap-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ap-gutter);
  padding-right: var(--ap-gutter);
  box-sizing: border-box;
}

.ap-container-fluid {
  width: 100%;
  padding-left: var(--ap-gutter);
  padding-right: var(--ap-gutter);
  box-sizing: border-box;
}

.ap-flex { display: flex; }
.ap-inline-flex { display: inline-flex; }
.ap-flex-col { flex-direction: column; }
.ap-flex-wrap { flex-wrap: wrap; }
.ap-items-start { align-items: flex-start; }
.ap-items-center { align-items: center; }
.ap-items-end { align-items: flex-end; }
.ap-items-stretch { align-items: stretch; }
.ap-justify-start { justify-content: flex-start; }
.ap-justify-center { justify-content: center; }
.ap-justify-end { justify-content: flex-end; }
.ap-justify-between { justify-content: space-between; }
.ap-gap-8 { gap: 8px; }
.ap-gap-16 { gap: 16px; }
.ap-gap-24 { gap: 24px; }

.ap-center { text-align: center; }
.ap-left { text-align: left; }
.ap-right { text-align: right; }

.ap-no-pad { padding: 0 !important; }
.ap-no-mar { margin: 0 !important; }
.ap-pad-8 { padding: 8px; }
.ap-pad-16 { padding: 16px; }
.ap-pad-24 { padding: 24px; }
.ap-mar-auto { margin-left: auto; margin-right: auto; }

.ap-block { display: block; }
.ap-inline-block { display: inline-block; }
.ap-hidden { display: none !important; }
.ap-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ap-rounded { border-radius: var(--ap-radius); }
.ap-shadow { box-shadow: var(--ap-shadow); }

/* Видимость по брейкпоинтам (совместимость с hide-on-med-and-down и т.п.) */
@media (max-width: 992px) {
  .ap-hide-md-down,
  .hide-on-med-and-down { display: none !important; }
}

@media (min-width: 993px) {
  .ap-hide-lg-up { display: none !important; }
}

@media (max-width: 600px) {
  .ap-hide-sm-only { display: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Минимальные стили для модалок и сайднава (работают с ap-ui.js)              */
/* -------------------------------------------------------------------------- */
.ap-overlay,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: var(--ap-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ap-overlay.is-visible,
.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.modal,
.ap-modal {
  position: fixed;
  inset: 0;
  z-index: var(--ap-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal.is-open,
.modal.open,
.ap-modal.is-open,
.ap-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#modalMtaLines {
  z-index: 10050 !important;
}

#modalMtaInfo {
  z-index: 10070 !important;
}

.modal .modal-content,
.ap-modal .modal-content,
.ap-modal .ap-modal-content {
  pointer-events: auto;
  color: var(--text);
  border-radius: var(--ap-radius);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  padding-top: 4px !important;
  overflow: auto;
  box-shadow: none !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}

.modal .modal-content,
.ap-modal .modal-content,
.ap-modal .ap-modal-content {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ap-map-theme-dark .modal,
body.ap-map-theme-dark .ap-modal,
body.ap-map-theme-dark .modal .modal-content,
body.ap-map-theme-dark .ap-modal .modal-content,
body.ap-map-theme-dark .ap-modal .ap-modal-content {
  color: #f4f4f4 !important;
}

body.ap-map-theme-light .modal,
body.ap-map-theme-light .ap-modal,
body.ap-map-theme-light .modal .modal-content,
body.ap-map-theme-light .ap-modal .modal-content,
body.ap-map-theme-light .ap-modal .ap-modal-content {
  color: #111111 !important;
}

body.ap-map-theme-dark .modal label,
body.ap-map-theme-dark .ap-modal label {
  color: #bdbdbd !important;
}

body.ap-map-theme-light .modal label,
body.ap-map-theme-light .ap-modal label {
  color: #616161 !important;
}

.modal label.green-text,
.ap-modal label.green-text,
.modal .green-text,
.ap-modal .green-text,
body.ap-map-theme-dark .modal label.green-text,
body.ap-map-theme-dark .ap-modal label.green-text,
body.ap-map-theme-light .modal label.green-text,
body.ap-map-theme-light .ap-modal label.green-text {
  color: #4caf50 !important;
}

.modal label.orange-text,
.ap-modal label.orange-text,
.modal .orange-text,
.ap-modal .orange-text,
body.ap-map-theme-dark .modal label.orange-text,
body.ap-map-theme-dark .ap-modal label.orange-text,
body.ap-map-theme-light .modal label.orange-text,
body.ap-map-theme-light .ap-modal label.orange-text {
  color: #ff9800 !important;
}

.modal label.red-text,
.ap-modal label.red-text,
.modal .red-text,
.ap-modal .red-text,
body.ap-map-theme-dark .modal label.red-text,
body.ap-map-theme-dark .ap-modal label.red-text,
body.ap-map-theme-light .modal label.red-text,
body.ap-map-theme-light .ap-modal label.red-text {
  color: #f44336 !important;
}

#mta-location-route-info.mta-location-box-bg:not(.hide) {
  height: 202px !important;
  cursor: pointer;
}

.mta-route-details-button {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(33 150 243 / 14%);
  color: #2196f3 !important;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

body.ap-map-theme-light .mta-route-details-button {
  background: rgb(33 150 243 / 12%);
}

#modalMtaSearchRoute .mta-location-input-sep {
  background: rgb(255 255 255 / 8%) !important;
  color: #f4f4f4 !important;
}

#modalMtaSearchRoute .mta-location-input-sep::placeholder {
  color: rgb(255 255 255 / 52%) !important;
}

body.ap-map-theme-light #modalMtaSearchRoute .mta-location-input-sep {
  background: rgb(255 255 255 / 42%) !important;
  color: #111 !important;
}

body.ap-map-theme-light #modalMtaSearchRoute .mta-location-input-sep::placeholder {
  color: rgb(0 0 0 / 45%) !important;
}

#modalMtaSearchRoute .mta-location-input-close-icon2 {
  background: rgb(255 255 255 / 10%) !important;
}

#modalMtaSearchRoute .mta-location-input-close-icon2 .material-icons-round,
#modalMtaSearchRoute .mta-location-input-close-icon2 i {
  color: rgb(255 255 255 / 72%) !important;
}

body.ap-map-theme-light #modalMtaSearchRoute .mta-location-input-close-icon2 {
  background: rgb(0 0 0 / 8%) !important;
}

body.ap-map-theme-light #modalMtaSearchRoute .mta-location-input-close-icon2 .material-icons-round,
body.ap-map-theme-light #modalMtaSearchRoute .mta-location-input-close-icon2 i {
  color: rgb(0 0 0 / 58%) !important;
}

#map-nav.mta-geo-panel-hidden [data-mta-action="fly-to-user-or-default"] {
  bottom: 80px !important;
}

#map-nav.mta-geo-panel-hidden #mta-chat-near {
  bottom: 80px !important;
}

.mta-route-time-label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.mta-route-alt-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 10px;
  font-size: 0.76rem;
  opacity: 0.78;
}

.mta-route-alt-indicator > div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mta-route-alt-indicator button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  cursor: pointer;
}

.mta-route-alt-indicator button.active {
  opacity: 1;
}

.mta-route-walking-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(33 150 243 / 12%);
  color: #2196f3;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

.mta-route-walking-preview .material-icons-round {
  color: #2196f3 !important;
  font-size: 18px;
}

.mta-route-step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}

.mta-route-walking-chip {
  background: rgb(33 150 243 / 14%);
  color: #2196f3;
  white-space: nowrap;
}

.mta-route-walking-chip .material-icons-round {
  color: #2196f3 !important;
  font-size: 12px;
  line-height: 16px;
}

#mta-location-route-info-lines .mta-location-input-train-icon3 {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin-right: 4px !important;
  border-radius: 50% !important;
  font-size: 12px;
}

#mta-location-route-info-lines .mta-location-input-train-icon3 span {
  font-size: 9px !important;
  line-height: 16px !important;
}

#mta-location-route-info-lines .mta-location-input-train-icon3 i {
  font-size: 14px !important;
  line-height: 16px !important;
}

.modal hr,
.ap-modal hr,
.backdrop-blur-grey hr,
.ap-backdrop-blur-grey hr {
  border: 0 !important;
  height: 1px !important;
  background-color: rgb(255 255 255 / 12%) !important;
}

body.ap-map-theme-light .modal hr,
body.ap-map-theme-light .ap-modal hr,
body.ap-map-theme-light .backdrop-blur-grey hr,
body.ap-map-theme-light .ap-backdrop-blur-grey hr {
  background-color: rgb(0 0 0 / 12%) !important;
}

body.ap-map-theme-dark .modal .mta-train-label-list td label.grey.lighten-3,
body.ap-map-theme-dark .ap-modal .mta-train-label-list td label.grey.lighten-3 {
  background-color: #2b2b2b !important;
  border-color: #2b2b2b !important;
  color: #e5e5e5 !important;
}

body.ap-map-theme-light .modal .mta-train-label-list td label.grey.lighten-3,
body.ap-map-theme-light .ap-modal .mta-train-label-list td label.grey.lighten-3 {
  background-color: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
  color: #303030 !important;
}

.mta-modal-line-badges,
.mta-modal-action-row {
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
}

.mta-modal-action-row {
  margin-top: 12px;
}

.mta-modal-action-row .btn,
.mta-modal-action-row button {
  margin: 0 !important;
}

.mta-line-alert-action {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.mta-line-active-alerts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ff9800;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

.mta-line-active-alerts .material-icons-round {
  color: #ff9800 !important;
  font-size: 18px;
}

.mta-line-active-alert-preview {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.mta-line-active-alert-card {
  padding: 12px;
  border-radius: 14px;
  background: rgb(255 255 255 / 8%);
}

body.ap-map-theme-light .mta-line-active-alert-card {
  background: rgb(0 0 0 / 6%);
}

.mta-line-active-alert-type {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff9800;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mta-route-tile {
  position: relative;
  align-items: center;
}

.mta-route-tile--inactive {
  opacity: 0.38;
  filter: grayscale(0.25);
}

.mta-route-has-active-alert {
  animation: mta-alert-card-brightness 3.2s ease-in-out infinite;
}

.mta-route-alert-bang {
  position: absolute;
  top: -6px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ff9800;
  color: #111;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  animation: mta-alert-bang-blink 2.4s ease-in-out infinite;
  pointer-events: none;
}

.mta-line-active-alert-text {
  font-size: 0.95rem;
  line-height: 1.35;
}

.mta-line-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.mta-line-status-summary--offline {
  grid-template-columns: 1fr;
}

.mta-line-status-summary--offline .mta-line-status-card {
  flex: 1 1 100%;
}

.mta-line-status-summary--offline .mta-line-status-card .material-icons-round {
  font-size: 22px;
}

.mta-line-status-summary--offline .mta-line-status-title {
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: normal;
}

.mta-line-status-summary--offline label {
  font-size: 0.9rem;
  line-height: 1.45;
}

.mta-route-walking-row td {
  background: rgb(33 150 243 / 8%);
}

body.ap-map-theme-light .mta-route-walking-row td {
  background: rgb(33 150 243 / 10%);
}

.mta-route-itinerary {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.mta-route-itinerary-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, 0.55fr) minmax(64px, 0.45fr);
  gap: 8px;
  margin-top: 10px;
}

.mta-route-itinerary-total-card {
  padding: 12px;
  border-radius: 14px;
  background: rgb(255 255 255 / 8%);
}

body.ap-map-theme-light .mta-route-itinerary-total-card {
  background: rgb(0 0 0 / 6%);
}

.mta-route-itinerary-total-card label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.mta-route-itinerary-total-card div {
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.15;
}

@media (max-width: 520px) {
  .mta-route-itinerary-total {
    grid-template-columns: minmax(0, 1fr) minmax(64px, 0.55fr) minmax(56px, 0.45fr);
    gap: 6px;
  }

  .mta-route-itinerary-total-card {
    padding: 10px 8px;
  }

  .mta-route-itinerary-total-card label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }

  .mta-route-itinerary-total-card div {
    font-size: 0.98rem;
  }
}

.mta-route-overview {
  margin-top: 14px;
}

.mta-route-overview h5 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.mta-route-overview-algorithm-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgb(244 67 54 / 22%);
  border-radius: 14px;
  background: rgb(244 67 54 / 10%);
  line-height: 1.38;
}

.mta-route-overview-algorithm-warning .material-icons-round {
  font-size: 20px;
  line-height: 1.2;
}

.mta-route-overview-list {
  display: grid;
  gap: 10px;
}

.mta-route-overview-card {
  border-radius: 14px;
  background: rgb(255 255 255 / 8%);
  overflow: hidden;
}

body.ap-map-theme-light .mta-route-overview-card {
  background: rgb(0 0 0 / 6%);
}

.mta-route-overview-head,
.mta-route-overview-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mta-route-overview-head {
  padding: 12px;
  font-weight: 750;
  background: transparent !important;
}

.mta-route-overview-expand {
  margin-left: auto;
  opacity: 0.72;
  transition: transform 0.2s ease;
}

.mta-route-overview-card.active .mta-route-overview-expand {
  transform: rotate(180deg);
}

.mta-route-overview-service {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.mta-route-overview-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.84;
  font-size: 0.88rem;
}

.mta-route-overview-chip .material-icons-round,
.mta-route-overview-alert .material-icons-round,
.mta-route-overview-alert-head .material-icons-round {
  font-size: 17px;
}

.mta-route-overview-details {
  padding: 0 12px 12px !important;
  border-top: 0 !important;
  background: transparent !important;
}

.mta-route-overview-alerts {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.mta-route-overview-block {
  padding: 10px;
  border-radius: 12px;
  background: rgb(255 255 255 / 7%);
}

body.ap-map-theme-light .mta-route-overview-block {
  background: rgb(0 0 0 / 5%);
}

.mta-route-overview-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff9800;
  margin-bottom: 6px;
}

.mta-route-overview-alert-head b {
  color: #ff9800;
}

.mta-route-overview-alert-text {
  color: inherit;
  line-height: 1.35;
  font-size: 0.9rem;
}

.mta-route-overview-station {
  color: #fff;
}

.mta-route-overview-alert-text .mta-route-itinerary-line {
  display: inline-grid !important;
  place-items: center;
  min-width: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  padding: 0 !important;
  text-align: center;
  border-radius: 50% !important;
}

body.ap-map-theme-light .mta-route-overview-station {
  color: #111;
}

.mta-route-overview-service-block {
  margin-top: 2px;
  line-height: 1.35;
  font-size: 0.9rem;
}

.mta-route-itinerary-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  background: transparent;
  position: relative;
}

body.ap-map-theme-light .mta-route-itinerary-step {
  background: transparent;
}

.mta-route-itinerary-step--walk {
  background: transparent;
}

body.ap-map-theme-light .mta-route-itinerary-step--walk {
  background: transparent;
}

.mta-route-itinerary-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.mta-route-itinerary-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgb(255 255 255 / 12%);
}

body.ap-map-theme-light .mta-route-itinerary-rail::before {
  background: rgb(0 0 0 / 12%);
}

.mta-route-itinerary-step:first-child .mta-route-itinerary-rail::before {
  top: 14px;
}

.mta-route-itinerary-step:last-child .mta-route-itinerary-rail::before {
  bottom: calc(100% - 14px);
}

.mta-route-itinerary-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 14px;
  border-radius: 50%;
  background: #9e9e9e;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 8%);
}

.mta-route-itinerary-dot .material-icons-round {
  color: #fff !important;
  font-size: 14px;
  line-height: 1;
}

body.ap-map-theme-light .mta-route-itinerary-dot {
  box-shadow: 0 0 0 4px rgb(0 0 0 / 6%);
}

.mta-route-itinerary-step--board .mta-route-itinerary-dot,
.mta-route-itinerary-step--transfer .mta-route-itinerary-dot,
.mta-route-itinerary-step--final .mta-route-itinerary-dot {
  width: 24px;
  height: 24px;
  margin-top: 9px;
  background: #2196f3;
}

.mta-route-itinerary-step--transfer-exit .mta-route-itinerary-rail::after,
.mta-route-itinerary-step--transfer-entry .mta-route-itinerary-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 0;
  width: 2px;
  transform: translateX(-50%);
  background: #2196f3;
}

.mta-route-itinerary-step--transfer-exit .mta-route-itinerary-rail::after {
  top: 21px;
  bottom: 0;
}

.mta-route-itinerary-step--transfer-entry .mta-route-itinerary-rail::after {
  top: 0;
  bottom: calc(100% - 21px);
}

.mta-route-itinerary-step--walk .mta-route-itinerary-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 10px;
  background: rgb(33 150 243 / 18%);
  box-shadow: none;
}

.mta-route-itinerary-step--walk .mta-route-itinerary-dot .material-icons-round {
  font-size: 15px;
}

.mta-route-itinerary-main {
  min-width: 0;
  padding: 10px 0;
}

.mta-route-itinerary-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mta-route-itinerary-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mta-route-itinerary-line {
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  line-height: 18px !important;
  font-size: 10px !important;
}

.mta-route-itinerary-ada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: #2196f3;
  color: #fff;
}

.mta-route-itinerary-ada .material-icons-round {
  color: #fff !important;
  font-size: 14px;
  line-height: 18px;
}

.mta-route-itinerary-title {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
}

.mta-route-itinerary-main label {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}

.mta-route-itinerary-guidance {
  display: block;
  margin-top: 3px;
  opacity: 0.78;
}

.mta-route-itinerary-station-alert {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.86rem;
  line-height: 1.3;
  font-weight: 400;
}

.mta-route-itinerary-station-alert .material-icons-round {
  font-size: 15px;
  line-height: 1;
}

.mta-station-eta-warning {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 400;
}

.mta-station-eta-warning .material-icons-round {
  font-size: 14px;
  line-height: 1;
}

.mta-route-itinerary-arrivals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.mta-route-itinerary-arrival {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mta-route-itinerary-arrival-separator {
  opacity: 0.5;
}

.mta-route-itinerary-time {
  font-weight: 750;
  color: #2196f3;
  white-space: nowrap;
}

.mta-route-itinerary-marker .material-icons-round,
.mta-route-itinerary-step--walk .material-icons-round {
  color: #2196f3 !important;
}

.mta-line-status-card {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgb(255 255 255 / 8%);
}

body.ap-map-theme-light .mta-line-status-card {
  background: rgb(0 0 0 / 6%);
}

.mta-line-status-card .material-icons-round {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 19px;
}

.mta-line-status-card label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.mta-line-status-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left;
}

@media (max-width: 380px) {
  .mta-line-status-summary {
    gap: 6px;
  }

  .mta-line-status-card {
    gap: 4px;
    padding: 8px 6px;
    border-radius: 12px;
  }

  .mta-line-status-card .material-icons-round {
    font-size: 15px;
  }

  .mta-line-status-card label {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
  }

  .mta-line-status-title {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .mta-line-status-summary--offline .mta-line-status-title {
    font-size: 0.95rem;
    line-height: 1.35;
    white-space: normal;
  }

  .mta-line-status-summary--offline label {
    font-size: 0.9rem;
    line-height: 1.45;
  }
}

@keyframes mta-alert-card-brightness {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

@keyframes mta-alert-bang-blink {
  0%, 100% {
    opacity: 0.95;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.92);
  }
}

.mta-train-info-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mta-train-info-card {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgb(255 255 255 / 8%);
}

body.ap-map-theme-light .mta-train-info-card {
  background: rgb(0 0 0 / 6%);
}

.mta-train-info-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.mta-train-info-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mta-train-info-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
}

@media (max-width: 430px) {
  .mta-train-info-summary {
    grid-template-columns: 1fr;
  }
}

.mta-alert-content .collapsible,
.mta-alert-content .collapsible li,
.mta-alert-content .collapsible-header,
.mta-alert-content .collapsible-body {
  background: transparent !important;
}

.mta-alert-content .collapsible li {
  border-bottom: 0 !important;
  margin-bottom: 12px !important;
  border-radius: 14px !important;
  background: rgb(255 255 255 / 8%) !important;
  overflow: hidden;
}

.mta-alert-content .collapsible-body {
  border-top: 0 !important;
}

.mta-alert-content .collapsible-body li {
  padding: 0 12px !important;
}

body.ap-map-theme-light .mta-alert-content .collapsible li {
  background: rgb(0 0 0 / 6%) !important;
}

#mta-chat-list {
  scrollbar-color: rgb(255 255 255 / 25%) transparent;
}

.mta-chat-message {
  color: inherit;
}

.modal #mta-chat-list hr,
.modal .mta-chat-message hr,
.modal hr.mta-chat-divider,
.ap-modal #mta-chat-list hr,
.ap-modal .mta-chat-message hr,
.ap-modal hr.mta-chat-divider {
  display: block !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  height: 1px !important;
  min-height: 1px !important;
  background-color: rgb(255 255 255 / 12%) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  width: 100% !important;
  margin: 12px 0;
}

body.ap-map-theme-light .modal #mta-chat-list hr,
body.ap-map-theme-light .modal .mta-chat-message hr,
body.ap-map-theme-light .modal hr.mta-chat-divider,
body.ap-map-theme-light .ap-modal #mta-chat-list hr,
body.ap-map-theme-light .ap-modal .mta-chat-message hr,
body.ap-map-theme-light .ap-modal hr.mta-chat-divider {
  background-color: rgb(0 0 0 / 12%) !important;
}

.mta-chat-panel {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 8px 18px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: transparent;
}

.mta-chat-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px;
  border-radius: 16px;
  background: rgb(255 255 255 / 8%);
  box-sizing: border-box;
}

body.ap-map-theme-light .mta-chat-form {
  background: rgb(0 0 0 / 6%);
}

.mta-chat-input {
  flex: 1;
  min-width: 0;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgb(255 255 255 / 12%) !important;
  border-radius: 12px !important;
  background: rgb(0 0 0 / 18%) !important;
  color: #f4f4f4 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.ap-map-theme-light .mta-chat-input {
  border-color: rgb(0 0 0 / 12%) !important;
  background: rgb(255 255 255 / 50%) !important;
  color: #111 !important;
}

.mta-chat-input::placeholder {
  color: rgb(255 255 255 / 52%);
}

body.ap-map-theme-light .mta-chat-input::placeholder {
  color: rgb(0 0 0 / 45%);
}

.mta-chat-input:focus {
  border-color: rgb(33 150 243 / 75%) !important;
  background: rgb(0 0 0 / 24%) !important;
}

body.ap-map-theme-light .mta-chat-input:focus {
  background: rgb(255 255 255 / 72%) !important;
}

.mta-chat-send {
  flex: 0 0 42px;
  width: 42px;
  height: 40px;
  min-width: 42px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

.modal.bottom-sheet,
.ap-modal.ap-bottom-sheet,
.ap-modal.bottom-sheet {
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: calc(90vh - env(safe-area-inset-top, 0px)) !important;
  max-height: calc(90dvh - env(safe-area-inset-top, 0px)) !important;
  max-height: calc((var(--ap-visual-vh, 100dvh) * 0.9) - env(safe-area-inset-top, 0px)) !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  background-clip: padding-box !important;
  --ap-modal-y: 100%;
  transform: translateY(var(--ap-modal-y)) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0.25s ease;
}

.modal.bottom-sheet.is-open,
.modal.bottom-sheet.open,
.ap-modal.ap-bottom-sheet.is-open,
.ap-modal.ap-bottom-sheet.open,
.ap-modal.bottom-sheet.is-open,
.ap-modal.bottom-sheet.open {
  --ap-modal-y: 0px;
  transform: translateY(var(--ap-modal-y)) !important;
}

.modal.bottom-sheet.ap-modal-dragging,
.ap-modal.bottom-sheet.ap-modal-dragging {
  transition: none !important;
  user-select: none !important;
}

.modal.bottom-sheet.ap-modal-settling,
.ap-modal.bottom-sheet.ap-modal-settling {
  transition: transform 0.34s cubic-bezier(0.2, 1.18, 0.22, 1), opacity 0.2s ease !important;
}

.modal.bottom-sheet.ap-modal-closing,
.ap-modal.bottom-sheet.ap-modal-closing {
  transition: transform 0.26s cubic-bezier(0.32, 0, 0.67, 0), opacity 0.2s ease !important;
}

.modal.bottom-sheet .modal-content,
.ap-modal.bottom-sheet .modal-content,
.ap-modal.ap-bottom-sheet .modal-content,
.ap-modal.ap-bottom-sheet .ap-modal-content {
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px 12px 0 0 !important;
  max-height: calc(90vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(90dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc((var(--ap-visual-vh, 100dvh) * 0.9) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  padding-top: 4px !important;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}

.ap-modal-handle {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  margin: 10px auto 12px;
  cursor: grab;
  touch-action: none;
}

.modal.bottom-sheet .modal-content,
.ap-modal.bottom-sheet .modal-content {
  overscroll-behavior: contain;
}

.ap-modal-dragging .ap-modal-handle {
  cursor: grabbing;
}

@media (prefers-color-scheme: dark) {
  .ap-modal-handle {
    background: rgba(255, 255, 255, 0.28);
  }
}

body.ap-map-theme-light .ap-modal-handle {
  background: rgba(0, 0, 0, 0.46) !important;
}

body.ap-map-theme-dark .ap-modal-handle {
  background: rgba(255, 255, 255, 0.32) !important;
}

.sidenav,
.ap-sidenav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(350px, 88vw);
  min-width: 350px;
  max-width: 100%;
  z-index: 200000 !important;
  color: var(--text);
  overflow-y: auto;
  --ap-sidenav-x: -100%;
  transform: translateX(var(--ap-sidenav-x));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ap-shadow);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidenav.backdrop-blur-grey,
.ap-sidenav.backdrop-blur-grey,
.sidenav.ap-backdrop-blur-grey,
.ap-sidenav.ap-backdrop-blur-grey {
  background: rgb(20 20 20 / 80%) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

body.ap-map-theme-light .sidenav.backdrop-blur-grey,
body.ap-map-theme-light .ap-sidenav.backdrop-blur-grey,
body.ap-map-theme-light .sidenav.ap-backdrop-blur-grey,
body.ap-map-theme-light .ap-sidenav.ap-backdrop-blur-grey {
  background: rgb(230 230 230 / 80%) !important;
  color: #111 !important;
}

body.ap-map-theme-dark .sidenav.backdrop-blur-grey,
body.ap-map-theme-dark .ap-sidenav.backdrop-blur-grey,
body.ap-map-theme-dark .sidenav.ap-backdrop-blur-grey,
body.ap-map-theme-dark .ap-sidenav.ap-backdrop-blur-grey {
  background: rgb(20 20 20 / 80%) !important;
  color: #f4f4f4 !important;
}

@media (max-width: 600px), (pointer: coarse) {
  .sidenav,
  .ap-sidenav {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

.sidenav.is-open,
.sidenav.open,
.ap-sidenav.is-open,
.ap-sidenav.open {
  --ap-sidenav-x: 0px;
  transform: translateX(var(--ap-sidenav-x));
  z-index: 200000 !important;
}

.sidenav.right-aligned,
.ap-sidenav.ap-right-aligned,
.ap-sidenav.right-aligned {
  left: auto;
  right: 0;
  --ap-sidenav-x: 100%;
  transform: translateX(var(--ap-sidenav-x));
}

.sidenav.right-aligned.is-open,
.sidenav.right-aligned.open,
.ap-sidenav.right-aligned.is-open,
.ap-sidenav.right-aligned.open,
.ap-sidenav.ap-right-aligned.is-open,
.ap-sidenav.ap-right-aligned.open {
  --ap-sidenav-x: 0px;
  transform: translateX(var(--ap-sidenav-x));
}

.sidenav.ap-sidenav-dragging,
.ap-sidenav.ap-sidenav-dragging {
  transition: none !important;
  user-select: none !important;
  touch-action: none;
}

.sidenav.ap-sidenav-settling,
.ap-sidenav.ap-sidenav-settling {
  transition: transform 0.28s cubic-bezier(0.2, 1.08, 0.22, 1) !important;
}

.sidenav.ap-sidenav-closing,
.ap-sidenav.ap-sidenav-closing {
  transition: transform 0.24s cubic-bezier(0.32, 0, 0.67, 0) !important;
}

/* Toast (M.toast в ap-ui.js) */
.ap-toast {
  position: fixed;
  left: 50%;
  top: var(--ap-toast-top, 58px);
  bottom: auto;
  z-index: 2147483000;
  width: fit-content;
  max-width: 90vw !important;
  box-sizing: border-box;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: 26px;
  background: #fff;
  color: #111;
  box-shadow: var(--ap-shadow);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -16px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.ap-toast.ap-toast--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

body.ap-map-theme-light .ap-toast {
  background: #111;
  color: #fff;
}

body.ap-map-theme-dark .ap-toast {
  background: #fff;
  color: #111;
}

#toast-container {
  top: 58px !important;
  bottom: auto !important;
}

#toast-container .toast {
  width: fit-content;
  max-width: 90vw !important;
  box-sizing: border-box;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: 26px;
  font-size: 1.05rem;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.ap-map-theme-light #toast-container .toast {
  background: #111;
  color: #fff;
}

body.ap-map-theme-dark #toast-container .toast {
  background: #fff;
  color: #111;
}

/* Collapsible (базовая разметка Materialize) */
.collapsible,
.ap-collapsible {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

.collapsible-header,
.ap-collapsible-header {
  cursor: pointer;
  user-select: none;
}

.collapsible-body,
.ap-collapsible-body {
  display: none;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
}

.collapsible-body.is-open,
.ap-collapsible-body.is-open,
li.active > .collapsible-body,
li.active > .ap-collapsible-body {
  display: block;
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Алиасы для постепенного перехода с Materialize (можно удалить позже)       */
/* -------------------------------------------------------------------------- */
.container {
  width: 95%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ap-gutter);
  padding-right: var(--ap-gutter);
  box-sizing: border-box;
}

.no-pad { padding: 0 !important; }
.no-mar { margin: 0 !important; }

.center { text-align: center; }

/* -------------------------------------------------------------------------- */
/* Минимальные компоненты (замена базового слоя Materialize для кнопок/навигации) */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

nav {
  color: inherit;
  background: rgba(255, 255, 255, 0.92);
  height: 56px;
  line-height: 56px;
  width: 100%;
}

nav .nav-wrapper,
nav .ap-nav-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul a {
  display: block;
  padding: 0 16px;
}

.btn,
.ap-btn,
.btn-large,
.ap-btn-large,
.btn-small,
.ap-btn-small,
.btn-flat,
.ap-btn-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  text-transform: uppercase;
  vertical-align: middle;
  letter-spacing: 0.5px;
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn-large,
.ap-btn-large {
  height: 54px;
  line-height: 54px;
  padding: 0 28px;
  font-size: 15px;
}

.btn-floating,
.ap-btn-floating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-decoration: none;
  vertical-align: middle;
}

.btn-floating i,
.ap-btn-floating i {
  line-height: 40px;
}

.waves-effect,
.ap-waves {
  position: relative;
  overflow: hidden;
}

.black,
.ap-black {
  background-color: #000 !important;
  color: #fff !important;
}

.backdrop-blur-grey,
.ap-backdrop-blur-grey {
  background: rgb(20 20 20 / 80%) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

body.ap-blur-disabled .backdrop-blur-grey,
body.ap-blur-disabled .ap-backdrop-blur-grey {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ap-blur-disabled.ap-map-theme-dark .backdrop-blur-grey,
body.ap-blur-disabled.ap-map-theme-dark .ap-backdrop-blur-grey {
  background: rgb(20 20 20 / 100%) !important;
}

body.ap-blur-disabled.ap-map-theme-light .backdrop-blur-grey,
body.ap-blur-disabled.ap-map-theme-light .ap-backdrop-blur-grey {
  background: rgb(230 230 230 / 100%) !important;
}

body.ap-map-theme-light .backdrop-blur-grey,
body.ap-map-theme-light .ap-backdrop-blur-grey {
  background: rgb(230 230 230 / 80%) !important;
  color: #111 !important;
}

body.ap-map-theme-light .backdrop-blur-grey.black,
body.ap-map-theme-light .ap-backdrop-blur-grey.black {
  color: #111 !important;
}

body.ap-map-theme-light .backdrop-blur-grey .material-icons,
body.ap-map-theme-light .backdrop-blur-grey .material-icons-round,
body.ap-map-theme-light .backdrop-blur-grey .mta-menu-icon,
body.ap-map-theme-light .backdrop-blur-grey .mta-info-icon,
body.ap-map-theme-light .backdrop-blur-grey .white-text,
body.ap-map-theme-light .ap-backdrop-blur-grey .material-icons,
body.ap-map-theme-light .ap-backdrop-blur-grey .material-icons-round,
body.ap-map-theme-light .ap-backdrop-blur-grey .mta-menu-icon,
body.ap-map-theme-light .ap-backdrop-blur-grey .mta-info-icon,
body.ap-map-theme-light .ap-backdrop-blur-grey .white-text {
  color: #111 !important;
}

body.ap-map-theme-light .backdrop-blur-grey svg,
body.ap-map-theme-light .ap-backdrop-blur-grey svg {
  color: #111 !important;
  fill: currentColor;
}

body.ap-map-theme-light #intagram-button.backdrop-blur-grey svg,
body.ap-map-theme-light #intagram-button.ap-backdrop-blur-grey svg {
  filter: invert(1) !important;
}

body.ap-map-theme-light .backdrop-blur-grey .blue .material-icons,
body.ap-map-theme-light .backdrop-blur-grey .blue .material-icons-round,
body.ap-map-theme-light .backdrop-blur-grey .btn.blue .material-icons,
body.ap-map-theme-light .backdrop-blur-grey .btn.blue .material-icons-round,
body.ap-map-theme-light .backdrop-blur-grey .dir-start-point-train.blue .material-icons,
body.ap-map-theme-light .backdrop-blur-grey .dir-start-point-train.blue .material-icons-round,
body.ap-map-theme-light .ap-backdrop-blur-grey .blue .material-icons,
body.ap-map-theme-light .ap-backdrop-blur-grey .blue .material-icons-round,
body.ap-map-theme-light .ap-backdrop-blur-grey .btn.blue .material-icons,
body.ap-map-theme-light .ap-backdrop-blur-grey .btn.blue .material-icons-round {
  color: #fff !important;
}

body.ap-map-theme-light .modal.backdrop-blur-grey > .btn-floating.black,
body.ap-map-theme-light .ap-modal.backdrop-blur-grey > .btn-floating.black,
body.ap-map-theme-light .modal.backdrop-blur-grey > .btn-floating.black .material-icons,
body.ap-map-theme-light .modal.backdrop-blur-grey > .btn-floating.black .material-icons-round,
body.ap-map-theme-light .ap-modal.backdrop-blur-grey > .btn-floating.black .material-icons,
body.ap-map-theme-light .ap-modal.backdrop-blur-grey > .btn-floating.black .material-icons-round {
  background-color: #000 !important;
  color: #fff !important;
}


body.ap-map-theme-dark .backdrop-blur-grey,
body.ap-map-theme-dark .ap-backdrop-blur-grey {
  background: rgb(20 20 20 / 80%) !important;
}

.collection,
.ap-collection {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--ap-radius);
  overflow: hidden;
}

.collection-item,
.ap-collection-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-elevated);
}

.collection-item:last-child,
.ap-collection-item:last-child {
  border-bottom: none;
}

.card-panel {
  padding: 16px;
  margin: 8px 0;
  border-radius: var(--ap-radius);
  background: var(--surface-elevated);
}

.flex {
  display: flex;
}

.block {
  display: block;
}

.hide,
.ap-hide {
  display: none !important;
}

.white-text,
.ap-text-white {
  color: #fff !important;
}

.black-text,
.ap-text-black {
  color: #000 !important;
}

.grey-text,
.ap-text-grey {
  color: #9e9e9e !important;
}

.text-darken-2,
.ap-text-darken-2 {
  filter: brightness(0.85);
}

.blue-text {
  color: var(--primary) !important;
}

.green-text {
  color: var(--success) !important;
}

.transparent,
.ap-transparent {
  background-color: transparent !important;
}

.border-grey {
  border: 1px solid #9e9e9e;
}

.border-darken-4 {
  border-color: #212121;
}

.deep-orange.darken-4 {
  background-color: #bf360c;
  color: #fff;
}

.z-depth-0,
.ap-z-depth-0 {
  box-shadow: none !important;
}

.z-depth-s,
.ap-z-depth-s {
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.z-depth-s2,
.ap-z-depth-s2 {
  box-shadow: 4px 8px 16px rgb(0 0 0 / 8%) !important;
}

.bw-text,
.ap-bw-text {
  color: #000 !important;
}

.ap-animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  text-align: right;
}

.ap-divider {
  height: 1px;
  overflow: hidden;
  background-color: var(--border);
  border: none;
}

.backdrop-blur,
.ap-backdrop-blur {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.preloader-wrapper {
  display: inline-block;
  width: 48px;
  height: 48px;
  position: relative;
}

.spinner-layer {
  border-color: var(--primary);
  border-right-color: transparent !important;
  border-width: 0;
  border-style: solid;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: ap-spin 0.8s linear infinite;
}

@keyframes ap-spin {
  to {
    transform: rotate(360deg);
  }
}

.input-field {
  position: relative;
  margin: 16px 0;
}

.input-field input,
.input-field textarea {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
}

.materialize-textarea {
  min-height: 80px;
  resize: vertical;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 120px;
  background: var(--surface-elevated);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  z-index: 10020;
}

.dropdown-content.open {
  display: block;
}