/* Live tracker w barwach City Sightseeing Warsaw (księga „Warsaw Global”).
   Nadpisuje zmienne z tracker.css (przeniesionego z hoponhopoff) i podmienia fonty na Nunito/Roboto. */
:root {
    --trk-ink: #3E3E3E;
    --trk-muted: #6E6E6E;
    --trk-faint: #8F8F8F;
    --trk-line: #E0E0E0;
    --trk-handle: #D3D3D3;
    --trk-ground: #F4F4F4;
    --trk-card: #FFFFFF;
    --trk-red: #E21316;
    --trk-red-soft: #FDE7E7;
    --trk-blue: #1976D2;
    --trk-blue-soft: #E3EEFA;
    --trk-attr: #FCC000;
    --trk-live: #2E7D32;
    --trk-shadow-card: 2px 2px 5px 0 rgba(0, 0, 0, .314);
    --trk-shadow-ctrl: 0 4px 14px rgba(0, 0, 0, .14);
    --trk-font: Roboto, 'Droid Sans', system-ui, -apple-system, sans-serif;
    --trk-heading: Nunito, 'Droid Sans', system-ui, sans-serif;
}

/* Nagłówki fontem marki */
.trk-title, .trk-body h1, .trk-body h2, .trk-body h3,
.trk-route-name, .trk-poi-card strong { font-family: var(--trk-heading); font-weight: 900; }

/* Logo City Sightseeing Warsaw zamiast „CS” */
.trk-logo, .trk-logo--sm { width: auto; height: 40px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.trk-logo img { display: block; height: 100%; width: auto; }
.trk-head .trk-logo { height: 46px; }
.trk-logo--sm { height: 34px; padding: 3px 8px; border-radius: 24px; background: #E21316; box-shadow: var(--trk-shadow-ctrl); box-sizing: content-box; }
.trk-head { flex-wrap: wrap; }
.trk-head .trk-head-text { flex-basis: 100%; order: 3; }
@media (min-width: 1024px) {
    .trk-head .trk-logo { height: 52px; }
    .trk-head .trk-head-text { flex-basis: auto; order: 0; }
}

/* Przyciski główne w pigułkach jak na stronie */
.trk-body a[class*="btn"], .trk-body button[class*="btn--primary"] { border-radius: 24px; }

/* Ikona ustawień cookies (wtyczka CookieYes) nad dolnym paskiem trackera, żeby nie zasłaniała zakładek */
body.trk-body .cky-btn-revisit-wrapper { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 1024px) { body.trk-body .cky-btn-revisit-wrapper { bottom: 16px !important; left: auto !important; right: 16px !important; } }

/* Telefon: dymki mapy jako wysuwany panel od dołu (assets/tracker/js/mobile-sheet.js) */
@media (max-width: 1023px) {
    .trk-sheet-backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, .35); }
    .trk-sheet-pop.leaflet-popup {
        position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: auto !important; margin: 0 !important; z-index: 1200; opacity: 1;
        transform: translateY(calc(100% + 20px)) !important;
        transition: transform .22s ease-out;
    }
    .trk-sheet-pop.leaflet-popup.is-in { transform: translateY(var(--trk-sheet-drag, 0px)) !important; }
    .trk-sheet-pop .leaflet-popup-content-wrapper {
        max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain;
        border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .trk-sheet-pop .leaflet-popup-content { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 4px 18px 18px !important; }
    .trk-sheet-pop .leaflet-popup-tip-container { display: none; }
    .trk-sheet-pop .leaflet-popup-close-button { top: 14px !important; right: 12px !important; width: 36px !important; height: 36px !important; font-size: 26px !important; line-height: 34px !important; z-index: 2; }
    .trk-sheet-handle { position: absolute; top: 0; left: 50%; z-index: 3; width: 72px; height: 22px; margin-left: -36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
    .trk-sheet-handle::before { content: ""; position: absolute; top: 8px; left: 16px; right: 16px; height: 5px; border-radius: 3px; background: var(--trk-handle); }
    .trk-sheet-pop .leaflet-popup-content-wrapper { padding-top: 18px; }
    /* Zdjęcia i karty w dymkach dopasowane do szerokości ekranu */
    .trk-sheet-pop img { max-width: 100%; height: auto; }
    .trk-sheet-pop [class*="trk-attr"], .trk-sheet-pop [class*="trk-poi"] { width: auto !important; max-width: 100% !important; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .trk-sheet-pop.leaflet-popup { transition: none; } }

/* Telefon: karta atrakcji jako zwarty panel wysuwany od dołu */
@media (max-width: 1023px) {
    #trk-attr:not([hidden]) { animation: trk-sheet-up .24s ease-out; }
    @keyframes trk-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    .trk-attr-card { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
    .trk-attr-card .trk-ap-photo { flex: 0 0 100%; }
    .trk-attr-card > * { flex: 1 1 100%; min-width: 0; }
    .trk-attr-card .trk-ap-photo { height: 96px; border-radius: 12px; }
    .trk-attr-card .trk-ap-badge { font-size: 10px; padding: 3px 8px; }
    .trk-attr-card .trk-ap-text h2 { margin: 0; font-size: 18px; line-height: 1.2; }
    .trk-attr-card .trk-ap-text p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .trk-attr-card .trk-ap-rows { gap: 6px; }
    .trk-attr-card .trk-ap-row { padding: 8px 10px; font-size: 13px; }
    .trk-attr-card .trk-ap-primary, .trk-attr-card .trk-ap-secondary { flex: 1 1 40%; min-height: 46px; margin: 0; padding: 0 10px; font-size: 14px; border-radius: 24px; }
    .trk-attr-card .trk-ap-primary { background: var(--trk-red); color: #fff; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { #trk-attr:not([hidden]) { animation: none; } }