/* «2ГИС» режимі: дереккөз ауыстырғышы, баннер, ғимараттағы ұйымдар, көлік нұсқалары, міндетті атрибуция */
.dg-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.dg-switch .seg button { min-width: 58px; }

.dg-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #2E9E5B 10%, var(--surface)); border: 1px solid color-mix(in srgb, #2E9E5B 30%, var(--border)); margin-bottom: 10px; }
.dg-banner b { display: block; font-size: 15px; margin-bottom: 2px; }
.dg-banner small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.dg-badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #2E9E5B; color: #fff; font-weight: 800; font-size: 12px; }
.dg-hint { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.dg-foot { margin: 14px 0 4px; text-align: center; }
.dg-foot a { color: inherit; text-decoration: underline; }
/* Атрибуция панель ішінде үнемі көрінеді (парақша қай биіктікте болса да, тізім ұзын болса да) */
.panel-body .dg-foot { position: sticky; bottom: 0; z-index: 3; margin: 14px -12px 0; padding: 6px 12px; background: var(--surface); border-top: 1px solid var(--border); }

.dg-bhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.dg-bhead b { display: block; font-size: 15px; }
.dg-bhead small { color: var(--text-3); font-size: 12px; }
.dg-bactions { display: flex; gap: 6px; flex-wrap: wrap; }
.dg-bsearch { display: flex; gap: 6px; margin: 4px 0 10px; }
.dg-bsearch input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.dg-sub { margin: 6px 0 6px; font-size: 14px; }
.dg-note { margin: 0 0 8px; }
.dg-bpin { font-size: 26px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }

/* Қоғамдық көлік нұсқалары (2ГИС қосымшасындағыдай карточкалар) */
.dgj-list { display: grid; gap: 10px; margin-bottom: 10px; }
.dgj { border: 1.5px solid var(--border); border-radius: 16px; padding: 12px; background: var(--surface); }
.dgj.on { border-color: #2E9E5B; box-shadow: 0 2px 10px color-mix(in srgb, #2E9E5B 18%, transparent); }
.dgj-head { display: grid; gap: 2px; width: 100%; text-align: left; }
.dgj-time { display: flex; align-items: baseline; gap: 8px; }
.dgj-time b { font-size: 21px; }
.dgj-time span { font-size: 17px; color: var(--text-2); font-weight: 600; }
.dgj-head small { color: var(--text-3); font-size: 12.5px; }
.dgj { min-width: 0; overflow: hidden; }
.dgj-bar { display: flex; align-items: center; gap: 4px; margin: 10px 0 8px; padding-bottom: 8px; border-bottom: 3px solid var(--surface-2); min-width: 0; }
.dgj-walk { display: inline-flex; justify-content: center; white-space: nowrap; font-size: 12px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dgj-ride { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; overflow: hidden; padding-bottom: 6px; margin-bottom: -11px; border-bottom: 3px solid var(--c); }
.dgj-ride .line-badge { flex: none; }
.dgj-route { min-width: 0; }
.dgj-route .line-badge { flex: none; }
.dgj-ride i { font-style: normal; font-size: 16px; margin-right: 2px; }
.dgj-sched { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13.5px; }
.dgj-sched b { color: #1F7A45; }
.dgj-sched small { color: var(--text-3); font-size: 12px; }
.dgj-routes { display: grid; gap: 6px; }
.dgj-route { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dgj-ico { font-size: 16px; }
.dgj-int { margin-left: auto; color: var(--text-2); text-align: right; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.dgj-more { margin-top: 8px; }
.dgj-more summary { cursor: pointer; display: inline-block; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 600; font-size: 13px; list-style: none; }
.dgj-more summary::-webkit-details-marker { display: none; }
.dgj-more[open] summary { margin-bottom: 4px; }
.dgj-pick { margin-top: 8px; }

/* Қадамдық нұсқаулық (OSM және 2ГИС ортақ — journey.js) */
.jr-prefs { margin: 0 0 10px; }
.jr-steps li { align-items: flex-start; cursor: default; }
.jr-steps li > div { gap: 2px; min-width: 0; }
.jr-steps b { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13.5px; }
.jr-ride .st-ico { background: color-mix(in srgb, var(--c, #1E88E5) 16%, var(--surface-2)); }
.jr-on { color: #15803D !important; font-weight: 600; }
.jr-off { color: #B91C1C !important; font-weight: 600; }
.jr-tr .st-ico { background: color-mix(in srgb, #F59E0B 18%, var(--surface-2)); }
.jr-mid summary { cursor: pointer; font-size: 12px; color: var(--text-3); }
.jr-mid ol { margin: 4px 0 2px 18px; padding: 0; font-size: 12px; color: var(--text-2); display: grid; gap: 2px; }
.dgj-route .line-badge[role="button"], .jr-steps .line-badge[role="button"] { cursor: pointer; }
.dg-item .pl-rating { text-decoration: none; color: inherit; }

/* Міндетті атрибуция: «Деректер 2GIS берілген» — 2ГИС режимінде бірінші экранда үнемі көрінеді */
/* Жұмыс үстелі: панельдің оң жиегінен кейін, төменгі чиптердің үстінде (left — JS: app.panelEdge()) */
.dgis-attr { position: fixed; z-index: 6; left: 16px; bottom: 54px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1F2937; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); white-space: nowrap; }
.dgis-attr a { color: inherit; text-decoration: none; }
.dgis-attr a:hover { text-decoration: underline; }
body.navigating .dgis-attr, body.navigating .dg-mk { display: none; }
/* Мобиль: карта үстінде, хабарландырулардан жоғары (панель ішіндегі жабысқақ жазу толық парақшада көрінеді) */
@media (max-width: 760px) { .dgis-attr { left: 50% !important; bottom: auto; top: 62px; transform: translateX(-50%); z-index: 26; } }
